html5畫布動畫。移動圖像閃爍或線索

我已經看到關於此的其他帖子，但我找不到任何東西來幫助我。html5畫布動畫。移動圖像閃爍或線索

我在畫布上畫一幅圖片，當它移動時，它會留下一條尚未清除的痕跡。如果我在另一幅圖上繪製這幅圖像，我不會得到任何蹤跡，但頂部閃爍的圖像。我不認爲clearRect會爲我工作。

我可以保存圖像動畫之間的畫布狀態嗎？或者我應該使用第二個畫布？

我不太清楚如何進行，任何意見將是巨大的

*添加例子 - jsfiddle.net/zE67k/2用圖像和閃爍。沒有圖像和線索的jsfiddle.net/zE67k/3。這只是一個例子，我試圖通過背景圖像來實現這一點。

*我也嘗試將一個畫布放在另一個畫布上，我仍然得到閃爍，我認爲問題是我放置clearRect的位置。如果在眼睛被繪製之前放置clearRect，它確實會起作用，但是這種代碼繪製和更新眼睛的方式一次只能做一次，因此前一隻眼睛會被清除，只留下一隻眼睛。我正在嘗試從本教程開始http://astronautz.com/wordpress/html5-eyes-that-follow-the-mouse/

來源

2012-05-01 mao

爲什麼不會'clearRect'工作爲你？你需要清除這個區域然後重繪，這就是爲什麼你需要找到路徑。 – Loktar

theres一個背景圖像，我應該把它拿出來的畫布，並將其放入css – mao

有傳言說，清除畫布的最快方法就是'canvas.width = canvas.width;' –

在繪製其他圖像ontop之前，應該保存乾淨的畫布，並在再次繪製移動的圖像之前恢復保存的乾淨狀態。您可以使用一個額外的畫布，以節省一個乾淨的狀態：

// create clean buffer 
var buffer = document.createElement('canvas'), 
    canvas = document.getElementById('myCanvas'); 

buffer.width = canvas.width; 
buffer.height = canvas.height; 

// draw "background"/clean state to canvas 
drawBackground(canvas); 

// save clean state 
buffer.getContext('2d').drawImage(canvas);

然後whenver你想畫/移動你的其他圖像/件簡單的恢復乾淨的狀態：

canvas.getContext('2d').drawImage(buffer); 
drawObject(canvas, x, y, w, h);

來源

2012-05-03 14:37:11

謝謝，這讓我走上了正軌。感謝幫助。 – mao

html5畫布動畫。移動圖像閃爍或線索

回答

相關問題