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

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

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

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

[TOC]

一. 文字煙花

文字煙花的小控件是下面這樣的效果，你或許在不少我的博客中見過：

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

二. 動畫原理

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

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 煙花生成算法

獲取到像素數據後，咱們就能夠對其進行分析，分析算法以下：

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);
    }
}

主框架部分的代碼已經講過很是屢次，本文再也不贅述。