当前位置： 首页 > java >正文

HTML炫酷烟花

java 2025/6/25 14:25:24

fireworks

系列文章

序号目录
1HTML满屏跳动的爱心（可写字）
2HTML五彩缤纷的爱心
3HTML满屏漂浮爱心
4HTML情人节快乐
5HTML蓝色爱心射线
6HTML跳动的爱心（简易版）
7HTML粒子爱心
8HTML蓝色动态爱心
9HTML跳动的爱心（双心版）
10HTML橙色动态粒子爱心
11HTML旋转爱心
12HTML爱情树
13HTML3D相册
14HTML旋转相册
15HTML基础烟花秀
16HTML炫酷烟花秀
17HTML粉色烟花秀
18HTML新春烟花
19HTML跨年烟花
20HTML音乐圣诞树
21HTML大雪纷飞
22HTML想见你
23HTML元素周期表
24HTML飞舞的花瓣
25HTML星空特效
26HTML黑客帝国字母雨
27HTML哆啦A梦
28HTML流星雨
29HTML沙漏爱心
30HTML爱心字母雨
31HTML爱心流星雨
32HTML生日蛋糕
33HTML3D旋转相册
34HTML流光爱心
35HTML满屏飘字
36HTML飞舞爱心
37HTML星空圣诞树
38HTML礼物圣诞树
39HTML粉色爱心
40HTML旋转圣诞树

文章目录

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

写在前面

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

技术需求

  1. HTML5 Canvas

    • 利用<canvas>标签及其2D绘图上下文（通过getContext("2d")获取）实现烟花动画的动态绘制。

  2. CSS样式

    • 采用绝对定位（position: absolute）确保文字居中显示。
    • 运用视窗单位（vw）动态调整字体大小，并结合颜色渐变（text-shadow）提升视觉效果。
    • 设置深色背景（background-color），以突出烟花的视觉冲击力。

  3. JavaScript动画

    • 面向对象编程：创建Firework和Particle类，封装烟花与粒子的行为属性（如位置、速度、透明度等）。
    • 动画实现：借助requestAnimationFrame确保动画流畅运行；模拟真实物理效果，动态调整粒子的摩擦力、重力和透明度。
    • 随机性：利用Math.random控制粒子的数量、颜色、方向和速度，生成多样化的烟花效果。
    • 拖尾效果：每帧绘制半透明矩形，营造烟花拖尾的视觉效果。

  4. 事件监听

    • 监听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结构分析

  1. 文档声明与基本结构

    • 代码以<!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>元素。

  2. 关键HTML元素

    • <div id="text">: 显示“Happy New Year!”文字，增强节日氛围。
    • <canvas id="fireworks">: 作为烟花动画的画布元素，提供动态展示的基础。

二、CSS样式分析

  1. 页面整体样式

    • body样式：
      • margin: 0移除默认外边距，使内容充满页面。
      • overflow: hidden隐藏滚动条，避免影响动画效果。
      • background-color: #14141E设置深色背景，与明亮的烟花形成对比。
      • font-family: Arial, sans-serif定义页面字体。

  2. canvas样式

    • display: block消除画布默认的内边距和边框，使其完全平铺页面。

  3. #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")监听窗口大小变化事件。
  • 每当窗口调整大小时，更新画布尺寸以适应新尺寸。

四、代码运行机制与特点

  1. 烟花效果实现：

    • 通过粒子生成与运动模拟烟花爆炸效果。
    • 粒子的颜色、运动方向、速度等均为随机，增强视觉自然感。
    • 每次刷新画布时保留上一帧的残影，形成拖尾效果。

  2. 节日氛围营造：

    • 中心文字配合柔和背景和动态烟花，体现新年喜庆主题。
    • 动态画面与静态文字结合，增加视觉层次感。

  3. 性能优化：

    • 粒子通过alpha属性逐渐透明并移除，减少内存占用。
    • 拖尾效果使用半透明矩形而非完全清空画布，降低绘制开销。

  4. 响应式设计：

    • 使用vw单位和监听窗口变化事件，确保页面在不同设备上良好显示。

五、总结

  1. 功能扩展：

    • 可增加鼠标点击触发烟花效果的功能，提升互动性。
    • 添加不同形状的烟花，丰富视觉效果。
    • 支持背景音乐播放，进一步增强节日气氛。

  2. 性能优化：

    • 对粒子数量上限进行限制，避免低性能设备卡顿。
    • 使用offscreen canvas处理复杂计算，提升渲染性能。

  3. 用户自定义：

    • 提供控制面板，让用户自定义烟花颜色、大小、数量等参数。

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

写在后面

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

http://www.xdnf.cn/news/14614.html

相关文章：

  • 微算法科技开发基于布尔函数平方和表示形式的最优精确量子查询算法
  • NLP基础1_word-embedding
  • 利用大型语言模型增强边缘云 AI 系统安全性
  • AI智能化高效办公：WPS AI全场景深度应用指南
  • qt常用控件--03
  • 重点解析（软件工程）
  • 从零学习linux（2）——管理
  • 2025年检测相机十大品牌测评：工业级精度与场景化解决方案解析
  • DeepSeek今天喝什么随机奶茶推荐器
  • Docker知识点汇总——AI教你学Docker
  • 企业主动风险管理破局供应链“黑天鹅”，善用期货
  • Origin绘制三Y轴柱状图、点线图、柱状点线图
  • Spark基于Bloom Filter算法的Runtime Filter Join优化机制
  • STM32 串口通信②：蓝牙模块HC-05控制单片机
  • 以玄幻小说方式打开深度学习词嵌入算法！！ 使用Skip-gram来完成 Word2Vec 词嵌入（Embedding）
  • Maven 多模块项目调试与问题排查总结
  • Elasticsearch 索引文档的流程
  • 酒店住宿自助入住系统——店铺自动运营—仙盟创梦IDE
  • 【达梦数据库】忘记SYSDBA密码处理方法-已适配
  • Python导论、数据类型、运算、I/O
  • 华大北斗TAU951M-P200单频定位模块 多系统冗余保障永不掉线 物流/车载导航首选
  • MySQL学习(1)——基础库操作
  • 开关电源：BUCK和BOOST
  • 逆向某物 App 登录接口：还原 newSign 算法全流程
  • 《情感反诈模拟器》2025学习版
  • 装配体镜像阵列与爆炸视图-装配体设计技能（2）
  • 算法-动态规划-钢条切割问题
  • 数智管理学（二十四）
  • C# Quartz.net 定时任务
  • Java Spring框架的核心原理详解