• Canvas的渲染效率对比与优化
  • 海贼王 发表于 2015/12/29 13:44:00 | 分类标签: html5 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)
    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帧左右。
  • 请您注意

    ·自觉遵守:爱国、守法、自律、真实、文明的原则

    ·尊重网上道德,遵守《全国人大常委会关于维护互联网安全的决定》及中华人民共和国其他各项有关法律法规

    ·严禁发表危害国家安全,破坏民族团结、国家宗教政策和社会稳定,含侮辱、诽谤、教唆、淫秽等内容的作品

    ·承担一切因您的行为而直接或间接导致的民事或刑事法律责任

    ·您在编程中国社区新闻评论发表的作品,本网站有权在网站内保留、转载、引用或者删除

    ·参与本评论即表明您已经阅读并接受上述条款

  • 感谢本文作者
  • 作者头像
  • 昵称:海贼王
  • 加入时间:2013/6/13 0:00:00
  • TA的签名
  • 这家伙很懒,虾米都没写
  • +进入TA的空间
  • 以下内容也很赞哦
分享按钮