系列文章
| 序号 | 目录 |
|---|---|
| 1 | HTML满屏跳动的爱心 |
| 2 | HTML五彩缤纷的爱心 |
| 3 | HTML满屏漂浮爱心 |
| 4 | HTML情人节爱心 |
| 5 | HTML蓝色爱心射线 |
| 6 | HTML跳动的爱心 |
| 7 | HTML跳动的双爱心 |
| 8 | HTML粒子爱心 |
| 9 | HTML蓝色动态爱心 |
| 10 | HTML橙色动态粒子爱心 |
| 11 | HTML旋转爱心 |
| 12 | HTML爱情树 |
| 13 | HTML元素周期表 |
| 14 | HTML飞舞的花瓣 |
| 15 | HTML星空特效 |
| 16 | HTML黑客帝国字母雨 |
| 17 | HTML哆啦A梦 |
| 18 | HTML流星雨 |
| 19 | HTML沙漏爱心 |
| 20 | HTML爱心字母雨 |
| 21 | HTML爱心流星雨 |
| 22 | HTML生日蛋糕 |
| 23 | HTML流光爱心 |
| 24 | HTML粉色爱心 |
| 25 | HTML满屏飘字 |
| 26 | HTML飞舞爱心 |
| 27 | HTML音乐圣诞树 |
| 28 | HTML星空圣诞树 |
| 29 | HTML礼物圣诞树 |
| 30 | HTML旋转圣诞树 |
| 31 | HTML旋转相册① |
| 32 | HTML旋转相册② |
| 33 | HTML旋转相册③ |
| 34 | HTML大雪纷飞① |
| 35 | HTML大雪纷飞② |
| 36 | HTML炫酷烟花① |
| 37 | HTML炫酷烟花② |
| 38 | HTML炫酷烟花③ |
| 39 | HTML炫酷烟花④ |
| 40 | HTML炫酷烟花⑤ |
| 41 | HTML炫酷烟花⑥ |
| 42 | HTML炫酷烟花⑦ |
| 43 | HTML炫酷烟花⑧ |
| 44 | HTML炫酷烟花⑨ |
| 敬请期待...... |
写在前面
这是一场在浏览器中绽放的虚拟烟火秀，用代码编织出夜空中的绚烂瞬间。每一次升空、每一次爆炸，都是数学与美学交织的成果。我用HTML5的Canvas与JavaScript打造了一个充满生命力的动态烟火系统，让屏幕化作节日的夜空，上演永不落幕的光影盛宴。
技术需求
- Canvas全屏适配 ：通过
window.innerWidth与innerHeight获取视口尺寸，动态设置Canvas宽高，并监听窗口缩放事件，确保动画在任何设备上都能铺满屏幕，提供沉浸式视觉体验。 - 双阶段动画逻辑：烟火被划分为"升空"与"爆炸"两个阶段。通过判断当前位置是否高于预设爆炸高度，切换绘制模式，实现从点状上升到放射状爆发的自然过渡。
- 色彩渐变与光晕效果：每颗烟火使用RGB数组存储基础色，并在绘制不同层级光点时叠加亮度，模拟真实火焰由内而外逐渐变亮的辉光效果，增强立体感。
- 极坐标爆炸建模 ：爆炸粒子采用极坐标系分布，利用
cos和sin函数将角度转化为方向向量，围绕中心呈360度放射状展开，形成对称而震撼的圆形爆炸形态。 - 粒子拖尾与动态偏移：在爆炸粒子的Y坐标上加入与位置相关的偏移量，使整体光斑呈现向上扩散的弧形轨迹，模仿真实烟火在空中膨胀时的物理形态。
- 循环再生机制：当爆炸半径达到最大值后，自动重置烟火参数------包括位置、颜色、爆炸范围等，使其从画面底部重新升空，实现无限循环的持续表演。
- 高性能动画驱动 ：使用
requestAnimationFrame构建流畅动画循环，结合clearRect清屏避免累积渲染，保证高帧率运行的同时防止内存泄漏。 - 随机性控制艺术感：所有参数如起始高度、爆炸半径、颜色选择均引入随机性，但限定在美学合理的范围内，既保持多样性又不失整体协调。
主要代码
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fireworks Simulation</title>
<style>
body, html {
margin: 0;
padding: 0;
height: 100%;
background-color: #000;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
canvas {
display: block;
}
</style>
</head>
<body>
<canvas id="fireworksCanvas"></canvas>
<script>
const canvas = document.getElementById('fireworksCanvas');
const ctx = canvas.getContext('2d');
let canvasWidth = window.innerWidth;
let canvasHeight = window.innerHeight;
// Set canvas size to fill the screen
canvas.width = canvasWidth;
canvas.height = canvasHeight;
const MAXNUM = 15;
const PI = Math.PI;
// Firework structure similar to the C++ code
const fireworks = [];
const colors = [
[255, 0, 0], [210, 190, 255], [255, 120, 0], [255, 0, 150],
[255, 240, 100], [10, 255, 255], [160, 10, 255], [255, 200, 60]
];
// Firework initialization
function init() {
for (let i = 0; i < MAXNUM; i++) {
const firework = {
nowx: Math.random() * canvas.width,
nowy: canvas.height + Math.random() * 250 + 50,
endy: Math.random() * 100 + 10,
radio: Math.random() * 50 + 120,
explode: 0,
rgb: colors[Math.floor(Math.random() * colors.length)],
color: `rgb(${colors[Math.floor(Math.random() * colors.length)].join(',')})`
};
fireworks.push(firework);
}
}
......创作流程
我创作这个烟火模拟程序时，心中想的不是代码，而是童年夏夜抬头看见的那一朵朵在天际绽放的光之花。我想把那种短暂却极致的美留下来，用逻辑去还原感性，用算法去复刻惊喜。于是，我决定构建一个能自我循环、永不落幕的数字烟火秀。
一开始，我设想的是一个纯粹的视觉仪式：黑暗中突然升起一点光芒，划破寂静，然后在最高处轰然炸开，洒落满天星火。为了实现这种节奏感，我把每一束烟火都当作一个有"生命历程"的对象来设计。它要有起点------从地平线以下悄然出发；要有过程------缓慢而坚定地上升；更要有高潮------在恰当的时刻爆发成一片辉煌。这三个阶段构成了整个动画的灵魂。
我在脑海中反复观看真实的烟火视频，观察它们的运动轨迹与光色变化。我发现，真正的美不在于完美对称，而在于那种可控的随机：每一朵烟火的高度不同，颜色各异，爆炸的规模也不尽相同。于是，我为每一个参数都加入了随机因子------位置、速度、爆炸半径、色彩组合，但又将它们限制在美学可接受的区间内，避免画面变得杂乱无章。
最让我着迷的是爆炸效果的构建。我尝试过简单的散射粒子，但看起来像爆炸的碎片而非光芒。后来我想到，真实的烟火是向四面八方均匀扩散的，应该用极坐标来模拟。于是我以30度为间隔，从0到360度生成多个方向，每个方向上绘制层层递进的光点，再通过调整透明度和大小，营造出由近及远的光晕层次。我还加入了Y轴的动态偏移，让光点仿佛受到空气阻力般向上拉伸，形成那种熟悉的"蘑菇云"状扩散。
为了让画面不显得单调，我设置了多个烟火同时存在，有的正在升空，有的已在空中炸裂，有的则刚刚重生。它们彼此独立却又共同构成一幅流动的画卷。我特别注意了色彩的搭配，选用了高饱和度但不过于刺眼的颜色组合，既有红橙黄的温暖热烈，也有紫蓝青的冷艳神秘，让整个夜空充满节日的欢愉。
整个程序的核心在于"循环重生"的设计。我不希望烟火只是播放一次就消失，而是让它在完成使命后悄然退场，再从别处重新开始。这种生生不息的节奏，让静态的代码拥有了呼吸般的韵律。当我在深夜运行这个程序时，看着满屏光影交错，仿佛听到了遥远的欢呼声。那一刻，我知道，我不仅写了一段代码，更留住了一瞬即逝的浪漫。
写在后面
我是一只有趣的兔子，感谢你的喜欢！