• Canvas的渲染效率对比与优化
  • 发布于 2个月前
  • 408 热度
    0 评论
  • Rock
  • 2 粉丝 31 篇博客
  •   
 在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)
1001417910
15018241112
20024301314
40044552322
60064783334
10001041294855

iPhone测试环境

iPhone6,QQ自带浏览器和Safari
源图片大小:143*143,目标大小:143*143
画布:400 *800
结论:

  • 源图片为纯色与复杂图片时,无差别
  • 目标图片绘制大小放大5倍时,无差别
  • 图片缩放,无差别
  • 图片旋转时,渲染时长变化几乎可忽略
  • Safari浏览器的渲染效率,是qq内置浏览器的1.5倍左右

下表中,右侧数值为渲染的耗时(单位:毫秒)

图片数量不旋转(qq)旋转(qq)不旋转(Safari)旋转(Safari)
1005533
1506644
2007744
4008866
600101088
100018171313

总结

  • iOS下,Canvas渲染表现非常棒,重度游戏我觉得都可以轻易胜任
  • android下,国产的主流浏览器表现比较糟糕,在稳定性、渲染效率方面与Chrome相距甚远。但理论上,中轻度游戏应该问题不大,理论上能够在30帧左右。
用户评论