2016-02-23 58 views
0

在画布中恢复背景时出现问题。我有一个根据选项的不同而改变大小的画布(它可能会变得非常大),我会在其上绘制图像,现在我需要一个指示器来显示鼠标在网格中的格式。问题在于红色框被绘制,但在下次curXcurY更改时不会重新绘制背景。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整个画布上,但似乎并没有工作。可能它在离开画布时恢复了整个背景,但是一旦我回到画布上,红色框就回来了。

回答

1

在下一次绘图操作之前,您应该使用ctx.beginPath()。调用stroke()fill()不会清除堆栈,并且会在下次再次绘制时导致线索形成。