使用canvas實現粒子流動效果
首先我們先來看下實現的效果吧~ （簡書不支持插入視頻，只能點擊鏈接查看）
這是一個簡單的粒子流向效果，實現起來也非常簡單，該效果可以用在管道流向、風場變化、以及其它需要表達方向、速度的可視化效果展示場景中。
該效果中的難點只有一個，就是粒子的拖尾效果。
粒子拖尾效果實現
實現粒子拖尾效果需要用到canvas中的一個知識點，globalCompositeOperation字段。該屬性用來設置如何將一個源（新的）圖像繪制到目標（已有）圖像上。
注意：源圖像 = 您打算放置到畫布上的繪圖；目標圖像 = 您已經放置在畫布上的繪圖。
globalCompositeOperation字段有很多屬性值，默認為'source-over'，表示在目標圖像上顯示源圖像。在本示例中我們會用到'destination-in'和'lighter'這兩個屬性值。
destination-in: 在源圖像中顯示目標圖像。只有源圖像內的目標圖像部分會被顯示，源圖像是透明的。
lighter: 顯示源圖像 + 目標圖像。
每次調用繪制方法，都要執行以下代碼:
this.ctx.globalCompositeOperation = 'destination-in'; // 設置模式為：目標圖形和源圖形重疊的部分會被保留（源圖形），其余顯示為透明
this.ctx.fillRect(0, 0, this.canvasWidth, this.canvasHeight); // 繪制矩形
this.ctx.globalCompositeOperation = 'lighter'; // 設置模式為: 源圖像 + 目標圖像。重疊部分的顏色會重新計算
this.ctx.globalAlpha = 0.8; // 設置畫布上繪制圖形的不透明度
實現半透明的拖尾效果原理就好比是在一張紙上畫了一幅畫，然后又蓋了一張半透明的紙上去繼續作畫，被壓在下面的畫就會慢慢變淡直到看不清，但最上面的畫就很清晰。在該示例中，每畫一幀，就相當于在原直線的前方又畫了一條新的直線，因為是新畫的，所以也是最清楚的，所以也是最亮的，舊的直線就像蒙上了一層紙，慢慢變暗，所以越舊的線段越暗淡。畫面連貫起來，給人的感覺就像是粒子在前進，后面的尾巴在慢慢消失。上面代碼中的'fillRect'方法就類似于覆蓋一張紙的操作，'globalAlpha = 0.8'就類似于將覆蓋的紙設置為半透明的紙。
粒子向前移動
在創建粒子類的時候，我們需要設置粒子當前位置坐標、以及下次繪制時的位置坐標。在每次繪制前，更新當前位置坐標以及計算下次位置坐標。繪制時就只用繪制當前位置坐標到下次位置坐標這條線段。
為了讓粒子運動起來顯得更加有“靈性”，我們可以增加速度增量字段，并在更新粒子狀態的方法中隨機修改增量速度，讓粒子看起來是在做無規則運動，而不是一條直線~
// 粒子類
class Particle {
constructor(x, y) {
this.x = x; // 坐標x值
this.y = y; // 坐標y值
this.speedRate = 0.4; // 速率，用來控制粒子流動的快慢
this.speedX = 0; // 速度在x方向上的增量
this.speedY = 0; // 速度在y方向上的增量
this.lifetime = 1 + Math.random() * 800; // 粒子生命周期，每次更新都會減小
this.nextX = x + this.speedX; // 接下來粒子的x坐標
this.nextY = y + this.speedY; // 接下來粒子的y坐標
}
// 更新粒子的方法
update() {
this.x = this.nextX; // 更新x坐標
this.y = this.nextY; // 更新y坐標
this.speedX += (Math.random() * 2 - 1) * this.speedRate; // x方向增量
this.speedY += (Math.random() * 2 - 1) * this.speedRate; // y方向增量
this.nextX = this.x + this.speedX; // 計算接下來粒子的x坐標
this.nextY = this.y + this.speedY; // 計算接下來粒子的y坐標
this.lifetime--; // 生命周期減1
}
}
完整代碼
如需查看示例效果可點擊下載完整代碼。代碼中包含詳細的注釋，方便大家的理解。
如果該文章對您有所幫助，請您一定不要吝嗇您的鼓勵。點贊、評論、分享、收藏、打賞都是您對我的鼓勵和支持。
如果您有GitHub賬號，還可以關注我~
最后，感謝大家的閱讀，如有錯誤，還請各位批評指正。
