canvas-fireworks

Introduction

canvas-fireworks 是基于js canvas 开发

Installation

npm install canvas-fireworks -S

示例代码

Usage

<template>
  <div class="hello">
    <canvas id="fireworks2" width="600" height="800"></canvas>
  </div>
</template>

<script>
import {Fireworks} from '../../fireworks'
export default {
  name: 'VueFireworks',
  data() {
    return {
      fireworks: null
    }
  },
  props: {
    msg: String
  },
  mounted() {
    this.fireworks = new Fireworks({
      canvas: document.getElementById("fireworks2"),
      background: 'rgba(100, 50, 30, 0.15)', // 背景色
      fill: 'rgba(100, 50, 30, 0.15)', // 背景色浅色 （和背景色保持一致，透明的是背景色的0，1）
      intervalTime: [500, 2800], // 烟花间隔时间范围
      startPositionX: [5, 1, 3], // x轴开始点的范围 宽度为5, 范围是1-3
      endPositionX: [5, 1, 3], // x轴结束点范围 宽度为5, 范围是1-3
      endPositionY: [80, 200], // Y轴结束点范围
      speed: 0.02, // 烟花加速度
      fragSpeed: 0.15, // 爆炸后烟花加速度
      fragNum: [30, 100], // 爆炸后烟花数量范围
      fragColor: [50, 255],  // 爆炸后烟花颜色范围
      fragRange: [80, 100],  // 爆炸后烟花半径范围
    })

    this.fireworks.play() // 播放
    // this.fireworks.stop()  // 结束
  }
}
</script>

<style scoped>
#fireworks {
  width: 600px;
  height: 800px;
  z-index: 12;
  position: absolute;
  top: 0;
  left: 0;
}
</style>