javascript - 使用多个 Canvas 比使用一个 Canvas 慢吗？

Question

如果我想要 fps，是使用一个更大的 Canvas 并不断重绘更快还是使用一堆小 Canvas 并且不那么频繁地重绘但使用 css3 来制作这样的动画更快？

<canvas id="1" width="60px" height="60px"></canvas>
<canvas id="2" width="60px" height="60px"></canvas>
<canvas id="3" width="60px" height="60px"></canvas>
<canvas id="4" width="60px" height="60px"></canvas>

Answer 1

理论上，一个 Canvas 实际上会更快，假设您要编写一个算法，只重绘需要重绘的内容，并且重绘方法一次发生*。重绘方法可能是浏览器可以完成的最苛刻的操作之一；越少越好。

但是，完成这样一个系统所需的代码量最终可能不值得付出努力。为了可维护性和可扩展性，我会坚持使用多个 Canvas 。

这是我学到的其他一些优化技巧:

• 清除整个 Canvas 似乎并不比清除特定区域花费更多时间，而且实际上比循环遍历所有对象并单独清除它们更快。

• setTimeout 最适合查看每一帧很重要的动画。 requestAnimationFrame 可以在性能较差的机器上跳过帧。

• 在尝试绘制元素之前检查元素是否在范围内可以节省 CPU 周期，即使 canvas API 无论如何都会这样做。

*要调用单个重绘，您可以将 Canvas display设置为none，然后在上下文被调用后返回block改变了。