注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

百鬼夜行

身是菩提树,心如明镜台,时时勤拂拭,勿使惹尘埃。

 
 
 

日志

 
 

HTML5 canvas 在 iPhone 4 retina 屏幕上的优化(转)  

2016-01-14 11:55:07|  分类: HTML5CSS3WEBAPP |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

  随着 iPhone4 的推出, retina 屏在移动设备中被越来越广泛的应用。虽然 retina 屏给画面的展现带来了前所未有的清晰平滑的效果,却给开发人员带来了一些小小的麻烦。网上针对如何在 retina 屏下设计软件 UI 的文章有很多,在这里我不想重复这些内容, 而是想针对 HTML5 canvas 在 retina 屏上的应用说一说我的一点心得。

    最近业余时间一直在利用HTML5技术开发游戏引擎,一切进行的还算顺利,但是当我在 iPhone4 上测试该引擎时,发现其性能比在 iPod touch 3 上还要低得多。造成这一现象的主要原因就是 retina 屏。

    下面先简单说说 retina 屏设备如何处理 canvas 的

    iPhone 4 的 Safari 浏览器在展现 canvas 上的图像时,为了得到和传统屏幕一样的视觉大小,会将原始像素放大 1 倍。(retina 屏幕的像素更小,可以理解为 4 个 retina 像素表示 1 个传统像素)。在进行这种放大时,并不是简单的将 1*1 像素变成 2*2 像素,而是会进行"复杂的放大算法",目的是得到更加平滑自然(类似抗锯齿)的图像。虽然这种放大操作是 native 的,但还是会导致渲染 canvas 时性能变得极其低下(可能还有其他原因)。

    我们无法人为的控制这种放大操作(禁止放大,或者简化放大算法)。不过我们还是有一些技巧来对 canvas 进行一些优化,从而提高它在 retina 屏幕上的性能。假设我们要在 iPhone 3GS 上做如下操作:

  1. 加载一个 50*50 的图片

  2. 创建一个 300*300 的 canvas

  3. 将这个图片绘制在 canvas 的 (100 , 100)坐标处

  4. (以上单位均为:像素) 

下面看一看在 iPhone 4 下如何优化这一个操作:

  1. 加载一个 50*50 的图片

  2. 将此图片放大1倍,变为 100*100 , 放大操作通过代码来实现,可采用"简单的1变4算法"

  3. 创建一个 600*600 的 canvas ( 即,原始的宽高都乘以 2 ) 

  4. 设置该 canvas 的 style.width=300  和 style.height=300  (也就是说 style 的大小仍为原始大小) 

  5. 将放大的图片 绘制在 canvas的 ( 200 , 200 )坐标处.(即,原始的横纵坐标都乘以 2 ) 

         通过这个方案实现的效果和优化之前以及在 iPhone 3GS 上的效果几乎完全一样(肉眼难以察觉),但是性能却比优化前提高近50% !优化方案中的第 4 步最为关键,其它几步的核心就是"在 2 倍大的 canvas 上绘制 2 倍大的图片"。按理说应该性能更低才对,但是由于 canvas 的 style 大小只是 canvas 的实际大小的一半,一切就变得不同了。

    当执行以下代码:

canvas.width=600;
canvas.height=600;
canvas.style.width="300px";
canvas.style.height="300px";

    canvas 的实际大小变为了 300*300, 同时 canvas 的坐标系发生了缩放,缩放比为 300/600。也就是说 canvas 上所有的点的大小和坐标都缩小了一半,所以之前 "在 2 倍大的 canvas 上绘制 2 倍大的图片",缩小一半后(这个缩小的算法也是一个复杂的缩小算法)先放大再缩小,于是最后相当于什么都没有变。

    到这里也许有人会迷糊:先放大再缩小,然后绘制在 iPhone 4 的 retina 屏上,为什么比直接绘制性能高?按道理多了一步操作应该更慢才对。当我们了解了以上每一步的操作后,不妨可以这样理解:

  • 优化前:50*50 像素 通过"复杂的放大算法"转变为 100*100 像素

  • 优化后:50*50 像素通过"简单的放大算法"变为 100*100 像素……100*100 像素通过 "复杂的缩小算法"变为 50*50 像素……50*50 像素通过"复杂的放大算法"转变为 100*100 像素

    "复杂的缩小算法" 和 "复杂的放大算法" 两者在 iPhone 4 内部很可能是互为逆操作,于是相互抵消了。所以优化后就是:50*50 像素通过"简单的放大算法"转变为 100*100 像素。姑且这么理解吧。

    下面是一个更复杂的示例 http://data.wiyun.com/finscn/retina/test-retina.html,有 iPhone4 或 iPod touch 4 的朋友可以访问一下试试,看看选择优化前和优化后的 FPS 变化。目前根据网友的反馈,优化前为 32 FPS 左右,优化后为 45 FPS 左右。

  评论这张
 
阅读(46)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017