在 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>
//獲取canvas
let ctx = wx.createCanvasContext('test')
這里有一點：它并不同于“獲取元素”！
- 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 即可算出對應的比例，代碼如下：
// 在 onl oad 內
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()
感興趣的朋友可以參見這篇文章：HTML5 canvas基礎與「生成名片」應用程式 ??
CSDN認證博客專家
ECMAScript 6
Node.js
CSS
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/253501.html
標籤：其他
上一篇：【JQuery框架】JQuery物件和JS物件的區別和轉換
下一篇：影響科學圈的那些計算機代碼