JavaScript - canvas - putImageData не всегда работает

Question

Возникли проблемы с восстановлением фона на холсте. У меня есть холст, который меняет размер в зависимости от того, что говорят опции (и он может стать очень большим), я рисую изображения по всему нему, и теперь я хочу, чтобы индикатор отображал положение мыши в формате сетки. Проблема в том, что красный прямоугольник рисуется, но фон не перерисовывается в следующий раз curX или же curY изменено

Одна странная часть, которую я замечаю, состоит в том, что когда я перемещаю мышь в черную область, красное поле кажется темно-красным, но когда я перемещаюсь назад и вперед по одному и тому же месту, красное, кажется, становится сильнее. И иногда красные ящики, которые я рисовал раньше, также становятся сильнее, не посещая эти области, как формируется след.

Только иногда фон возвращается, но обычно это происходит, когда я покидаю область.

<canvas id="leveldraw" onmousemove="getMouse(event)" onmouseout="stopMouse()" width="0" height="0"></canvas>

...

var oldBlk = null;
...
function getMouse(e)
{
    var offsetpos = recursive_offset(canvas);
    var oldX = curX;
    var oldY = curY;
    mouseX = e.clientX + offsetpos.x + (canvas.offsetLeft/2);
    mouseY = e.clientY + offsetpos.y + (canvas.offsetTop/2)+24;
    curX = Math.floor(mouseX/24);
    curY = Math.floor(mouseY/24);
    if(oldX!=curX || oldY!=curY)
    {
        if(oldBlk != null)
            ctx.putImageData(oldBlk,(oldX*24)-24,(oldY*24)-24);
        oldBlk = ctx.getImageData((curX*24)-24,(curY*24)-24,72,72);
        ctx.lineWidth="1";
        ctx.strokeStyle="red";
        ctx.rect(curX*24,curY*24,24,24);
        ctx.stroke();
    }
}
function stopMouse()
{
    ctx.putImageData(oldBlk,(curX*24)-24,(curY*24)-24);
    oldBlk = null;
}

recursive_offset(): Получить позицию мыши в прокручиваемом элементе div

Я даже пробовал getImageData на всем холсте, но, похоже, это не сработало. Возможно, он действительно восстановил весь фон при выходе из холста, НО красные коробки вернулись, как только я вернулся на холст.

Answer 1

Вы должны использовать ctx.beginPath() перед следующей операцией рисования. призвание stroke() или же fill() не очищает стек и будет снова разыгран в следующий раз, что приведет к формированию следа.