讓 Canvas 更加優雅

2021-10-09 14:22:23 字數 2545 閱讀 2625

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

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

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

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

如果你使用lefttop這些 css 屬性來寫動畫的話,那麼會觸發整個畫素渲染流程 ——paintlayoutcomposition

但是使用transform中的translatex/y來切換動畫,你將會發現,這並不會觸發paintlayout,僅僅會觸發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

目錄1.基礎編輯心得 頁首頁尾 頁碼 2.圖表與公式管理公式表 3.參考文獻管理 4.資料圖 寫在最後 正如標題所說,我一直對優雅的使用工具有一種莫名的執念,可惜最近實在是太忙了,一直沒有心力去好好的寫一下這幾年使用word進行科研寫作的心得。在畢業設計期間,也算是幫助不少同學完成了一些格式調整,公...

讓爬蟲更加友好

寫乙個爬蟲去網際網路上採集資料這件事情,看似好像對別人沒有壞處,其實如果爬蟲不斷的去爬資料的話,會給爬取物件的 造成很大的壓力。所以我們往往會限制爬蟲爬取的速度。之前最原始不用框架爬取交大的圖書館資料,後來整個實驗室不能上圖書館的網了 使用了scrapy框架之後,沒有做限速設定,後來又這樣了。這次又...