Canvas的渲染效率對比與優化

在HTML5的Canvas渲染中，主要就用到2個函數：setTransform、drawImage，能夠優化的空間幾乎爲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)
100	14	17	9	10
150	18	24	11	12
200	24	30	13	14
400	44	55	23	22
600	64	78	33	34
1000	104	129	48	55

iPhone測試環境

iPhone6，QQ自帶瀏覽器和Safari
源圖片大小：143*143，目標大小：143*143
畫布：400 *800
結論：

• 源圖片爲純色與複雜圖片時，無差異
• 目標圖片繪製大小放大5倍時，無差異
• 圖片縮放，無差異
• 圖片旋轉時，渲染時長變化幾乎可忽略
• Safari瀏覽器的渲染效率，是qq內置瀏覽器的1.5倍左右

下表中，右側數值爲渲染的耗時（單位：毫秒）

圖片數量	不旋轉(qq)	旋轉(qq)	不旋轉(Safari)	旋轉(Safari)
100	5	5	3	3
150	6	6	4	4
200	7	7	4	4
400	8	8	6	6
600	10	10	8	8
1000	18	17	13	13

總結

• iOS下，Canvas渲染表現很是棒，重度遊戲我以爲均可以輕易勝任
• android下，國產的主流瀏覽器表現比較糟糕，在穩定性、渲染效率方面與Chrome相距甚遠。但理論上，中輕度遊戲應該問題不大，理論上可以在30幀左右。