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

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

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

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

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

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

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

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

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