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

问题描述：

当您单击codepen上的清除画布按钮时，它将显示为画布清除，但如果您再次尝试绘画，所有旧线条将重新出现。画布上的清除功能无法正常工作

//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

答

因为您存储用于一个阵列是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' 
});

答

旧线重新出现，因为他们存储在clickX和clientY，当你在画布上画出基本调用redraw方法在你的代码，这在这些对象中绘制一切。你错过了清除这两个对象。

（我忘了一个，clickDrag。）

要清除不失其引用一个阵列（例如对象），只需设置其'length'属性0。

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

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

相关推荐