使用javascript和canvas制作动画

Question

我可以用画布制作简单的动画。但是我我在绘画之前必须清理每一帧，这会使绘画速度变慢(fps ~ 15)我试着用了2个画布，但没有成功。你知道怎样才能提高fps吗？我可以使用缓冲吗？又是如何做到的？

Answer 1

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

Answer 2

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

Answer 3

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