iPhone 4中HTML5 Canvas優化retina屏幕是本文要介紹的內容，隨著 iPhone 4 的推出, 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 上做如下操作:

加載一個 50*50 的圖片

創建一個 300*300 的 canvas

將這個圖片繪制在 canvas 的 (100 , 100)坐標處

(以上單位均為：像素) 

下面看一看在 iPhone 4 下如何優化這一個操作:

加載一個 50*50 的圖片

將此圖片放大1倍,變為 100*100 , 放大操作通過代碼來實現,可采用"簡單的1變4算法"

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

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

將放大的圖片 繪制在 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，有 iPhone 4 或 iPod touch 4 的朋友可以訪問一下試試，看看選擇優化前和優化后的 FPS 變化。目前根據網友的反饋，優化前為 32 FPS 左右，優化后為 45 FPS 左右。

小結：iPhone 4中HTML5 Canvas優化Retina屏幕的內容介紹完了，希望本文對你有所幫助。

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