如何在HMTL5畫布上繪製矩形時清除路徑

Question

我目前正在研究在畫布上繪製矩形的應用程序。我可以完美地繪製矩形，但是當我嘗試更改鼠標的移動以使矩形更小時，會留下痕跡。當我將矩形的尺寸變小時，如何清除這些痕跡？下面是我使用的JavaScript代碼。提前致謝。

function drawSquare() { 
    // creating a square 
    var w = lastX - startX; 
    var h = lastY - startY; 
    var offsetX = (w < 0) ? w : 0; 
    var offsetY = (h < 0) ? h : 0; 
    var width = Math.abs(w); 
    var height = Math.abs(h); 

    context.beginPath(); 
    context.rect(startX + offsetX, startY + offsetY, width, height); 
    context.fillStyle = "gold"; 
    context.fill(); 
    context.lineWidth = 1; 
    context.strokeStyle = 'red'; 
    context.stroke(); 
    canvas.style.cursor = "default"; 
} 

function getMousePos(canvas, e) { 
    var rect = canvas.getBoundingClientRect(); 
    return { 
     x: e.pageX - canvas.offsetLeft, 
     y: e.pageY - canvas.offsetTop, 
    }; 
} 

function handleMouseDown(e) { 

    // get mouse coordinates 
    mouseX = parseInt(e.pageX - offsetX); 
    mouseY = parseInt(e.pageY - offsetY); 
    // set the starting drag position 
    lastX = mouseX; 
    lastY = mouseY; 

    isDown = true; 

    if (isChecBoxClicked == true) { 
     mouseIsDown = 1; 
     startX = lastX; 
     startY = lastY; 
     var pos = getMousePos(canvas, e); 

     startX = lastX = pos.x; 
     startY = lastY = pos.y; 

     drawSquare(); 

    } 
    else { 
     canvas.style.cursor = "default"; 
    } 
} 

function handleMouseUp(e) { 
    // clear the dragging flag 
    isDown = false; 
    canvas.style.cursor = "default"; 
    // get mouse coordinates 
    mouseX = parseInt(e.pageX - offsetX); 
    mouseY = parseInt(e.pageY - offsetY); 
    // set the starting drag position 
    lastX = mouseX; 
    lastY = mouseY; 

    if (isChecBoxClicked == true) 
    { 
     canvas.style.cursor = "crosshair"; 

     if (mouseIsDown !== 0) { 
      mouseIsDown = 0; 
      var pos = getMousePos(canvas, e); 
      lastX = pos.x; 
      lastY = pos.y; 
      drawSquare(); 
     } 
    } 
} 

function handleMouseMove(e) { 

    // if we're not dragging, exit 
    if (!isDown) { 
     return; 
    } 

    //if (defaultval == 1) { 
    // return; 
    //} 

    if (isChecBoxClicked == true) { 
     canvas.style.cursor = "crosshair"; 

     if (mouseIsDown !== 0) { 

      var pos = getMousePos(canvas, e); 
      lastX = pos.x; 
      lastY = pos.y; 
      drawSquare(); 
     }   
    } 
} 

Answer 1

畫布不會自行清除。至少不像您使用的2D環境。如果你不斷繪製它，新的圖形將被放置在舊的圖形上。您需要明確清除它：

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

Answer 2

您可能必須清除畫布。如果你只畫一個正方形，你將不得不在drawSquare函數中這樣做。如果你正在繪製多個東西，你將不得不在一個更高的函數中重繪多個東西。

對於清除整個畫布，你可以使用下面的代碼：

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

也有很多的畫布庫將管理此爲您和優化重繪區域（他們可能只能清除一部分的畫布，所以有更少的像素重繪）