0

2枚の絵を描きます。1 つは「1x10」、もう 1 つは「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長方形を作成すると、パスの1つの残りが得られます。

呼び出す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 に答える