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单位和监听窗口变化事件，确保页面在不同设备上都能良好显示。

五、总结

功能扩展：
- 可增加鼠标点击触发烟花效果的功能，提升互动性。
- 添加不同形状的烟花，例如星形、心形等，丰富视觉效果。
- 支持背景音乐播放，进一步增强节日气氛。
性能优化：
- 对粒子数量上限进行限制，以避免在低性能设备上出现卡顿。
- 使用offscreen canvas处理复杂计算，进一步提升渲染性能。
用户自定义：
- 提供一个控制面板，让用户自定义烟花颜色、大小、数量等参数。

这段代码实现了一个极具节日气氛的动态烟花效果，通过HTML、CSS和JavaScript的良好结合，不仅展现了动画设计的美感，还体现了较高的代码组织与性能优化水平。

写在后面

我是一只有趣的兔子，感谢你的喜欢。

系列文章

文章目录

写在前面

技术需求

完整代码