iPhone 4中HTML5 Canvas優(yōu)化retina屏幕是本文要介紹的內(nèi)容，隨著 iPhone 4 的推出, retina 屏在移動(dòng)設(shè)備中被越來越廣泛的應(yīng)用。雖然 retina 屏給畫面的展現(xiàn)帶來了***的清晰平滑的效果，卻給開發(fā)人員帶來了一些小小的麻煩。網(wǎng)上針對如何在 retina 屏下設(shè)計(jì)軟件 UI 的文章有很多，在這里我不想重復(fù)這些內(nèi)容, 而是想針對 HTML5 canvas 在 retina 屏上的應(yīng)用說一說我的一點(diǎn)心得。

最近業(yè)余時(shí)間一直在利用HTML5技術(shù)開發(fā)游戲引擎，一切進(jìn)行的還算順利，但是當(dāng)我在 iPhone4 上測試該引擎時(shí)，發(fā)現(xiàn)其性能比在 iPod touch 3 上還要低得多。造成這一現(xiàn)象的主要原因就是 retina 屏。

下面先簡單說說 retina 屏設(shè)備如何處理 canvas 的

iPhone 4 的 Safari 瀏覽器在展現(xiàn) canvas 上的圖像時(shí)，為了得到和傳統(tǒng)屏幕一樣的視覺大小，會(huì)將原始像素放大 1 倍。(retina 屏幕的像素更小，可以理解為 4 個(gè) retina 像素表示 1 個(gè)傳統(tǒng)像素)。在進(jìn)行這種放大時(shí)，并不是簡單的將 1*1 像素變成 2*2 像素，而是會(huì)進(jìn)行"復(fù)雜的放大算法"，目的是得到更加平滑自然(類似抗鋸齒)的圖像。雖然這種放大操作是 native 的,但還是會(huì)導(dǎo)致渲染 canvas 時(shí)性能變得極其低下(可能還有其他原因)。

我們無法人為的控制這種放大操作(禁止放大，或者簡化放大算法)。不過我們還是有一些技巧來對 canvas 進(jìn)行一些優(yōu)化，從而提高它在 retina 屏幕上的性能。假設(shè)我們要在 iPhone 3GS 上做如下操作:

加載一個(gè) 50*50 的圖片

創(chuàng)建一個(gè) 300*300 的 canvas

將這個(gè)圖片繪制在 canvas 的 (100 , 100)坐標(biāo)處

(以上單位均為：像素) 

下面看一看在 iPhone 4 下如何優(yōu)化這一個(gè)操作:

加載一個(gè) 50*50 的圖片

將此圖片放大1倍,變?yōu)?100*100 , 放大操作通過代碼來實(shí)現(xiàn),可采用"簡單的1變4算法"

創(chuàng)建一個(gè) 600*600 的 canvas ( 即,原始的寬高都乘以 2 ) 

設(shè)置該 canvas 的 style.width=300  和 style.height=300  (也就是說 style 的大小仍為原始大小) 

將放大的圖片 繪制在 canvas的 ( 200 , 200 )坐標(biāo)處.(即,原始的橫縱坐標(biāo)都乘以 2 ) 

通過這個(gè)方案實(shí)現(xiàn)的效果和優(yōu)化之前以及在 iPhone 3GS 上的效果幾乎完全一樣(肉眼難以察覺)，但是性能卻比優(yōu)化前提高近50% ！優(yōu)化方案中的第 4 步最為關(guān)鍵，其它幾步的核心就是"在 2 倍大的 canvas 上繪制 2 倍大的圖片"。按理說應(yīng)該性能更低才對，但是由于 canvas 的 style 大小只是 canvas 的實(shí)際大小的一半，一切就變得不同了。

當(dāng)執(zhí)行以下代碼:

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

canvas 的實(shí)際大小變?yōu)榱?300*300, 同時(shí) canvas 的坐標(biāo)系發(fā)生了縮放，縮放比為 300/600。也就是說 canvas 上所有的點(diǎn)的大小和坐標(biāo)都縮小了一半，所以之前 "在 2 倍大的 canvas 上繪制 2 倍大的圖片"，縮小一半后(這個(gè)縮小的算法也是一個(gè)復(fù)雜的縮小算法)先放大再縮小，于是***相當(dāng)于什么都沒有變。

到這里也許有人會(huì)迷糊：先放大再縮小，然后繪制在 iPhone 4 的 retina 屏上，為什么比直接繪制性能高？按道理多了一步操作應(yīng)該更慢才對。當(dāng)我們了解了以上每一步的操作后，不妨可以這樣理解：

優(yōu)化前：50*50 像素 通過"復(fù)雜的放大算法"轉(zhuǎn)變?yōu)?100*100 像素

優(yōu)化后：50*50 像素通過"簡單的放大算法"變?yōu)?100*100 像素……100*100 像素通過 "復(fù)雜的縮小算法"變?yōu)?50*50 像素……50*50 像素通過"復(fù)雜的放大算法"轉(zhuǎn)變?yōu)?100*100 像素

"復(fù)雜的縮小算法" 和 "復(fù)雜的放大算法" 兩者在 iPhone 4 內(nèi)部很可能是互為逆操作，于是相互抵消了。所以優(yōu)化后就是：50*50 像素通過"簡單的放大算法"轉(zhuǎn)變?yōu)?100*100 像素。姑且這么理解吧。

下面是一個(gè)更復(fù)雜的示例 http://data.wiyun.com/finscn/retina/test-retina.html，有 iPhone 4 或 iPod touch 4 的朋友可以訪問一下試試，看看選擇優(yōu)化前和優(yōu)化后的 FPS 變化。目前根據(jù)網(wǎng)友的反饋，優(yōu)化前為 32 FPS 左右，優(yōu)化后為 45 FPS 左右。

小結(jié)：iPhone 4中HTML5 Canvas優(yōu)化Retina屏幕的內(nèi)容介紹完了，希望本文對你有所幫助。

轉(zhuǎn)自 http://fins.javaeye.com/blog/903268