拥有一个大画布或多达100个动态生成的小画布会更好吗？

Question

我正在使用移动网络骰子模拟器。最初的原型在这里：http://dicewalla.com

我目前有一个大画布，我画了所有的骰子。我打算以更多MVC的方式重新编写代码，让我更容易更新。我认为为每个骰子对象生成一个小画布比在大画布上绘制所有骰子并继续更新那个大画布更容易。

我的问题是，如果浏览器创建了大量的小画布而不是一个大画布，那么性能会受到很大影响。在本地测试很难，我希望这里有人知道最佳实践是什么。

Answer 1

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

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

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

Answer 2

就性能而言，如前所述，如果你没有定期更新图形，那么1-100个画布元素应该没什么区别。（即：静态图形/没有动画）

网上关于多幅画布的大多数参考资料都倾向于处理你有多层的情况，并且需要在透明度的基础上处理其他事物。

话虽这么说，你用dicewalla做的事情看起来并不会因为有多幅画布而获得任何收益。

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