Question

当您在codepen上单击Clear Canvas按钮时，它将显示为画布已清除，但如果您再次尝试绘制，则所有旧行将重新显示。

//Redraw
function redraw(){
    $("#clearcanvas").click(function () {
      context.clearRect(0, 0, context.canvas.width, context.canvas.height); 
    });
    context.strokeStyle = "#df4b26";
    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.stroke();
  }   
}

完整代码：http://codepen.io/urketadic/pen/AXGKvp

Answer 1

旧行重新显示，因为它们存储在clickX和clientY中，当您基本上在画布中绘制时，在代码中调用redraw方法，它绘制了这些对象中的所有内容。你错过了清除这两个对象。

（我已经忘了一个，clickDrag。）

要清除数组（此类对象）而不丢失其引用，只需将其'length'属性设置为0。

clientX.length =
clientY.length =
clickDrag.length = 0

Answer 2

因为您要将每个绘制线的信息存储在clickX，clickY和clickDrag的数组中。即使在清除画布后，画布也会绘制每条线。你想要做的是清空那些数组项：

$("#clearcanvas").click(function () {
   context.clearRect(0, 0, context.canvas.width, context.canvas.height); 
   clickX = []; clickY = []; clickDrag = []; // or 'new Array()' or '.length = 0'
});

Canvas上的清除功能无法正常工作

2 个答案: