HTML炫酷烟花

fireworks

系列文章

序号	目录
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	HTML3D相册
14	HTML旋转相册
15	HTML基础烟花秀
16	HTML炫酷烟花秀
17	HTML粉色烟花秀
18	HTML新春烟花
19	HTML跨年烟花
20	HTML音乐圣诞树
21	HTML大雪纷飞
22	HTML想见你
23	HTML元素周期表
24	HTML飞舞的花瓣
25	HTML星空特效
26	HTML黑客帝国字母雨
27	HTML哆啦A梦
28	HTML流星雨
29	HTML沙漏爱心
30	HTML爱心字母雨
31	HTML爱心流星雨
32	HTML生日蛋糕
33	HTML3D旋转相册
34	HTML流光爱心
35	HTML满屏飘字
36	HTML飞舞爱心
37	HTML星空圣诞树
38	HTML礼物圣诞树
39	HTML粉色爱心
40	HTML旋转圣诞树

文章目录

系列文章
写在前面
技术需求
完整代码
代码分析
- 一、HTML结构分析
- 二、CSS样式分析
- 三、JavaScript实现功能分析
- - 1. 全局变量初始化
  - 2. 烟花和粒子类设计
  - - （1）`Firework`类
    - （2）`Particle`类
  - 3. 烟花效果的生成与动画
  - 4. 窗口自适应
- 四、代码运行机制与特点
- 五、总结
写在后面

写在前面

HTML语言实现新春烟花的完整代码。

技术需求

HTML5 Canvas
- 利用<canvas>标签及其2D绘图上下文（通过getContext("2d")获取）实现烟花动画的动态绘制。
CSS样式
- 采用绝对定位（position: absolute）确保文字居中显示。
- 运用视窗单位（vw）动态调整字体大小，并结合颜色渐变（text-shadow）提升视觉效果。
- 设置深色背景（background-color），以突出烟花的视觉冲击力。
JavaScript动画
- 面向对象编程：创建Firework和Particle类，封装烟花与粒子的行为属性（如位置、速度、透明度等）。
- 动画实现：借助requestAnimationFrame确保动画流畅运行；模拟真实物理效果，动态调整粒子的摩擦力、重力和透明度。
- 随机性：利用Math.random控制粒子的数量、颜色、方向和速度，生成多样化的烟花效果。
- 拖尾效果：每帧绘制半透明矩形，营造烟花拖尾的视觉效果。
事件监听
- 监听resize事件，动态调整<canvas>画布尺寸，以适应窗口大小的变化。

