畫布上的清除功能無法正常工作

Question

當您單擊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

Answer 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' 
}); 

Answer 2

舊線重新出現，因爲他們存儲在clickX和clientY，當你在畫布上畫出基本調用redraw方法在你的代碼，這在這些對象中繪製一切。你錯過了清除這兩個對象。

（我忘了一個，clickDrag。）

要清除不失其引用一個陣列（例如對象），只需設置其'length'屬性0。

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