用javascript和画布动画

Question

我可以用画布制作简单的动画。但我必须在绘画之前清理每一帧，这会使绘画变慢（fps~15） 我曾尝试使用2幅画布，但没有成功。 你知道我怎么能增加fps吗？我可以使用缓冲吗？怎么样？

Answer 1

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

Answer 2

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

Answer 3

不，你真的需要清理它的evey框架。但是，正如TJHeuvel所指出的那样，每帧清除画布的简单行为不应影响性能。问题可能在于您更新内容变量的逻辑，可能是在更新画布绘图时循环通过不执行任何操作的对象。

Answer 4

我之前也经历过这个问题，因为我有一个1920x1200的屏幕，因此画布需要清除的像素数量很大。如果您的浏览器使用软件渲染，那么这只是一个问题，因为GPU没有问题。

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

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

对于像Chrome这样的情况，用户必须手动设置它，你可以做的是在应用程序运行时测量帧速率，如果它真的很慢，请向他们展示一些文字，告诉他们确保他们的硬件加速已启用浏览器。