html5 canvas一般性能提示

Question

我正在为html5画布开发游戏,主要针对移动设备.画布调整到最大可用分辨率,因此几乎可以制作全屏游戏.

在一个1024x786画布的ipad上; 在这样的分辨率下,我注意到帧速率显着下降.在iPhone上480x320这样的小分辨率游戏运行顺畅!我想这是因为该设备的填充率有限.

无论如何,我想尽可能地优化.如果您能发布有关html5 canvas开发的任何一般性能提示,我将非常感激.

Answer 1

另请参阅html5rocks上的这篇画布性能优化文章,其中包含jsperf数据,其中包括移动浏览器.

Answer 2

你可以阅读制作一个iPad HTML5应用程序并让 Thomas Fuchs 快速制作它

他提出的要点:

1. 图像极其缓慢 - 摆脱它们
2. 避免text-shadow&box-shadow
3. 硬件加速是相当新的...和bug(并发动画是有限的)
4. opacity尽可能避免(有时会干扰硬件加速渲染)
5. 使用translate3d,而不是translate(后者不是硬加速)

其他一些可以显着提高性能的要点:

• 使用getImageData尽可能少地(主要减速)[2]
• 组合多个画布以重新绘制更频繁变化的较小部分

您还可以 使用Chrome/Firebug Profile 对您的应用进行基准测试,以显示哪些功能很慢.

[2] http://ajaxian.com/archives/canvas-image-data-optimization-tip

Answer 3

还有几个链接:

• HTML5游戏0.2:整数是你的朋友
• deviantART muro中的HTML5 Canvas性能
• 游戏引擎列表.尤其是 额外链接的"其他".

因为我对你的游戏不够熟悉,所以很难给出任何具体的提示.但是,您可能希望将渲染拆分为多个图层.这有意义,特别是如果你有一些静态元素.通过这种方式,您可以避免一些清除,并最终获得更好的代码.