【帶著canvas去流浪（10）】文字煙花

大史不說話發表於2019-05-16
Canvas

目錄

【帶著canvas去流浪（10）】文字煙花

示例程式碼託管在：http://www.github.com/dashnowords/blogs

部落格園地址：《大史住在大前端》原創博文目錄

華為雲社群地址：【你要的前端打怪升級指南】

一. 文字煙花

文字煙花的小控制元件是下面這樣的效果，你或許在很多個人部落格中見過：

【帶著canvas去流浪（10）】文字煙花

這一節我們就來講述一下這個小動畫的實現方法。

二. 動畫原理

首先動畫的主框架仍然是我們反覆使用的逐幀動畫框架，煙花生成以後的部分也不難理解，我們之前已經對物理碰撞進行過模擬，這裡實際上就是模擬了帶有初速度的自由落體。所以這個小動畫裡唯一的難點，就是如何根據文字生成煙花，只要做到這一步，其他的部分都比較容易實現。

2.1 畫素操作

這裡就要用到canvas畫素操作的API——context.getImageData( )了，它可以將畫布上指定矩形區域以畫素點的形式返回回來，畫素資料掛載在返回物件的data屬性上，它是一個一維的Uint8ClampedArray定型陣列，每個值只能取0-255之間的整數，如果賦值超過這個範圍，則自動修改為[0,255]而不會報錯。這個一維陣列是矩形區域的畫素點資料逐行拼接在一起的，每4個點代表一個畫素點的RGBA的顏色資料，最後一個通道是透明度資料，例如一個紅色的畫素點的資料就是[...,255,0,0,0....]。比如你擷取了一個長為200畫素高為10畫素的矩形區域的資料點，那麼就會得到一個200*10*4=8000個資料點的陣列。

這是canvas非常重要的一個API，它的應用場景非常多，例如結合WebRTC輸入的流資料來做視訊彈幕，或者使用演算法對畫素資料進行加工實現各種各樣的圖片濾鏡等，還可以使用離屏canvas來進行效能提升，具體的應用就留給你自己去探索嘍。

2.2 煙花生成演算法

獲取到畫素資料後，我們就可以對其進行分析，分析演算法如下：

【帶著canvas去流浪（10）】文字煙花

  1. 將要獲取畫素的部分分成大小適中的網格，網格太小則渲染壓力大，網格太大動畫效果不好。
  2. 遍歷每一個網格，取出小方塊區域內所有畫素點，也可以一次性讀取整個區域的畫素點然後按小區域來取用，然後統計其中dirty的畫素點數量（判斷其對應的顏色值是否都為255，如果不是則判定為dirty），如果區域內臟點的比例超過一定閾值（示例中為60%）則判定該區域需要被煙花點替換。
  3. 在需要生成煙花的區域以隨機大小和顏色生成一個小球，並根據其位置指定水平初速度的方向，小球均受到豎直向下的重力影響。
  4. 在幀動畫中更新小球狀態。

2.3 計時器

最後，我們還需要一個新的timer物件，之前我們接觸到的精靈動畫大都是連續的，每一幀都需要進行狀態更新，而本節中時間文字的更新是離散的，一秒鐘才更新一次，煙花由於有動畫過程，也不太適合每秒都生成。所以我們需要在timer中實現一個內部計時器，每1秒更新一次渲染文字，每2秒觸發一次。如果對時間精度要求較高，可以記錄時間戳進行比對，如果精度要求不高，可以在update方法中遞增直接對更新週期進行取模即可。

Timer類的定義如下：

//計時器類
class Timer{
    constructor(){
        this.lastTime = Date.now(); //初始化的時候記錄一次時間
        this.label = new Date(this.lastTime).Format('hh:mm:ss');//Format是自定義的格式化方法
        this.step = 0;//標記是否重新整理時間文字
        this.shouldAnim = 0;//標記是否需要生成新的煙花
    }

    update(){
       this.step = (this.step + 1) % 60;//時間文字每60幀重新整理一次
       this.shouldAnim = (this.shouldAnim + 1) % 120;//煙花每120幀生成一次
       if (!this.step) {
          this.lastTime = Date.now();
          this.label = new Date(this.lastTime).Format('hh:mm:ss');
       }
    }

    paint(ctx){
        context.fillStyle = "#353535";
        ctx.fillText(this.label, 200, 100);
    }
}

主框架部分的程式碼已經講過非常多次，本文不再贅述。

相關文章