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

mac52ipod·

2011-02-11

阅读数 7793

随着 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 左右。

转自 http://fins.javaeye.com/blog/903268