程序员：带你制作浪漫烟花告白

原创

于 2020-01-03 17:43:53 发布 · 5.7k 阅读

50 ·

CC 4.0 BY-SA版权

文章标签：

#python #程序员 #网页制作 #编辑 #代码

本文介绍了一位程序员如何利用Python制作一个浪漫的烟花告白网页。通过定义烟花的状态和属性，包括升空、等待炸裂和炸裂后，以及微粒的位置、大小和速度，实现了烟花的动态效果。在烟花炸裂时，还会让天空背景变亮，增加视觉冲击力。

效果图
在这里插入图片描述
属性设计
烟花状态：烟花应有三个状态：

升空
等待炸裂
炸裂后
烟花：发射点（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(); //每个微粒移动的速度都是随