画布上的清除功能无法正常工作答案

【问题标题】：Clear function on Canvas isnt working properly画布上的清除功能无法正常工作
【发布时间】：2020-06-10 07:10:59
【问题描述】：

当你点击 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

【问题讨论】：

标签： javascript html canvas html5-canvas

【解决方案1】：

因为您将每条绘制线的信息存储在数组中，即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'
});

【讨论】：

【解决方案2】：

旧线重新出现是因为它们存储在clickX 和clientY 中，当您基本上在画布中绘制时，您会在代码中调用redraw 方法，该方法会在这些对象中绘制所有内容。您没有清除这两个对象。

（我忘了一个，clickDrag。）

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

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

【讨论】：