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整個畫布上,但似乎並沒有工作。可能它在離開畫布時恢復了整個背景,但是一旦我回到畫布上,紅色框就回來了。