clearRect 不會擦除最后一行

Question

我畫了兩張圖。 一個說“1x10”，另一個說“10x10”。 基本上，當用戶單擊圖像時，我只是繪制一個除以 9 條垂直線或同一個正方形除以 9 條水平線和 9 條垂直線的正方形。 代碼如下：

canvas.addEventListener('click',ProcessClick,false);
function ProcessClick(toi){
    var posx = toi.layerX;
    var posy = toi.layerY;
    if(toi.layerX == undefined || toi.layerY == undefined){
        posx = toi.offsetX;
        posy = toi.offsetY;
    }
    if(posx>170 && posx<320 && posy>320 && posy<370){
        rect1x10();
    }
    if(posx>470 && posx<620 && posy>320 && posy<370){
        rect10x10();
    }
}//ProcessClick

rect1x10 = function(){
    ctx.strokeStyle = "blue";
    ctx.fillStyle = "white";
    ctx.clearRect(200, 375, 355, 325);
    ctx.rect(240, 390, 300, 300);
    ctx.fill();
    ctx.lineWidth = 2;
    ctx.stroke();
    ctx.lineWidth = 1;
    var lineX = 270.5;
    for (i = 0; i <= 8; i++){
        ctx.beginPath();
        ctx.moveTo(lineX, 390);
        ctx.lineTo(lineX, 690);
        ctx.stroke();
        lineX += 30;
    }
}//rect1x10

rect10x10 = function(){
    ctx.strokeStyle = "blue";
    ctx.fillStyle = "white";
    ctx.clearRect(200, 375, 355, 325);
    ctx.rect(240, 390, 300, 300);
    ctx.fill();
    ctx.lineWidth = 2;
    ctx.stroke();
    ctx.lineWidth = 1;
    var lineX = 270.5;
    for (i = 0; i <= 8; i++){
        ctx.beginPath();
        ctx.moveTo(lineX, 390);
        ctx.lineTo(lineX, 690);
        ctx.stroke();
        lineX += 30;
    }
    var lineY = 420.5;
    for (i = 0; i <= 8; i++){
        ctx.beginPath();
        ctx.moveTo(240, lineY);
        ctx.lineTo(540, lineY);
        ctx.stroke();
        lineY += 30;
    }
}//rect10x10

第一次單擊任一圖像時，一切正常（細線，間隔良好），問題是繪制任一矩形時，下一個會起作用。 例如： 1) 當首先調用 1x10 然后調用 10x10 時，最后一條垂直線更粗。 2）當首先調用 10x10 然后調用 1x10 時，最后一條水平線根本不會被擦除。 如果我再次調用 1x10，最后一條水平線現在會被擦除，但最后一條垂直線會變粗。

所有這些都只是一個圖形參考，所以我可以輕松地顯示一個正方形的圖像，該圖像被划分為 1x10 或 10x10 並解決了問題。 但是，我真的很想了解我做錯了什么以供將來參考。 在此先感謝大家的支持。

Answer 1

當您stroke矩形時，您會得到一條路徑的殘余。

調用ctx.beginPath(); 在調用rect之前。

或者，或者，跳過所有這些並使用strokeRect

ctx.beginPath();
ctx.rect(240, 390, 300, 300);
ctx.lineWidth = 2;
ctx.stroke();
ctx.lineWidth = 1;

要么

ctx.clearRect(200, 375, 355, 325);
ctx.lineWidth = 2;    
ctx.strokeRect(240, 390, 300, 300);   
ctx.lineWidth = 1;