Canvas的渲染效率对比与优化

在HTML5的Canvas渲染中,主要就用到2个函数:setTransformdrawImage,可以优化的空间几乎为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帧左右。
posted @ 2015-12-29 11:51  葫芦⑦娃  阅读(2615)  评论(1编辑  收藏