使用 JavaScript 和画布制作动画答案

【问题标题】：Animation with javascript and canvas使用 JavaScript 和画布制作动画
【发布时间】：2011-09-24 05:51:08
【问题描述】：

我可以用画布制作简单的动画。但我必须在绘画前清洁每一帧，这会使绘画变慢（fps ~ 15）我尝试使用 2 个画布，但没有成功。你知道如何提高fps吗？我可以使用缓冲吗？以及如何？

【问题讨论】：

【解决方案1】：

如果您要绘制大量图像，则可以通过将图像绘制到画布元素上并存储它而不是图像来大大提高性能。将一个画布元素绘制到另一个画布元素上比绘制图像要快得多。

【讨论】：

【解决方案2】：

这在很大程度上取决于您绘制动画的方式。操作画布像素数据数组可能非常慢，因为 JS 中的数组遍历比原生 GPU 加速渲染慢。它可以帮助仅隔离需要重绘的画布部分，而不是清除整个内容，但您可能已经知道了！

【讨论】：

【解决方案3】：

不，您确实需要在每个框架中清洁它。但是，正如 TJHeuvel 所指出的，每帧清除画布的简单行为不应该影响性能。问题可能出在您更新内容变量的逻辑中，可能会循环遍历在您更新画布绘图时不执行任何操作的对象。

【讨论】：

【解决方案4】：

我以前也遇到过这个问题，因为我有一个 1920x1200 的屏幕，因此画布需要清除的像素数量很大。只有当您的浏览器使用软件渲染作为 GPU 时，这才是真正的问题。

您可以做的一件事（正如我之前的其他人所提到的）就是只清除画布的一部分。

您可以做的另一件事是确保用户已为其浏览器打开硬件加速。在 Windows 上，您可以告诉用户在 Chrome 的 about:flags 中启用硬件加速。 IE9 默认开启它，并且做得非常好。我认为 Firefox 也默认开启了 Direct2D 加速。

对于 Chrome 等用户必须手动设置的情况，您可以做的是在应用运行时测量帧速率，如果速度真的很慢，请向他们显示一些文本，告诉他们确保为他们的应用启用了硬件加速浏览器。

【讨论】：