在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幀左右。