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

Is it better to have one big canvas or up to 100 small dynamically generated canvases?

本文关键字：动态有一个更新时间：2023-09-26

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

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

我的问题是，让浏览器创建大量小画布而不是一个大画布是否会降低性能。在本地测试很难，我希望这里有人可能知道最佳实践是什么。

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

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

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

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

网络上关于多个画布的大多数参考资料都倾向于处理您有多个图层并且需要处理在其他具有透明度的事物之上绘图的情况。

话虽如此，你用 dicewalla 做的事情看起来不会从拥有多个画布中获得任何东西。

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