2011-11-01 30 views
3

我正在用javascript编写HTML5画布应用程序。我使用多个canvas元素作为图层来支持动画,而不必在每一帧都重新绘制整个图像。画布的最大数量(用作图层)?

是否有一个最大数目画布元素,我可以以这种方式在彼此的顶部层的 - (并看到所有的HTML5平台的适当结果,当然)。

谢谢。

+1

它很容易测试。只需制作一个循环,并查看浏览器何时会抛出异常。 – c69

+0

有一篇关于[canvas layers]的漂亮文章(http://www.ibm.com/developerworks/library/wa-canvashtml5layering/index.html#N1011D) – orustammanapov

回答

4

我想你可能会达到实际的性能上限很久之前,你打到几千和2,147,483,647之间的硬指定限制......取决于浏览器和你正在测量什么(允许的物理元素的数量DOM或最大允许的z-索引)。

这是相关的另一个我最喜欢的答案,以几乎涉及短语“最大数量”任何问题 - 如果你要问,你可能做错了™。采取与预期设计一致的方法几乎总是尽可能避免这些令人不快的阴暗问题,例如“如果我尝试渲染堆叠在另一个顶部的32,768个画布元素,我的用户的iPhone会融化吗?”

+0

谢谢...良好的信息。 –

3

这是一个DOM的限制问题,它很大。我预计你会在之前遇到性能瓶颈你遇到硬性限制。

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

也有很多来自Facebook HTML5游戏计划的资源https://developers.facebook.com/html5/build/games/。其中有指向文章和开源基准测试工具的链接,可以解决和测试与您的策略类似的不同策略。

+0

谢谢...出色的建议。 –