效果图
属性设计
烟花状态:烟花应有三个状态:
升空
等待炸裂
炸裂后
烟花:发射点(x, y),爆炸点(xEnd, yEnd),升空后等待炸裂时间(wait),炸裂后微粒个数(count),烟花半径(radius)
**烟花炸裂后微粒:**自身位置(x, y),自身大小(size),自身速度(rate),最大烟花半径(radius)。
**config:**为全局变量,以及控制参数,包括画布宽高,设定烟花属性等。
设定全局变量:
const config = {
width: 360,
height: 600,
canvases: ['bg', 'firework'],
skyColor: '210, 60%, 5%, 0.2)'
fireworkTime:{min:30,max:60},
//烟花参数本身有默认值 传入undefined则使用默认参数
fireworkOpt:{
x: undefined,
y: undefined,
xEnd: undefined,
yEnd: undefined,
count: 300, //炸裂后粒子数
wait: undefined, //消失后 => 炸裂 等待时间
}
}
构建微粒类:
class Particle{
//默认值写法
constructor({x, y, size = 1, radius = 1.2} = {}){
this.x = x;
this.y = y;
this.size = size;
this.rate = Math.random(); //每个微粒移动的速度