系列文章
文章目录
写在前面
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：获取画布元素及其绘图上下文。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的良好结合，展现了动画设计的美感和较高的代码组织与性能优化水平。
写在后面
我是一只有趣的兔子，感谢你的喜欢。
扫一扫
9万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
