canvas動畫實戰與效能優化

插播一篇關於canvas動畫及效能優化的文章，為我們可以更好的進入到webgl的世界奠定基礎。

首先介紹一下我們要實現的動畫內容：夜空中的流星原始碼。

今天就來跟大家詳細分享一下如何進行編寫canvas動畫以及如何進行優化。

canvas的頁面組成是非常簡單的。如下所示：

您的瀏覽器不支援canvas標籤，請公升級版本或選擇其他瀏覽器

建立乙個html檔案，並且引入css 和 js檔案。

這裡有乙個問題，之前我們跟大家分享的時候說，canvas標籤的寬和高要在html中進行設定。但是為了適配我們的螢幕，就得用js來設定畫布的寬和高。

1. 首先建立乙個流星的類。並新增乙個啟動的方法

class shootingstar
// 啟動的方法
start() {}
}// 例項化乙個物件，並啟動
new shootingstar().start();

2. 獲取到canvas物件和繪圖上下文，並設定canvas的寬和高

注意：這裡設定寬高是因為畫布會出現模糊的現象。

// 構造方法
constructor() 
// 初始化畫布的寬和高
initcanvassize() 
// 在起始方法中呼叫初始化函式
start()

3. 繪製背景

這裡我們沒有引入，是模擬了乙個星空的效果，略微簡陋。

// 繪製背景
drawbackground() )
}}

4. 開啟流星模式

// 初始化背景，並重新開始繪製流星
initbackground() 
// 繪製流星
drawstar(x, y) 
// 新增拖尾效果
drawcover() 
// 開啟流星模式
startshootingstar() 
// 繪製流星，傳入當前的 x、y 座標
this.drawstar(x, y);
// 此函式用來使流星有拖尾效果。
this.drawcover();
// 使用此函式實現動畫效果
requestanimationframe(draw);
}  draw()
}

到這裡動畫實戰部分的內容就分享完了，有興趣的同學可以檢視下原始碼，也可以試著自己實現以下。

繪製過程中，通常會使用計算來代替頻繁的畫布渲染。原理類似於dom回流。因為canvas也是屬於 dom 的部分，過多的操作會影響效能。當然，如果你使用乙個特別消耗實現的演算法的話就另當別論了。

很多情況下，我們都習慣於使用setinterval、settimeout來實現頁面中的動畫。也有很多小夥伴發現這種實現會出現丟幀的現象。原因有二:

針對以上兩點內容，我們使用requestanimationframe來優化動畫實現。相對於前者，它有兩點明顯的優勢

離屏渲染可以理解為建立乙個備用canvas但是不顯示到頁面上，執行預渲染操作。此項操作用到了drawimage這個方法，此方法第乙個引數可以接受乙個物件或者是乙個canvas物件。

具體實現：

將需要操作的內容在離屏的canvas上先處理好，之後再使用drawimage方法放入到顯示層。

也是使用多個canvas的方式，將靜態的內容和需要頻繁計算的內容分開渲染，越複雜的場景越適合使用此方法。具體實現如下

示意圖：

通過這種方式可以將我們的需求拆分為多個模組。將需要頻繁繪製的內容拆分出來，從而減少效能的消耗。

效能優化方式主要是一些日常的注意點和拆分方式，並不是萬能的。

在canvas的動畫實現中，演算法也佔據了很大一部分，比如canvas中的粒子操作，動輒就是成千上萬的畫素點，演算法的使用不當可能會帶來很大的問題。

好了，今天的分享就到這裡了，臨時插播的一條內容。接下來會分享關於webgl的內容，版興趣的同學不要錯過喲。bye~

canvas動畫實戰與效能優化

UGUI效能優化之Canvas

canvas效能優化離屏渲染

前端效能優化幀動畫

canvas動畫實戰與效能優化

UGUI效能優化之Canvas

canvas效能優化 離屏渲染

前端效能優化 幀動畫

相關推薦

canvas效能優化離屏渲染

前端效能優化幀動畫