clearRect не стирает последнюю строку

Я рисую два изображения. На одном написано "1х10", на другом "10х10". По сути, я просто рисую квадрат, разделенный 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, и проблема была решена. Тем не менее, я ДЕЙСТВИТЕЛЬНО хочу узнать, что я делаю неправильно, для дальнейшего использования. Заранее спасибо за всю поддержку.


javascript html5-canvas drawing
person Christian Blanco Tovar    schedule 30.10.2012    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Вы получаете остаток одного из ваших путей, когда вы stroke прямоугольники.

позвоните ctx.beginPath(); перед звонком rect.

Или, как вариант, пропустить все это и использовать strokeRect

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

or

ctx.clearRect(200, 375, 355, 325);
ctx.lineWidth = 2;    
ctx.strokeRect(240, 390, 300, 300);   
ctx.lineWidth = 1;
person Shmiddty    schedule 31.10.2012
comment
Благодарю вас! Поскольку мне нужно, чтобы прямоугольник имел белый фон, я поместил ctx.beginPath() перед прямоугольником. Все работает как задумано теперь. - person Christian Blanco Tovar; 02.11.2012