6

如果我要使用 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>
4

2 回答 2

3

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

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

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

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

  • setTimeout最适合看到每一帧都很重要的动画。requestAnimationFrame可以在功能较弱的机器上跳过帧。

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

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

于 2012-08-11T13:42:25.313 回答
0

多个画布会带来更好的性能，因为只有一个画布，浏览器在同一个画布上重复绘制比拥有多个画布并同时完成绘制工作慢。假设您必须在同一画布上重绘，每次绘制新内容时都必须更新表面。显然，如果您有多个画布，则情况并非如此，因为无论其他画布在做什么，您都可以随时绘制。

帆布性能

于 2012-08-11T10:46:36.167 回答