javascript - HTML5 Canvas 动画问题

Question

我正在尝试使用 HTML5 Canvases 来创建一些动画。我的最终目标是能够随心所欲地将一个盒子动画到一个特定的位置，现在我只是在屏幕上动画它。当我在屏幕上移动它时，我会留下黑色痕迹，如何在不删除背景网格的情况下清除这个“脏”部分？

代码的 jsFiddle 在这里

Answer 1

两种解决方案

• 在将动画移动到新位置之前，重新绘制动画顶部的背景。这种所谓的脏精灵技术 - 更快 - 更复杂。

• 在帧之间重绘整个画布

如果绘制背景是一项复杂的操作，只需将准备好的背景缓冲在另一个画布中以提高速度。

Answer 2

如果您不希望它可见，则必须清除所绘制的内容。我假设您不想清除整个画布以避免重绘网格和花费 CPU 周期。您必须以不同的方式执行此操作。

可能的解决方案：

• 有两个相同的屏幕画布一个在另一个上。在下面的画布上绘制网格，不要清除它。清除顶部画布的一部分并在其上重新绘制。
• 有一个屏幕上和一个屏幕外的画布。在屏幕外画布上绘制网格。每次制作动画时，清除整个屏幕画布，从其他画布复制准备好的网格，然后在其上绘制您需要的内容。