3 使你的 Canvas 更加優雅

繪製圖形時，長度與座標應選取整數而不是浮點數，原因在於 canvas 支援半個畫素繪製。

會根據小數字實現插值演算法實現繪製影象的反鋸齒效果，如果沒有必要請不要選擇浮點數值。

一般在遊戲中這個優化方式會經常使用，但是在我們的背景特效中不經常使用，這個優化方式是將經常移動的元素和不經常移動的元素分層，避免不必要的重繪。

比如在遊戲中，背景不經常變換和人物這些經常變換的元素分成不同的層，這樣需要重繪的資源就會少很多。

如果你使用left、top這些 css 屬性來寫動畫的話，那麼會觸發整個畫素渲染流程 ——paint、layout和composition。

但是使用transform中的translatex/y來切換動畫，你將會發現，這並不會觸發paint和layout，僅僅會觸發composition的階段。

這是因為transform呼叫的是 gpu 而不是 cpu。

名字聽起來很複雜，什麼離屏渲染，其實就是設定快取，繪製影象的時候在螢幕之外的地方繪製好，然後再直接拿過來用，這不就是快取的概念嗎?!︿(￣︶￣)︿.

建立兩個 canvas 標籤，大小一致，乙個正常顯示，乙個隱藏（快取用的，不插入 dom 中）。先將結果 draw 到快取用的 canvas 上下文中，因為游離 canvas 不會造成 ui 的渲染，所以它不會展現出來；再把快取的內容整個裁剪再 draw 到正常顯示用的 canvas 上，這樣能優化不少。

我們主要來介紹一下 canvas 的離屏渲染優化，就拿第 5 節和第 6 節的那個示例來繼續。

忘記的童鞋再去重溫下第 5 節和第 6 節的內容。

離屏渲染的主要過程就是將乙個乙個的粒子先在螢幕之外建立出來，然後再使用drawimage()方法將其「放入」到我們的主螢幕中。

在了解了思想之後，我們就來實現一下吧！ｂ（￣▽￣）ｄ

我們首先要在全域性設定乙個變數usecache來存放我們是否使用離屏渲染這種優化方式。

var usecache = true;

然後我們在round_item原型的draw()方法中建立每乙個離屏的小的canvas。

function round_item(index, x, y) 
}

有人會產生疑問，為什麼這裡的cachecanvas畫布的寬度要設定為 6 倍的半徑？那是因為，我們建立的cachecanvas不僅僅是有圓，還包括圓的陰影，所以我們要將cachecanvas的面積設定得稍微大一些，這樣才能將圓帶陰影一起剪下到我們的主 canvas 中。

在draw()方法中，我們新建立了cachecanvas，並獲取到了cachecanvas的上下文環境，然後設定其寬高。

然後我們判斷了usechache變數的值，也就是說，如果我們將usechache設定為true，也就是使用快取，我們就呼叫this.cache()方法。接下來，我們來看一下this.cache()方法。

同樣的，我們也是在round_item的原型中設定this.cache()方法。

在this.cache()方法中，我們的主要任務是在每乙個cachecanvas中都繪製乙個圓。

round_item.prototype.cache = function () ;

這裡需要注意的是，和在draw()方法中畫的圓不同之處是，要注意這裡設定的圓心座標，是this.r * 3，因為我們建立的cachecanvas的寬度和高度都是6 * this.r，我們的圓是要顯示在cachecanvas的正中心，所以設定圓心的座標應該是this.r * 3,this.r * 3。

既然設定了cachecanvas，那麼我們在draw()中，就需要使用 canvas 的drawimage方法將cachecanvas中的內容顯示在螢幕上。

round_item.prototype.draw = function () else
};

這裡也是要判斷下，如果沒有使用快取的話，還是使用最原始的建立圓的方式。

這樣，我們就完成了離屏渲染的優化，我們來一起看一下完整的**：

3 使你的 Canvas 更加優雅

讓 Canvas 更加優雅

如何更加優雅的使用word

3 如何使人喜歡你

3 使你的 Canvas 更加優雅

讓 Canvas 更加優雅

如何更加優雅的使用word

3 如何使人喜歡你

相關推薦