使用多个画布比使用一个画布慢吗？

Question

如果我要使用fps，是使用一个较大的画布并不断重绘更快，还是使用一堆小画布并较少重绘但使用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

从理论上讲，一张画布实际上会更快，假设你要编写一个算法，只重绘需要重绘的内容，并且重绘方法同时发生*。重绘方法可能是浏览器可以完成的要求最高的操作之一；越少越好。

然而，实现这样一个系统所需的代码量最终可能不值得这么做。出于可维护性和可扩展性的目的，我只会坚持使用多个画布。

下面是我学到的其他一些优化技巧：

• 清除整个画布似乎不会比清除特定区域花费更多时间，而且实际上可能比循环遍历所有对象并清除它们更快。individually.
• setTimeout最适合于查看每个帧都很重要的动画。在尝试绘制元素之前，requestAnimationFrame可以在功能较差的machines.
• Checking上跳过帧，以查看元素是否在范围内，这可以节省requestAnimationFrame周期，即使canvas API无论如何都会这样做。

*要调用单次重绘，您可以将画布display设置为none，然后在上下文更改后返回到block。

Answer 2

多个画布会带来更好的性能，因为只有一个画布，与拥有多个画布并同时进行绘制工作相比，浏览器在同一画布上重复绘制会很慢。比方说，如果你必须在同一个画布上重新绘制，你就必须在每次绘制新的东西时更新曲面。显然，如果你有多个画布，情况就不是这样了，因为无论其他画布在做什么，你都可以画出来。

CANVAS PERFORMANCE