HTML5画布的常规性能技巧

Question

我正在开发一款HTML5 Canvas游戏，主要针对移动设备进行设计。Canvas被调整为可用分辨率的最大值，以实现屏幕全屏游戏效果。

在iPad上，Canvas的分辨率是1024x786，此时帧率明显下降。而在像iPhone上480x320这样较小的分辨率下，游戏运行很流畅！我猜想这是因为设备填充速度有限所致。

无论如何，我希望尽可能地优化游戏性能。如果您有任何HTML5 Canvas开发的通用性能技巧，请告诉我，我将不胜感激。

- clamp

---

两篇关于像素操作性能优化的文章：- http://www.elekslabs.com/2012/11/html5-canvas-performance-and.html - http://www.elekslabs.com/2012/11/html5-canvas-performance-and_9.html - Victor Haydin

Answer 1

同时请查看html5rocks上的画布性能优化文章，其中包含了移动浏览器的jsperf数据。

- Boris Smus

---

这基本上是关于该主题最好的文章，没有比它更好的了。 - M. Ryan

Answer 2

您可以阅读 Thomas Fuchs 的文章 制作iPad HTML5应用并使其运行得非常快。

他提出的关键点如下：

1. 图像会极大地减慢加载速度 - 去掉它们
2. 避免使用text-shadow&box-shadow
3. 硬件加速是相当新的...而且充满缺陷(并发动画有限)
4. 如果可能，避免使用opacity(有时会影响硬件加速渲染)
5. 使用translate3d而不是translate(后者没有进行硬件加速)

其他可以显著提高性能的一些要点：

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

您还可以使用 Chrome/Firebug Profile 进行基准测试，它可以显示哪些功能速度较慢。

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

- gblazex

---

谢谢提供链接。事实上，我已经阅读过这篇文章了。不幸的是，我的游戏非常依赖于图像，所以我无法真正摆脱它们。但我会尽量遵守其他规则！ - clamp

这篇文章作为这个问题的答案是误导性的：它的主题不是画布，而是通常的HTML5编码。这里提供的大多数观点都适用于与画布完全无关的问题，比如HTML元素的CSS属性。当绘制复杂形状到画布时，使用和缓存图像（作为离屏画布）实际上是一个好的做法。 - MONK

Answer 3

以下是更多链接:

• HTML5 游戏 0.2：整数是你的朋友
• deviantART muro 中的 HTML5 Canvas 性能
• 游戏引擎列表。特别查看“其他”获取额外的链接。

由于我对你的游戏不太熟悉，很难给出具体的建议。但你可能希望将渲染分成多个层。如果有一些静态元素，这样做很有意义。这样可以避免一些清除操作，并最终得到更好的代码。

- Juho Vepsäläinen