HTML5畫布動畫問題

Question

我嘗試使用HTML5畫布嘗試創建一些動畫。我的最終目標是能夠將一個盒子動畫製作到一個特定的位置，現在我只是在整個屏幕上對它進行動畫製作。當我在屏幕上移動它時，我留下了黑色的痕跡，如何在不移除背景網格的情況下清除此「髒」部分？

代碼的的jsfiddle是here

Answer 1

兩種解決方案

• 它移動到新位置之前重繪動漫頂部的背景。這就是所謂的骯髒精靈技術 - 更快 - 更復雜。

• 重繪幀

之間的整個畫布如果繪製背景是一個複雜的操作牽住在另一個畫布速度緩衝準備的背景。

Answer 2

如果你不想讓它看到，你必須清除你畫的東西。我假設你不想清除整個畫布以避免重新繪製網格並花費CPU週期。你必須以不同的方式做到這一點。

可能的解決方案：

• 有兩個相同的屏幕上的畫布一個比其他。在畫布下面畫網格，不要清除它。清除頂部畫布的一部分並重新繪製。
• 有一個屏幕和一個屏幕外畫布。在屏幕畫布上繪製網格。每次您設置動畫時，清除整個屏幕畫布，從另一個畫面複製準備好的網格，然後繪製您需要的畫面。