0

在画布中恢复背景时遇到问题。我有一个画布，它根据选项所说的内容改变大小（它可以变得非常大），我在上面绘制图像，现在我想要一个指示器来显示鼠标在网格状格式中的位置。curX问题是红色框被绘制了，但是下次更改or时背景不会重新绘制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 ，但这似乎不起作用。可能它在离开画布时确实恢复了整个背景，但是一旦我回到画布，红色框又回来了。

4

1 回答 1

1

您应该ctx.beginPath()在下一次绘图操作之前使用。调用stroke()orfill()不会清除堆栈，并且下次会再次绘制，这会导致形成轨迹。

于 2017-01-18T15:24:27.277 回答