clearRect不会擦除最后一行

我绘制两个图像。一个说“1x10”，另一个说“10x10”。基本上，当用户点击图像时，我画了一个由9条垂直线或9条水平线和9条垂直线所划分的相同方形的正方形。代码如下：clearRect不会擦除最后一行

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和问题解决。不过，我真的很想知道我做错了什么，以备将来参考。在此先感谢您的支持。

来源

2012-10-30 Christian Blanco Tovar

当您的矩形为stroke时，您将获得其中一条路径的剩余部分。在致电rect之前致电ctx.beginPath();。

，或者，跳过所有和使用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;

来源

2012-10-31 20:21:35 Shmiddty

谢谢！由于我需要矩形具有白色背景，因此在rect之前放置ctx.beginPath（）。所有的工作如预期的那样。 –

clearRect不会擦除最后一行

回答

相关问题