完整代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>新春烟花</title><style>body {margin: 0;overflow: hidden;background-color: #14141E;font-family: Arial, sans-serif;}canvas {display: block;}#text {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);font-size: 5vw;font-weight: bold;color: rgb(255, 190, 200);text-shadow: 2px 2px 10px rgba(255, 190, 200, 0.7);}</style>
</head>
<body><div id="text">Happy New Year!</div><canvas id="fireworks"></canvas><script>const canvas = document.getElementById("fireworks");const ctx = canvas.getContext("2d");canvas.width = window.innerWidth;canvas.height = window.innerHeight;const colors = ["#ff4d4d", "#ff9933", "#ffcc00", "#33cc33", "#33cccc", "#3399ff", "#cc66ff"];
……

代码分析

以下是对这段HTML代码的详细分析，从页面结构、样式设计到JavaScript实现功能进行全面解读：

一、HTML结构分析

文档声明与基本结构
- 代码以<!DOCTYPE html>开头，表明该文档遵循HTML5标准。
- <html>标签包含整个页面内容，并通过lang="en"属性指定页面语言为英语。
- <head>标签中定义了元信息：
  - <meta charset="UTF-8">确保页面使用UTF-8字符编码，保障字符正确显示。
  - <meta name="viewport" content="width=device-width, initial-scale=1.0">实现页面在不同设备上的自适应布局。
  - <title>标签定义页面标题为“新春烟花”。
- <body>标签内包含一个用于显示新年祝福文字的<div>元素和一个用于绘制烟花动画的<canvas>元素。
关键HTML元素
- <div id="text">: 显示“Happy New Year!”文字，增强节日氛围。
- <canvas id="fireworks">: 作为烟花动画的画布元素，提供动态展示的基础。

二、CSS样式分析

页面整体样式
- body样式：
  - margin: 0移除默认外边距，使内容充满页面。
  - overflow: hidden隐藏滚动条，避免影响动画效果。
  - background-color: #14141E设置深色背景，与明亮的烟花形成对比。
  - font-family: Arial, sans-serif定义页面字体。
canvas样式
- display: block消除画布默认的内边距和边框，使其完全平铺页面。
#text样式
- position: absolute使文字绝对定位。
- top: 50% 和 left: 50%将文字置于页面中心。
- transform: translate(-50%, -50%)精确居中，确保文字位置稳定。
- font-size: 5vw根据视口宽度动态调整文字大小。
- font-weight: bold加粗字体，突出显示。
- color: rgb(255, 190, 200)柔和的粉红色字体，增强节日氛围。
- text-shadow添加光晕效果，使文字更为亮丽。

三、JavaScript实现功能分析

JavaScript部分的核心是通过<canvas>元素生成和控制烟花的动画效果。代码逻辑分为以下几个部分：

1. 全局变量初始化

canvas和ctx：获取画布元素及其上下文，ctx用于调用绘图API。
colors：定义颜色数组，用于随机选择烟花颜色。

2. 烟花和粒子类设计

代码使用了两种类：Firework和Particle，分别描述烟花和烟花粒子。

（1）`Firework`类

构造函数：
- 参数x和y指定烟花初始位置。
- this.particles存储粒子对象数组。
- 调用createParticles方法生成粒子。
方法：
- createParticles：生成50到100个随机数量的粒子。
- update：更新每个粒子的状态（位置、透明度等），当粒子透明度降至0以下时，将其移除。
- draw：调用每个粒子的绘制方法。

（2）`Particle`类

构造函数：
- x和y为粒子初始位置。
- radius：粒子大小随机，范围在2到5之间。
- color：从颜色数组中随机选择颜色。
- angle：粒子初始运动方向随机。
- speed：粒子初速度随机，范围在2到7之间。
- friction和gravity：摩擦力和重力影响粒子运动。
- alpha：粒子透明度，用于渐隐效果。
方法：
- update：计算粒子的新位置，速度逐渐减小，同时透明度减少。
- draw：绘制带颜色的圆形粒子，透明度由globalAlpha控制。

3. 烟花效果的生成与动画

全局数组fireworks存储所有当前活动的烟花。
addFirework方法：在随机位置创建新的烟花并加入fireworks数组。
animate函数：
- 使用半透明矩形覆盖画布，产生拖影效果。
- 遍历fireworks数组，更新并绘制每个烟花对象，如果烟花的所有粒子消失，则将其移除。
- 使用Math.random() < 0.05控制新烟花生成的概率，保持动画间隔随机。
- 使用requestAnimationFrame保持动画连续性。

4. 窗口自适应

window.addEventListener("resize")监听窗口大小变化事件。
每当窗口调整大小时，更新画布尺寸以适应新尺寸。

四、代码运行机制与特点

烟花效果实现：
- 通过粒子生成与运动模拟烟花爆炸效果。
- 粒子的颜色、运动方向、速度等均为随机，增强视觉自然感。
- 每次刷新画布时保留上一帧的残影，形成拖尾效果。
节日氛围营造：
- 中心文字配合柔和背景和动态烟花，体现新年喜庆主题。
- 动态画面与静态文字结合，增加视觉层次感。
性能优化：
- 粒子通过alpha属性逐渐透明并移除，减少内存占用。
- 拖尾效果使用半透明矩形而非完全清空画布，降低绘制开销。
响应式设计：
- 使用vw单位和监听窗口变化事件，确保页面在不同设备上良好显示。