最近一直在寫小程序叹括，剛好也在學(xué)習(xí)研究canvas，參考了網(wǎng)上h5 canvas繪制雪花飄落的資料绍坝，用它試著改成小程序了徘意。
雪花單獨分成一個模塊了。
簡單講下思路轩褐，初始化的時候generateSnow函數(shù)隨機生成雪花參數(shù)椎咧，每隔一百毫秒生成一個，后面canvas繪制雪花的時候這里生成了多少個就會繪制多少個雪花把介，下大雪還是下小雪可以控制毫秒時間來決定勤讽。play函數(shù)中，雪花飄落的動畫就是每隔一百毫秒重繪一次雪花所達成的拗踢。
var screenW = 0;
var screenH = 0;
wx.getSystemInfo({
success: (res)=> {
screenW = res.screenWidth
screenH = res.screenHeight
},
})
class Snow{
constructor(){
this.canvas = {}
this.snow = []
this.init()
}
init(){
this.canvas = wx.createCanvasContext("snow", this)
this.generateSnow()
}
//隨機生成雪花半徑
rand(num){
return Math.floor(Math.random() * num +1)
}
//雪花飄落速度
getRanNum (n, m) {
return Math.floor(Math.random() * (m - n) + n);
}
//生成雪花
generateSnow(){
setInterval(()=>{
let snows = {
r:this.rand(10), //雪花半徑
x:this.rand(screenW), //雪花坐標位置
y:0,
speedx:this.getRanNum(-5,5), //雪花飄落速度
speedy:this.getRanNum(10,20)
}
this.snow.push(snows)
},100)
}
//繪制雪花
drawSnow(){
let canvas = this.canvas
let snow = this.snow
canvas.clearRect(0, 0, screenW, screenH)
console.log(this.snow.length)
for (let i = 0; i < snow.length; i++){
snow[i].x += snow[i].speedx
snow[i].y += snow[i].speedy
//超出屏幕高度時移除雪花
if (snow[i].y > screenH){
this.snow.splice(i,1)
}
canvas.beginPath()
let snowColor = canvas.createCircularGradient(snow[i].x, snow[i].y, snow[i].r)
snowColor.addColorStop(0, "rgba(255,255,255,1)")
snowColor.addColorStop(1, "rgba(255,255,255,0.2)")
canvas.setFillStyle(snowColor)
canvas.arc(snow[i].x, snow[i].y, snow[i].r, 0, 2 * Math.PI)
canvas.fill()
}
canvas.draw()
}
}
function play() {
let snow = new Snow()
var timer = setInterval(()=>{
snow.drawSnow()
},100)
}
export { play }
在頁面中引入play函數(shù)執(zhí)行下就可以看到了脚牍，雪花是白的，記得設(shè)一個背景巢墅。
