javascript - 使用 JavaScript 和画布制作动画

Question

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

score 2 · Accepted Answer

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

score 0 · Accepted Answer

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

score 0 · Accepted Answer

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

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

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

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

score 0 · Accepted Answer

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

4 回答 4