0
在画布中恢复背景时出现问题。我有一个根据选项的不同而改变大小的画布(它可能会变得非常大),我会在其上绘制图像,现在我需要一个指示器来显示鼠标在网格中的格式。问题在于红色框被绘制,但在下次curX
或curY
更改时不会重新绘制背景。javascript - canvas - putImageData并不总是有效
我注意到的一个奇怪的部分是,当我将鼠标带到黑色区域时,红色框似乎是深红色,但当我在相同的位置来回移动时,红色似乎变得更强。有时,我以前画的红色盒子也变得更加强壮,没有重新审视这些区域,就像一条小路正在形成。
只是有时背景会回来,但通常是当我离开该区域时。
<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整个画布上,但似乎并没有工作。可能它在离开画布时恢复了整个背景,但是一旦我回到画布上,红色框就回来了。