javascript 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()：Get mouse position in scrollable div

我甚至在整个画布上尝试过getImageData，但这似乎行不通。可能它在离开画布时恢复了整个背景，但是当我回到画布时，红色的盒子又回来了。

Answer 1

在下一次绘图操作之前，您应该使用ctx.beginPath()。调用stroke()或fill()不会清除堆栈，下一次将再次绘制，这将导致跟踪形成。