在HTML5的Canvas渲染中，主要就用到2个函数：setTransform、drawImage，可以优化的空间几乎为0。在本文中，我们主要考量下在android和ios下，如果单纯的使用Canvas渲染可以制作什么量级的游戏。
原来我想拿微信自带浏览器，而非QQ自带浏览器，但由于在android下微信浏览器波动非常的大（甚至超过一个数量级），因此就放弃了。
android测试环境
华为Mate7，QQ自带浏览器和Chrome
源图片大小：143*143，目标大小：143*143
画布：400 *800
结论：
- 源图片为纯色与复杂图片时，无差别
- 目标图片绘制大小放大5倍时，无差别
- 图片缩放，无差别
- 图片旋转时，渲染时长大概增加了25%
- Chrome浏览器的渲染效率，是qq内置浏览器的2倍左右
下表中，右侧数值为渲染的耗时（单位：毫秒）
| 图片数量 | 不旋转(qq) | 旋转(qq) | 不旋转(Chrome) | 旋转(Chrome) |
|---|---|---|---|---|
| 100 | 14 | 17 | 9 | 10 |
| 150 | 18 | 24 | 11 | 12 |
| 200 | 24 | 30 | 13 | 14 |
| 400 | 44 | 55 | 23 | 22 |
| 600 | 64 | 78 | 33 | 34 |
| 1000 | 104 | 129 | 48 | 55 |
iPhone测试环境
iPhone6，QQ自带浏览器和Safari
源图片大小：143*143，目标大小：143*143
画布：400 *800
结论：
- 源图片为纯色与复杂图片时，无差别
- 目标图片绘制大小放大5倍时，无差别
- 图片缩放，无差别
- 图片旋转时，渲染时长变化几乎可忽略
- Safari浏览器的渲染效率，是qq内置浏览器的1.5倍左右
下表中，右侧数值为渲染的耗时（单位：毫秒）
| 图片数量 | 不旋转(qq) | 旋转(qq) | 不旋转(Safari) | 旋转(Safari) |
|---|---|---|---|---|
| 100 | 5 | 5 | 3 | 3 |
| 150 | 6 | 6 | 4 | 4 |
| 200 | 7 | 7 | 4 | 4 |
| 400 | 8 | 8 | 6 | 6 |
| 600 | 10 | 10 | 8 | 8 |
| 1000 | 18 | 17 | 13 | 13 |
总结
- iOS下，Canvas渲染表现非常棒，重度游戏我觉得都可以轻易胜任
- android下，国产的主流浏览器表现比较糟糕，在稳定性、渲染效率方面与Chrome相距甚远。但理论上，中轻度游戏应该问题不大，理论上能够在30帧左右。