在 Canvas 開發中，經常會提到粒子系統，使用粒子系統可以模拟出火、霧、雲、雪等抽象視覺效果。它是HTML5新增的為頁面添加多樣化效果的絕佳實踐。
正巧最近做的一個天氣類微信小程式緊接尾聲，尋思着首頁展示溫度等資訊的地方似乎少了點什麼。到Android自帶的天氣預報上看了下，恍然大悟。于是結合前一段時間鑽研的canvas為其添加了雨雪粒子效果。
小程式中的“繪圖”API
小程式的繪圖 API 雖然也叫canvas，但跟 HTML5 的 Canvas 本質上有很大差別的，其原因是小程式的繪圖（Canvas）是用戶端實作的 Native UI 元件，而不是普通的 H5 元件，是以在使用上跟普通的 H5 元件用法略有不同。
IOS和Android實作方式還不一樣，據說它是基于 Ejecta 實作的。
其主要展現在以下方式上：
- 上下文擷取方式不同
小程式繪圖 API 的 canvasContext 擷取方式是通過
<canvas>
的 canvas-id 來擷取的，即：
<canvas canvas-id="test"></canvas> 這裡有一點：它并不同于“擷取元素”！
- API 寫法不同
曾經的小程式的繪圖 API 在用法上差別于絕大部分的 HTML5 Canvas 屬性寫法，它有自己的小程式寫法，例如：
const ctx = wx.createCanvasContext('myCanvas')
ctx.setFillStyle('red')
ctx.fillRect(10, 10, 150, 75)
ctx.draw() 不過值得一提的是，在 1.9.0 基礎庫以上，類似 fillStyle、lineWidth 這類的，可以直接跟 H5 的寫法一樣，不需要使用 setXxxx 的方式了。
- 想要顯示繪制效果，需要
ctx.draw()
在小程式的繪圖使用中，對 context 進行繪制之後，并不會立即繪制到畫布上，而是通過執行
ctx.draw()
的方式，将之前在繪圖上下文中的描述（路徑、變形、樣式）畫到 canvas 中。但
ctx.draw()
方法比較消耗性能，是以不建議在一個繪制周期内多次調用！
粒子系統的設計
在這個小程式中，筆者使用粒子系統做了雨雪效果，采用es6-Class寫法：粒子系統由基類和子類組成。Particle 是基類，定義了子類統一的方法，如
run()
、
stop()
、
clear()
等。基類負責整個粒子系統動畫周期和流程的維護，子類負責具體實作的粒子效果，比如下雨下雪的效果是子類實作的，而下雨下雪的開關和公共處理流程是基類控制的。
基類由如下幾個方法組成：
- _init()：執行個體化時第一執行的方法；空，由子類具體實作
- _draw()：每個動效周期内畫圖用的方法；空，由子類具體實作
- run：設定定時器，定時執行 _draw()，實作動畫周期
- stop：停止動畫
- clear：停止動畫，并且清空畫闆
其大緻流程如下：
- 在構造器内調用 _init，随機生成單個粒子，放進數組對象；
- 在執行執行個體 run 的時候，設定定時器，定時器回調調用 _draw 繪制粒子，設定單個粒子下一步的屬性；
- 而 _init 和 _draw 是子類具體根據效果實作的
根據如上解釋，整個流程就很明了了：
//同級的effect.js檔案
// 兩個狀态
const STATUS_STOP = 'stop'
const STATUS_RUNNING = 'running'
//“基”類-這裡就直接當“下雨”類了
class Particle {
constructor(ctx, width, height, opts) {
this._timer = null
this._options = opts || {}
// canvas 上下文
this.ctx = ctx
this.status = STATUS_STOP
this.w = width
this.h = height
this._init()
}
_init() {}
_draw() {}
_update(){}
run() {
if (this.status !== STATUS_RUNNING) {
// 更改狀态
this.status = STATUS_RUNNING
// 繪制循環
this._timer = setInterval(() => {
this._draw()
}, 30)
}
return this
}
stop() {
// 清理定時器，狀态修改
this.status = STATUS_STOP
clearInterval(this._timer)
return this
}
clear(){
this.stop()
this.ctx.clearRect(0, 0, this.w, this.h)
this.ctx.draw()
return this
}
}
exports.Particle=Particle 根據上面的提示，在
_init()
中，根據需要生成的粒子個數 amount 循環随機生成每個粒子，放入
this.particles
數組：
// _init
let h = this.h
let w = this.w
// 數量，根據不同雨大小，數量可調
let amount = this._options.amount || 100
// 速度參數，調節下落速度
let speedFactor = this._options.speedFactor || 0.03
let speed = speedFactor * h
let ps = (this.particles = [])
for (let i = 0; i < amount; i++) {
let p = {
x: Math.random() * w,
y: Math.random() * h,
l: 2 * Math.random(),
xs: -1,
ys: 10 * Math.random() + speed,
color: 'rgba(0, 0, 0, 0.15)'
}
ps.push(p)
} 其中：
- x、y 代表單個粒子的位置，即雨滴開始繪圖的位置
- xs、ys 分别代表 x、y 方向上的加速度，即雨滴的下落速度和角度
- l 代表雨滴的長度
而
_draw()
的方法，是先将畫布清空，然後周遊
this.particles
數組取出單個雨滴并進行繪制，最後調用一個單獨實作的
_update()
重新計算單個雨滴的位置：
// _draw
let ps = this.particles
let ctx = this.ctx
// 清空畫布
ctx.clearRect(0, 0, this.w, this.h)
// 周遊繪制雨滴
for (let i = 0; i < ps.length; i++) {
let s = ps[i]
ctx.beginPath()
ctx.moveTo(s.x, s.y)
// 畫線繪制雨點效果
ctx.lineTo(s.x + s.l * s.xs, s.y + s.l * s.ys)
ctx.setStrokeStyle(s.color)
ctx.stroke()
}
ctx.draw()
return this._update() 而
_update()
中，我們要做的就是判斷“下一時刻每一個雨點的位置”以及“是否超出了“畫布”的範圍”：
// _update
let {w, h} = this // 擷取畫布大小
for (let ps = this.particles, i = 0; i < ps.length; i++) {
// 開始下一個周期的位置計算
let s = ps[i]
s.x += s.xs
s.y += s.ys
// 超出範圍，重新回收，重複利用
if (s.x > w || s.y > h) {
s.x = Math.random() * w
s.y = -10
}
} 
我們大緻一看會發現，除了調用的名稱有的不一樣之外，似乎和原生js中的canvas API1沒什麼差別。
上面是控制“下雨”的，其實下雪的例子類和下雨的唯一差別就是“粒子的形狀”了：
class Snow extends Particle {
_init() {
let {w, h} = this
let colors = this._options._colors || ['#ccc', '#eee', '#fff', '#ddd']
// 雪的大小用數量來計算
let amount = this._options.amount || 100
let speedFactor = this._options.speedFactor || 0.03
// 速度
let speed = speedFactor * h * 0.15
let radius = this._options.radius || 2
let ps = (this.particles = [])
for (let i = 0; i < amount; i++) {
let x = Math.random() * w
let y = Math.random() * h
ps.push({
x,
y,
// 原始 x 坐标，後面計算随機雪擺動是以此為基礎
ox: x,
// 向下運動動能變量
ys: Math.random() + speed,
// 雪的半徑大小
r: Math.floor(Math.random() * (radius + 0.5) + 0.5),
// 顔色随機取
color: colors[Math.floor(Math.random() * colors.length)],
rs: Math.random() * 80
})
}
}
_draw() {
let ps = this.particles
let ctx = this.ctx
ctx.clearRect(0, 0, this.w, this.h)
for (let i = 0; i < ps.length; i++) {
let {x, y, r, color} = ps[i]
ctx.beginPath()
// 繪制下雪的效果
ctx.arc(x, y, r, 0, Math.PI * 2, false)
ctx.setFillStyle(color)
ctx.fill()
ctx.closePath()
}
ctx.draw()
this._update()
}
_update() {
let {w, h} = this
let v = this._options.speedFactor / 10
for (let ps = this.particles, i = 0; i < ps.length; i++) {
let p = ps[i]
let {ox, ys} = p
p.rs += v
// 這裡使用了 cos，做成随機左右擺動的效果
p.x = ox + Math.cos(p.rs) * w / 2
p.y += ys
// console.log(ys)
// 重複利用
if (p.x > w || p.y > h) {
p.x = Math.random() * w
p.y = -10
}
}
}
} 使用粒子系統
首先，在 WXML 代碼中，給實時天氣子產品增加 id 為 effect 的 Canvas 元件：
<canvas canvas-id="effect" id="effect"></canvas> 而後引入上面的js檔案：
import Particle from './effect'
let Rain=Particle.Particle 重點： 在微信小程式内，繪圖 API（Canvas）内的長寬機關為 px，而我們頁面布局用的是 rpx，雖然我們在 CSS 内已經使用 rpx 設定了 Canvas 的大小，但是由于内部機關的緣故，在執行個體化 Rain/Snow 粒子系統的時候，傳入的 width 和 height 參數應該是實際的 px 大小。
rpx 轉 px 是根據不同的裝置螢幕尺寸轉換的。雖然切圖可以按照 1rpx=2px 這樣标準的 iPhone 6 視覺稿做頁面，而且微信似乎幫我們做了相容處理，但是涉及實際 px 計算時，仍不能簡單采用 1rpx=2px 的方式來解決，需要我們按照實際的 rpx 對應 px 的比例進行轉換。如何擷取 rpx 和 px 的實際比例呢？我們知道微信小程式中預設規定了螢幕寬度為 750rpx，根據這個設計，我們可以通過
wx.getSystemInfo
擷取到的資訊，找到手機螢幕的寬度大小
windowWidth
即可算出對應的比例，代碼如下：
// 在 onload 内
wx.getSystemInfo({
success: (res) => {
let width = res.windowWidth
this.setData({
width,
scale: width / 375
})
}
}) 這樣，上面的 width就是螢幕的實際 px 寬度，而每個元素的實際 px 高度則由
元素 rpx 高度 / 2 * scale
得到。
最後，我們在頁面代碼中，實際使用時的代碼是下面這樣的：
const ctx = wx.createCanvasContext('effect')
let {width, scale} = this.data
// 768 為 CSS 中設定的 rpx 值
let height = 768 / 2 * scale
let rain = new Rain(ctx, width, height, {
amount: 100,
speedFactor: 0.03
})
// 跑起來
rain.run() 在切換城市或者檢測到沒有雨雪天氣時調用clear去除效果：
rain.clear() ![主流浏覽器四大綜合性能測試[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)