javascript - canvas - putImageData 并不总是有效
javascript - canvas - putImageData doesn't always work
在 canvas 中恢复背景时遇到问题。我有一个 canvas 根据选项的内容改变大小(它可以变得非常大),我在它上面绘制图像,现在我想要一个指示器来显示鼠标在网格格式中的位置.问题是红色框被绘制了,但是下次 curX
或 curY
改变时背景不会被重新绘制。
我注意到一个奇怪的地方是,当我将鼠标移到黑色区域时,红色框似乎是深红色,但是当我在同一点上来回移动时,红色似乎变得更深.有时我之前画的红框也会变强,而无需重新访问这些区域,就像一条小路正在形成。
只有有时背景 return,但通常是在我离开该区域时。
<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
我什至在整个 canvas 上尝试过 getImageData,但似乎没有用。可能它在离开 canvas 时确实恢复了整个背景,但是一旦我 return 编辑到 canvas.
,红色框又回来了
您应该在进行下一次绘图操作之前使用 ctx.beginPath()
。调用 stroke()
或 fill()
不会清除堆栈,下次会再次绘制,这会导致轨迹形成。
在 canvas 中恢复背景时遇到问题。我有一个 canvas 根据选项的内容改变大小(它可以变得非常大),我在它上面绘制图像,现在我想要一个指示器来显示鼠标在网格格式中的位置.问题是红色框被绘制了,但是下次 curX
或 curY
改变时背景不会被重新绘制。
我注意到一个奇怪的地方是,当我将鼠标移到黑色区域时,红色框似乎是深红色,但是当我在同一点上来回移动时,红色似乎变得更深.有时我之前画的红框也会变强,而无需重新访问这些区域,就像一条小路正在形成。
只有有时背景 return,但通常是在我离开该区域时。
<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
我什至在整个 canvas 上尝试过 getImageData,但似乎没有用。可能它在离开 canvas 时确实恢复了整个背景,但是一旦我 return 编辑到 canvas.
,红色框又回来了您应该在进行下一次绘图操作之前使用 ctx.beginPath()
。调用 stroke()
或 fill()
不会清除堆栈,下次会再次绘制,这会导致轨迹形成。