uniapp 使用 canvas 用雪花图片写一个飘落雪花的 雪花全部飘落底部就停止动画

好的，以下是实现这个效果的代码：

1. 在uniapp中创建一个新页面，然后在template中添加一个canvas元素：

<canvas id="canvas" style="width: 100%; height: 100%;"></canvas>

2. 在script标签中添加以下代码：

export default {
  onReady() {
    this.ctx = uni.createCanvasContext('canvas', this);
    this.width = uni.getSystemInfoSync().windowWidth;
    this.height = uni.getSystemInfoSync().windowHeight;
    this.snows = [];
    for (let i = 0; i < 50; i++) {
      this.snows.push({
        x: Math.random() * this.width,
        y: Math.random() * this.height,
        r: Math.random() * 5 + 5,
        speedX: Math.random() * 2 - 1,
        speedY: Math.random() * 2 + 1
      });
    }
    this.draw();
  },
  draw() {
    this.ctx.clearRect(0, 0, this.width, this.height);
    for (let i = 0; i < this.snows.length; i++) {
      const snow = this.snows[i];
      if (snow.y < this.height) {
        this.ctx.drawImage('/static/snow.png', snow.x, snow.y, snow.r, snow.r);
        snow.x += snow.speedX;
        snow.y += snow.speedY;
      }
    }
    this.ctx.draw();
    setTimeout(() => {
      this.draw();
    }, 30);
  }
}

3. 在static目录下添加一个名为snow.png的雪花图片。

以上代码会在页面加载完成时创建canvas元素并初始化一些雪花对象，然后在draw函数中不断地绘制雪花并更新雪花的位置，直到所有雪花都飘落到底部为止。每次绘制后，使用setTimeout函数等待30ms再次调用draw函数，以实现动画效果。