javascript - HTML5 Canvas 重影动画问题？

Question

我一直在看很多关于如何使用 javascript 和请求动画帧做正确的 HTML5 动画的教程，即使在演示中，动画看起来也很模糊，就像被重绘的图像在短时间内留下了自己的幻影图像。但后来我看到像微软移植版的割绳子这样的游戏似乎已经解决了这个问题。有谁知道使这种画布效果不那么明显的方法？

Answer 1

我猜你遇到的问题是在清除前一个图像之前重新绘制新图像。我建议确保画布被清除，或者至少是图像被重新绘制的区域。虽然，我尝试清除整个画布与清除画布的特定部分，并达到一定大小（大约 800x600），但清除整个画布更快。

我在我的（正在进行的）游戏中使用画布：http ://www.dacheng.me/dBoom

随意浏览JS源代码！

Answer 2

我认为您正在寻找的是窗口缓冲：

http://en.wikipedia.org/wiki/Multiple_buffering

基本上，这个想法是使用两个不同的窗口/画布元素，它们在完全绘制后互换，以便您在完全绘制的“框架”之间切换。该技术用于 OpenGL 和当今存在的几乎所有其他合法图形程序。