网硕互联帮助中心
系列文章
|
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技术打造一场绚丽的新春烟花秀，献上最真挚的节日祝福。
技术需求
- 通过CSS设置html和body的宽高为100%，隐藏滚动条，确保视觉无干扰。
- 使用两个叠加的canvas元素，分别用于3D烟花动画与2D文字粒子效果，实现分层渲染，提升画面层次感。
- 实现rasterizePoint(x, y, z)函数，将三维坐标投影到二维屏幕，结合视角偏移（yaw、pitch）与距离缩放，构建逼真的空间透视效果。
- 管理玩家视角位置（playerX, playerY, playerZ），并通过正弦运动让视角缓慢环绕，增强沉浸式体验。
- 种子粒子（Seeds）：作为烟花升空的“引信”，具有初始速度与重力加速度，模拟抛物线轨迹。
- 火花粒子（Sparks）：在种子爆炸时生成，具备随机方向、速度、颜色与图像贴图，形成放射状爆炸效果。
- 拖尾绘制：记录火花运动轨迹，绘制渐变透明的连线，增强动态视觉冲击力。
- 使用requestAnimationFrame实现流畅动画循环，自动适配屏幕刷新率。
- 通过双缓冲机制避免闪烁，clearRect清空画布后重新绘制每一帧，保证动画连贯性。
- 预加载多种爆炸音效（pow1~pow4.ogg），在烟花炸裂时随机播放，音量随距离衰减，增强临场感。
- 每次爆炸触发独立Audio实例，支持重叠播放，还原真实烟花此起彼伏的声音环境。
- 利用第二个Canvas实现基于点阵的文字动画系统，支持倒计时、时间显示与自定义文本。
- 通过ShapeBuilder将文字渲染到离屏Canvas，再提取像素点阵生成粒子路径，实现字符渐变切换效果。
- 提供命令解析机制（以#开头），可模拟输入指令控制显示内容，如#countdown 3启动倒计时。
- 监听窗口resize事件，动态调整Canvas尺寸，确保在不同设备上全屏适配。
- 文字粒子系统根据屏幕大小自动缩放字体，保持居中与可读性。
主要代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>新春快乐</title>
<style>
html,
body {
margin: 0px;
width: 100%;
height: 100%;
overflow: hidden;
background: #000;
}
</style>
</head>
<body>
<canvas id="canvas" style="position:absolute;width:100%;height:100%;z-index:8888"></canvas>
<canvas style="position:absolute;width:100%;height:100%;z-index:9999" class="canvas"></canvas>
<div class="overlay">
<div class="tabs">
<div class="tabs-labels"><span class="tabs-label">Commands</span><span class="tabs-label">Info</span><span
class="tabs-label">Share</span></div>
<div class="tabs-panels">
<ul class="tabs-panel commands">
</ul>
</div>
</div>
</div>
<script>
function initVars() {
pi = Math.PI;
ctx = canvas.getContext("2d");
canvas.width = canvas.clientWidth;
canvas.height = canvas.clientHeight;
cx = canvas.width / 2;
cy = canvas.height / 2;
playerZ = -25;
playerX = playerY = playerVX = playerVY = playerVZ = pitch = yaw = pitchV = yawV = 0;
scale = 600;
seedTimer = 0; seedInterval = 5, seedLife = 100; gravity = .02;
seeds = new Array();
sparkPics = new Array();
s = "https://cantelope.org/NYE/";
for (i = 1; i <= 10; ++i) {
sparkPic = new Image();
sparkPic.src = s + "spark" + i + ".png";
sparkPics.push(sparkPic);
}
sparks = new Array();
pow1 = new Audio(s + "pow1.ogg");
pow2 = new Audio(s + "pow2.ogg");
pow3 = new Audio(s + "pow3.ogg");
pow4 = new Audio(s + "pow4.ogg");
frames = 0;
}
……
创作流程
我创作这段代码时，心中只有一个愿望：用代码点燃一场属于新春的烟花盛宴。这不是一次简单的动画实现，而是一场融合数学、物理、美学与情感的技术表达。我想让每一个看到它的人，都能在屏幕前感受到节日的温暖与震撼。
一开始，我决定采用HTML5 Canvas作为画布，因为它既轻量又强大，能在浏览器中直接呈现高性能图形。我设定了全黑背景，这是夜空最真实的底色——深邃、静谧，只为衬托那一瞬的璀璨。接着，我构建了一个三维空间模型，尽管Canvas本质上是二维的，但我通过坐标变换函数rasterizePoint，将x、y、z三维坐标投影到屏幕，实现了逼真的空间感。为了让观众“置身其中”，我设置了一个虚拟摄像机，让它缓慢旋转，仿佛我们正站在除夕夜的广场中央，抬头仰望。
烟花的核心在于“升空—爆炸—散落”的过程。于是我设计了两层粒子系统：首先是“种子”，它们从地面发射，带着微弱的光点垂直上升，模拟火箭升空的轨迹。我为它们加入了重力加速度，让运动更接近真实。当种子达到一定生命周期时，便会触发“爆炸”——这是我最用心设计的部分。每一次爆炸都会生成数十个火花粒子，它们从同一点向四面八方喷射，速度、角度、颜色、贴图都随机生成，确保每一场烟花都是独一无二的。我还为火花添加了拖尾效果，通过记录其历史坐标并绘制渐隐连线，还原出那种划破夜空的光痕。
为了让听觉与视觉同步，我引入了音效系统。四种不同的爆炸声被预加载，在每次炸裂时随机播放，并根据距离调整音量，营造出远近交错的立体声场。那一刻，代码不再只是逻辑的堆砌，而是变成了可听可感的情绪载体。
与此同时，我在画面顶层叠加了另一个Canvas，用来展示文字信息。我希望这场烟花秀不只是视觉冲击，还能传递祝福。于是我构建了一套基于点阵的文字渲染系统：将字符绘制到离屏Canvas，提取非透明像素作为粒子目标点，再让无数小点从四面八方汇聚成字。从“倒计时3”到“新春快乐”，每一个字的出现都像是一次仪式，庄重而温暖。
整个系统由requestAnimationFrame驱动，形成无限循环的动画帧。我不断调试参数——粒子数量、重力系数、爆炸频率、视角转速——直到画面既华丽又不卡顿，既热闹又不杂乱。最终，当所有元素协同运转：烟花此起彼伏，文字缓缓浮现，音效适时响起，我仿佛真的站在了新年的门槛上，听见了时光的回响。
这不仅是一段代码，更是我对节日的敬意，对美好的向往。我用算法写诗，用函数作画，只为在数字世界里，为你绽放一朵永不熄灭的烟火。
写在后面
我是一只有趣的兔子，感谢你的喜欢！
评论前必须登录！
注册