0

我画了两张图。一个说“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 并解决问题。但是，我真的很想了解我做错了什么以供将来参考。提前感谢大家的支持。

4

1 回答 1

0

当你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;
于 2012-10-31T20:21:35.520 回答