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

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

来源

2012-08-11 nuway

我从来没有真正看过多个画布，这可能意味着最好的方法是一个画布。 – Blender 2012-08-11 05:20:48

你想达到什么目的？一个游戏？ – 2012-08-11 05:34:33

@Blender：想一想点击冒险。如果背景没有任何活动对象，并且活动的前景对象不与背景交互，则使用多个图层几乎总是一个更好的主意，以避免重新呈现未更改的部分。相反，您可以简单地清除最上面的图层并添加小闪烁，而无需重新绘制角色，背景，广告资源...... – Zeta 2012-08-11 10:52:36

从理论上讲，一个帆布实际上是更快的，假设你是一个算法，仅重划什么需要重绘程序和拉法发生的一切在一次*。重绘方法可能是浏览器可以完成的最苛刻的操作之一;越少越好。

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

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

清除整个画布似乎没有采取任何的时间比清除特定的区域，实际上可以快于通过所有的对象循环并单独清除它们。
setTimeout最适合看到每一帧很重要的动画。可以在性能较差的机器上跳过帧。
在尝试绘制元素之前检查元素是否在范围内可以节省CPU周期，即使画布API无论如何都会这样做。

*要调用一个重绘，您可以在上下文已经改变之后，一个帆布display设置为none，然后回到block。

来源

2012-08-11 13:42:25

多画布带来更好的性能，因为其只是一个画布，这将是不景气浏览器上相同的画布上反复绘制比有许多油画和做画同步的工作。假设你必须在同一个画布上重绘，每次绘制新东西时都必须更新曲面。很明显，如果你有多个画布，情况就不会如此，因为无论其他画布如何，都可以随时绘制。

CANVAS PERFORMANCE

来源

2012-08-11 10:46:36 defau1t

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

回答

相关问题