Canvas的渲染效率对比与优化

在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帧左右。