用新的HTML5畫布

Question

下面的代碼清除按鈕上的畫布開始點擊

context.clearRect(0, 0, context.canvas.width, context.canvas.height); // Clears 

，但是，當我嘗試重繪就可以了，舊的圖紙出現，我不希望它。我想在一個新的空白畫布

http://jsfiddle.net/umwc5/

開始畫我如何做到這一點？

的情況下，你希望看到整個代碼..

$(function() { 
    var c = document.getElementById("canvas"); 
    var context = c.getContext("2d"); 
    var clickX = new Array(); 
    var clickY = new Array(); 
    var clickDrag = new Array(); 
    var paint; 

    $('#canvas').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(); 
    }); 


    $('#canvas').mousemove(function (e) { 
     if (paint) { 
      addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop, true); 
      redraw(); 
     } 
    }); 

    $('#canvas').mouseup(function (e) { 
     paint = false; 
    }); 

    $('#canvas').mouseleave(function (e) { 
     paint = false; 
    }); 

    $('#clear').click(function (e) { 
     e.stopPropagation(); 
     context.clearRect(0, 0, context.canvas.width, context.canvas.height); // Clears 

    }); 

    function addClick(x, y, dragging) { 
     clickX.push(x); 
     clickY.push(y); 
     clickDrag.push(dragging); 
    } 

    function redraw() { 
     context.clearRect(0, 0, context.canvas.width, context.canvas.height); // Clears the canvas 

     context.strokeStyle = "#000000"; 
     context.lineJoin = "round"; 
     context.lineWidth = 2; 

     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(); 
     } 
    } 

    }); 

Answer 1

你必須明確以下陣列clickX，clickY和clickDrag：

context.clearRect(0, 0, context.canvas.width, context.canvas.height); 
clickX = []; // clear mouse "logs" 
clickY = []; 
clickDrag = []; 

Working jsFiddle

當你點擊或拖動鼠標時調用方法，該方法使用鼠標座標填充數組clickX，clickY和clickDrag。當調用redraw方法時，它會再次在畫布上繪製點。所以清除這些數組將解決您的問題。