Javascript 最好是一个大画布还是最多100个动态生成的小画布？

我正在做一个移动网络骰子模拟器。初始原型如下所示：

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

---

我的问题是，让浏览器创建许多小画布与创建一个大画布相比，是否会对性能造成不良影响。本地测试很难，我希望这里的人可能知道最佳实践是什么

多个画布通常可以获得更好的性能，因为您可以有选择地重新渲染

如果您只有一个画布，并且希望更新一个模具，则通常必须重新绘制整个画布。另一方面，多个画布允许您仅更新需要重新绘制的骰子。这是效率的提高

---

此外，在加载1个画布和加载100个画布时，您不应该看到任何明显的差异。

在性能方面，如前所述，如果您不定期更新图形，1-100个画布元素之间应该没有什么差异。（即：静态图形/无动画）

网络上关于多张画布的大多数参考资料都倾向于处理这样的情况，即您有多个图层，并且需要以透明的方式处理在其他事物之上的绘图

也就是说，你对dicewalla所做的看起来并不会从多张画布中获得任何好处

---

此外，如果更新整个画布是一个瓶颈，您还可以有选择地重新绘制单个画布的区域，以获得更好的性能。这为您提供了多个画布的性能优势，而无需管理和创建这些元素。

您是否使用setInterval控制新构建的动画？我有同样的问题。尽管在我的例子中，我有一个由setInterval控制的恒定动画。在一个页面上有几个设置间隔远不如在一个画布上有所有动画，因此单画布方法似乎更有效。我想说，使用6个画布对象绘制边，然后将它们用作滚动骰子的背景图像。有大量的画布使用，因为你没有修改后的grafics。见鬼，即使完全没有画布，你也可以做到这一点，只需选择径向渐变和样式div。虽然我没有精确的测量，但使用多张画布制作的效果明显更好。我没有使用动画，只是在点击按钮时重新绘制画布。谢谢。只有当用户采取行动（例如，选择部分骰子重新掷骰，而不接触其他骰子）时，才会进行更新。根据你的回答和@depot的，我用哪种方式做似乎没什么大不了的。对我来说，在单个画布上添加触摸事件比用大画布上的x和y坐标计算出哪个骰子被点击更容易编码，所以我倾向于多个画布。这是一个很大的帮助，谢谢。我会不时更新刚刚选择的骰子。