画布的最大数量（用作图层）？

Question

我正在用JavaScript编写HTML5画布应用程序。我使用多个canvas元素作为图层来支持动画，而不必每帧都重新绘制整个图像。

是否有一个最大数量的画布元素，我可以用这种方式叠加在一起 ​​- （当然，在所有HTML5平台上看到一个合适的结果）。 / p>

谢谢。

Answer 1

我想你很可能会在达到数千到2,147,483,647之间某个硬指定限制之前达到一个实际的性能上限...取决于浏览器和你测量的内容（DOM上允许的物理元素数量）或最大允许z-index）。

这与我最喜欢的另一个问题相关，几乎任何涉及短语“最大数量”的问题 - 如果你不得不问，你可能正在做错了。采用与预期设计一致的方法几乎总是尽可能的，并且避免这些令人不快的模糊问题，例如“如果我尝试将32,768个画布元素堆叠在一起，我的用户的iPhone会融化吗？”

Answer 2

这是一个很大的DOM限制问题。我希望你在达到硬限制之前会遇到性能瓶颈。

我想说，在你的情况下，关键是要准备一些简单的基准测试/测试，动态生成Canvases（任意数量），用内容填充它们，然后将它们添加到DOM中。您应该能够以这样的方式构建测试：A）如果存在硬限制，您将发现它（使用可识别的画布内容或异常处理），或者B）如果存在性能限制，您将发现它（使用剖析或计时器）。然后在各种浏览器上执行这些测试以确定您的实际“限制”。

Facebook HTML5游戏计划中https://developers.facebook.com/html5/build/games/还提供了很多资源。其中包含文章和开源基准测试工具的链接，这些工具可以解决和测试与您类似的不同策略。