uniapp 实现烟花

根据提供的引用内容，可以使用uniapp来实现烟花效果。可以通过自定义组件和canvas绘制来实现。以下是一个简单的示例代码：

<template>
  <view class="container">
    <canvas id="fireworksCanvas" class="canvas"></canvas>
  </view>
</template>

<script>
export default {
  mounted() {
    this.drawFireworks();
  },
  methods: {
    drawFireworks() {
      const ctx = uni.createCanvasContext('fireworksCanvas', this);
      const fireworksImages = [
        'firework1.png',
        'firework2.png',
        'firework3.png',
        'firework4.png',
        'firework5.png'
      ];
      const fireworks = [];

      function Firework(x, y) {
        this.x = x;
        this.y = y;
        this.imageIndex = 0;
        this.image = new Image();
        this.image.src = fireworksImages[this.imageIndex];
      }

      Firework.prototype.draw = function() {
        ctx.drawImage(this.image, this.x, this.y);
      };

      function createFirework() {
        const x = Math.random() * canvasWidth;
        const y = Math.random() * canvasHeight;
        const firework = new Firework(x, y);
        fireworks.push(firework);
      }

      function updateFireworks() {
        fireworks.forEach(firework => {
          firework.imageIndex++;
          if (firework.imageIndex >= fireworksImages.length) {
            fireworks.splice(fireworks.indexOf(firework), 1);
          } else {
            firework.image.src = fireworksImages[firework.imageIndex];
          }
        });
      }

      function draw() {
        ctx.clearRect(0, 0, canvasWidth, canvasHeight);
        fireworks.forEach(firework => {
          firework.draw();
        });
      }

      const canvasWidth = uni.upx2px(750);
      const canvasHeight = uni.upx2px(1334);
      const interval = setInterval(() => {
        createFirework();
        updateFireworks();
        draw();
      }, 100);

      setTimeout(() => {
        clearInterval(interval);
      }, 5000);
    }
  }
};
</script>

<style>
.container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.canvas {
  width: 100%;
  height: 100%;
}
</style>

在上述代码中，我们使用了uniapp的canvas组件来绘制烟花效果。通过创建Firework对象来表示每个烟花，使用draw方法在canvas上绘制烟花的图片。通过定时器不断创建和更新烟花，并在canvas上绘制。最后，我们设置了一个定时器，5秒后停止绘制烟花。

请注意，上述代码中的图片路径需要根据实际情况进行修改，确保图片资源正确加载。