淺談利用緩存來優化HTML5 Canvas程序的性能

2024-09-05 07:21:09

字體：大中小

來源：轉載

供稿：網友

canvas玩多了后，就會自動的要開始考慮性能問題了。怎么優化canvas的動畫呢？

　　【使用緩存】

　　使用緩存也就是用離屏canvas進行預渲染了，原理很簡單，就是先繪制到一個離屏canvas中，然后再通過drawImage把離屏canvas畫到主canvas中。可能看到這很多人就會誤解，這不是寫游戲里面用的很多的雙緩沖機制么？

　　其實不然，雙緩沖機制是游戲編程中為了防止畫面閃爍，因此會有一個顯示在用戶面前的畫布以及一個后臺畫布，進行繪制時會先將畫面內容繪制到后臺畫布中，再將后臺畫布里的數據繪制到前臺畫布中。這就是雙緩沖，但是canvas中是沒有雙緩沖的，因為現代瀏覽器基本上都是內置了雙緩沖機制。所以，使用離屏canvas并不是雙緩沖，而是把離屏canvas當成一個緩存區。把需要重復繪制的畫面數據進行緩存起來，減少調用canvas的API的消耗。

　　眾所周知，調用canvas的API很消耗性能，所以，當我們要繪制一些重復的畫面數據時，妥善利用離屏canvas對性能方面有很大的提升，可以看下下面的DEMO

　　1 、沒使用緩存

　　2、使用了緩存但是沒有設置離屏canvas的寬高

3 、使用了緩存但是沒有設置離屏canvas的寬高

　　4 、使用了緩存且設置了離屏canvas的寬高

　　可以看到上面的DEMO的性能不一樣，下面分析一下原因：為了實現每個圈的樣式，所以繪制圈圈時我用了循環繪制，如果沒用啟用緩存，當頁面的圈圈數量達到一定時，動畫每一幀就要大量調用canvas的API，要進行大量的計算，這樣再好的瀏覽器也會被拖垮啦。
XML/HTML Code復制內容到剪貼板

ctx.save();
var j=0;
ctx.lineWidth = borderWidth;
for(var i=1;i<this.r;i+=borderWidth){
ctx.beginPath();
ctx.strokeStyle = this.color[j];
ctx.arc(this.x , this.y , i , 0 , 2*Math.PI);
ctx.stroke();
j++;
}
ctx.restore();

　　所以，我的方法很簡單，每個圈圈對象里面給他一個離屏canvas作緩存區。

　　除了創建離屏canvas作為緩存之外，下面的代碼中有一點很關鍵，就是要設置離屏canvas的寬度和高度，canvas生成后的默認大小是300X150；對于我的代碼中每個緩存起來圈圈對象半徑最大也就不超過80，所以300X150的大小明顯會造成很多空白區域，會造成資源浪費，所以就要設置一下離屏canvas的寬度和高度，讓它跟緩存起來的元素大小一致，這樣也有利于提高動畫性能。上面的四個demo很明顯的顯示出了性能差距，如果沒有設置寬高，當頁面超過400個圈圈對象時就會卡的不行了，而設置了寬高1000個圈圈對象也不覺得卡。

XML/HTML Code復制內容到剪貼板

上一篇：利用HTML5 Canvas制作一個簡單的打飛機游戲

下一篇：用HTML5制作煙火效果的教程