我正在使用 JavaScript 制作一个 HTML 绘图应用程序，遵循 this page 的教程。 。我已经完成了“演示颜色”部分末尾、“添加尺寸”部分之前的内容。
我为自己制作了该应用程序，但经过一定量的绘图后，该应用程序开始出现滞后。笔开始在鼠标后面延迟，但最重要的是，当颜色改变时，笔的颜色需要相当长的时间才能真正改变。
按下按钮时，我会调用 console.log，告诉我按下了哪个按钮。当按下按钮时，这些会立即出现，但颜色仍然需要一段时间才能改变。
代码如下:
<html>
<head></head>
<body>
<canvas id="lessonCanvas" width="800" height="500" style="border:1px solid black;"></canvas>
<button id="colorPurple">Purple</button>
<button id="colorGreen">Green</button>
<button id="colorYellow">Yellow</button>
<button id="colorBrown">Brown</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
//canvas drawing
context = document.getElementById('lessonCanvas').getContext("2d");
$('#lessonCanvas').mousedown(function(e){
var mouseX = e.pageX - this.offsetLeft;
var mouseY = e.pageY - this.offsetTop;
paint = true;
addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop);
redraw();
});
$('#lessonCanvas').mousemove(function(e){
if(paint){
addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop, true);
redraw();
}
});
$('#lessonCanvas').mouseup(function(e){
paint = false;
});
$('#lessonCanvas').mouseleave(function(e){
paint = false;
});
var clickX = new Array();
var clickY = new Array();
var clickDrag = new Array();
var clickSize = new Array();
var curSize = "normal";
var clickTool = new Array();
var curTool = "crayon";
var paint;
function addClick(x, y, dragging) {
clickX.push(x);
clickY.push(y);
clickDrag.push(dragging);
if(curTool == "eraser"){
clickColor.push("white");
}else{
clickColor.push(curColor);
}
clickColor.push(curColor);
clickSize.push(curSize);
}
function redraw() {
context.lineJoin = "round";
/* context.lineWidth = 5; */
for(var i=0; i < clickX.length; i++) {
context.beginPath();
if(clickDrag[i] && i) {
context.moveTo(clickX[i-1], clickY[i-1]);
} else {
context.moveTo(clickX[i]-1, clickY[i]);
}
context.lineTo(clickX[i], clickY[i]);
context.closePath();
context.strokeStyle = clickColor[i];
context.lineWidth = curSize;
context.stroke();
}
}
var colorPurple = "#cb3594";
var colorGreen = "#659b41";
var colorYellow = "#ffcf33";
var colorBrown = "#986928";
var curColor = colorPurple;
var clickColor = new Array();
document.getElementById("colorPurple").onclick = function() {
curColor = colorPurple;
console.log("Color changed to purple.");
}
document.getElementById("colorGreen").onclick = function() {
curColor = colorGreen;
console.log("Color changed to green.");
}
document.getElementById("colorYellow").onclick = function() {
curColor = colorYellow;
console.log("Color changed to yellow.");
}
document.getElementById("colorBrown").onclick = function() {
curColor = colorBrown;
console.log("Color changed to brown.");
}
</script>
</body>
</html>
有一个演示:this page ，它使用完全相同的代码，但由于某种原因不会滞后。这是因为我的 Canvas 更大，还是还有其他我没有注意到的问题？任何帮助将不胜感激!
最佳答案
它不会滞后。你犯了一个错误。
看看下面的addClick，您在其中添加了相同的颜色两次，这就是您出现此行为的原因。
我做了一些小改动，请阅读 addClick 处的评论
var colorPurple = "#cb3594";
var colorGreen = "#659b41";
var colorYellow = "#ffcf33";
var colorBrown = "#986928";
var curColor = colorPurple;
var clickColor = new Array();
//canvas drawing
context = document.getElementById('lessonCanvas').getContext("2d");
$('#lessonCanvas').mousedown(function(e){
var mouseX = e.pageX - this.offsetLeft;
var mouseY = e.pageY - this.offsetTop;
paint = true;
addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop);
redraw();
});
$('#lessonCanvas').mousemove(function(e){
if(paint){
addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop, true);
redraw();
}
});
$('#lessonCanvas').mouseup(function(e){
paint = false;
});
$('#lessonCanvas').mouseleave(function(e){
paint = false;
});
var clickX = new Array();
var clickY = new Array();
var clickDrag = new Array();
var clickSize = new Array();
var curSize = "normal";
var clickTool = new Array();
var curTool = "crayon";
var paint;
function addClick(x, y, dragging) {
clickX.push(x);
clickY.push(y);
clickDrag.push(dragging);
if(curTool == "eraser"){
clickColor.push("white");
}else{
clickColor.push(curColor);
}
// clickColor.push(curColor);//This should be removed
clickSize.push(curSize);
}
function redraw() {
context.lineJoin = "round";
/* context.lineWidth = 5; */
for(var i=0; i < clickX.length; i++) {
context.beginPath();
if(clickDrag[i] && i) {
context.moveTo(clickX[i-1], clickY[i-1]);
} else {
context.moveTo(clickX[i]-1, clickY[i]);
}
context.lineTo(clickX[i], clickY[i]);
context.closePath();
context.strokeStyle = clickColor[i];
context.lineWidth = curSize;
context.stroke();
}
}
document.getElementById("colorPurple").onclick = function() {
curColor = colorPurple;
console.log("Color changed to purple.");
}
document.getElementById("colorGreen").onclick = function() {
curColor = colorGreen;
console.log("Color changed to green.");
}
document.getElementById("colorYellow").onclick = function() {
curColor = colorYellow;
console.log("Color changed to yellow.");
}
document.getElementById("colorBrown").onclick = function() {
curColor = colorBrown;
console.log("Color changed to brown.");
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<canvas id="lessonCanvas" width="200" height="200" style="border:1px solid black;"></canvas>
<button id="colorPurple">Purple</button>
<button id="colorGreen">Green</button>
<button id="colorYellow">Yellow</button>
<button id="colorBrown">Brown</button>关于javascript - 为什么这个 JavaScript Canvas 绘图应用程序滞后？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55884301/