微信小程序canvas绘制雪花飘落

最近一直在写小程序，刚好也在学习研究canvas，参考了网上h5 canvas绘制雪花飘落的资料，用它试着改成小程序了。
雪花单独分成一个模块了。
简单讲下思路，初始化的时候generateSnow函数随机生成雪花参数，每隔一百毫秒生成一个，后面canvas绘制雪花的时候这里生成了多少个就会绘制多少个雪花，下大雪还是下小雪可以控制毫秒时间来决定。play函数中，雪花飘落的动画就是每隔一百毫秒重绘一次雪花所达成的。

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函数执行下就可以看到了，雪花是白的，记得设一个背景。