2016-02-23 83 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()不會清除堆棧,並且會在下次再次繪製時導致線索形成。