javascript - 拥有一个大 Canvas 还是最多 100 个动态生成的小 Canvas 更好？

Question

我正在开发移动网络骰子模拟器。初始原型(prototype)在这里:http://dicewalla.com

我目前有一个大 Canvas ，我可以在其中绘制所有骰子。我计划以更 MVC 且更易于更新的方式重新编写代码。我认为为每个骰子对象生成一个小 Canvas 比在大 Canvas 上绘制所有骰子并不断更新大 Canvas 更容易。

我的问题是，让浏览器创建大量小 Canvas 与一个大 Canvas 相比，是否会对性能造成不良影响。很难在本地进行测试，我希望这里有人知道最佳做法是什么。

Answer 1

多个 Canvas 通常可以实现更好的性能，因为您可以有选择地重新渲染。

如果您只有一个 Canvas 并且想要更新一个骰子，您通常必须重新绘制整个 Canvas 。另一方面，多个 Canvas 允许您只更新需要重新绘制的骰子。这是效率的提高。

此外，您应该看不到加载 1 个 Canvas 与加载 100 个 Canvas 有任何明显差异。