如果我要使用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>
答案 0 :(得分：3)
理论上，一个画布实际上会更快，假设您要编写一个只重新绘制需要重绘的算法，并且重绘方法一次发生*。重绘方法可以是浏览器可以完成的最苛刻的操作之一;越少越好。
但是，完成这样一个系统所需的代码量最终可能不值得付出努力。我会坚持使用多个画布来实现可维护性和可扩展性。
以下是我学到的其他一些优化技巧：
清除整个画布似乎不会比清除特定区域花费更多时间，并且实际上可以比循环遍历所有对象并单独清除它们更快。
setTimeout最适合于看到每个帧都很重要的动画。 requestAnimationFrame可以在功能较弱的计算机上跳过帧。
在尝试绘制元素之前检查元素是否在范围内可以节省CPU周期，即使画布API仍然执行此操作。
*要调用单个重绘，您可以将画布display设置为none，然后在更改上下文后返回block。
答案 1 :(得分：0)
多个画布产生更好的性能，因为只有一个画布，浏览器在相同的画布上重复绘制比使用多个画布并同时完成绘图工作一样缓慢。假设您必须在同一个画布上重绘，每次绘制新内容时都必须更新曲面。很明显，如果你有多幅画布就不会出现这种情况，因为无论其他画布是什么，都可以随时画出。