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

用 HTML5 Canvas 和 JavaScript 实现炫酷跨年烟花特效

news 2026/4/7 14:21:27

一、引言

跨年夜，五彩斑斓、绚丽绽放的烟花是最令人期待的视觉盛宴之一。在网页端，我们能否通过技术手段复现这一梦幻场景呢？答案是肯定的。本文将深入剖析一段使用 HTML5 Canvas 和 JavaScript 实现的跨年烟花特效源码，带你领略前端技术创造的惊艳画面。

用 HTML5 Canvas 和 JavaScript 实现炫酷跨年烟花特效

二、整体架构分析

1，HTML 结构

<!DOCTYPE html>
<html lang="zh"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>跨年烟花特效</title><style>body,html {margin: 0;padding: 0;overflow: hidden;height: 100%;background-color: black;/* 设置背景颜色为黑色 */}canvas {display: block;/* 确保canvas元素以块级元素显示 */}</style>
</head><body><canvas id="fireworks"></canvas><!-- 创建一个canvas元素用于绘制烟花 -->
</body></html>

页面十分简洁，核心是一个 id 为 fireworks 的 元素，它就是我们绘制烟花的 “画布”。通过 JavaScript 代码将 canvas.width 和 canvas.height 设置为窗口的宽度和高度，使得烟花展示区域能自适应屏幕大小。同时，在 CSS 中把 body 和 html 的背景色设为黑色，隐藏溢出内容，以此营造出夜空般的氛围。

2，JavaScript 核心逻辑

代码主要围绕两个关键类 Firework 和 Particle 展开，以及一个动画函数 animate。fireworks 数组用于存储烟花对象，particles 数组用于存储烟花爆炸后产生的粒子对象。

三、Firework 类详解

1，构造函数

class Firework {constructor() {this.x = Math.random() * canvas.width; // 随机设置烟花的初始x坐标this.y = canvas.height; // 设置烟花的初始y坐标为画布底部this.targetY = Math

相关文章：

用 HTML5 Canvas 和 JavaScript 实现炫酷跨年烟花特效

一、引言 跨年夜，五彩斑斓、绚丽绽放的烟花是最令人期待的视觉盛宴之一。在网页端，我们能否通过技术手段复现这一梦幻场景呢？答案是肯定的。本文将深入剖析一段使用 HTML5 Canvas 和 JavaScript 实现的跨年烟花特效源码，带你领略前端技术创造的惊艳画面。 用 HTML5 Canvas…...

编程日记 2025/1/10 12:08:57

cat命令详解

&#x1f3dd;️专栏&#xff1a;https://blog.csdn.net/2301_81831423/category_12872319.html &#x1f305;主页&#xff1a;猫咪-9527-CSDN博客 “欲穷千里目&#xff0c;更上一层楼。会当凌绝顶&#xff0c;一览众山小。” cat 是 Linux/Unix 中的一个非常常用的命令&…...

编程日记 2025/1/10 12:07:56

el-table 自定义表头颜色

第一种方法&#xff1a;计算属性 <template><div><el-table:data"formData.detail"border stripehighlight-current-row:cell-style"{ text-align: center }":header-cell-style"headerCellStyle"><el-table-column fixed…...

编程日记 2025/1/10 12:06:55

window.print()预览时表格显示不全

问题描述&#xff1a;使用element的table组件&#xff0c;表格列宽为自适应&#xff0c;但使用window.print()方法预览的页面会直接按预览宽度截取表格内容进行展示&#xff0c;造成表格可能的显示不全问题 解决方法&#xff1a;添加如下样式 media print {::v-deep {// 表头…...

编程日记 2025/1/10 12:04:54

React Router底层核心原理详解

React Router 是一个功能强大的路由库&#xff0c;它允许开发者在 React 单页面应用&#xff08;SPA&#xff09;中实现客户端路由管理。React Router 通过匹配 URL 和组件的关系来实现页面的导航&#xff0c;它不仅提供了简单的 API&#xff0c;还在底层实现了复杂的 URL 匹配…...

编程日记 2025/1/10 12:00:49

linux MySQL 实时性能监控工具

在 Linux 上&#xff0c;有多个工具可以用于 实时监控 MySQL 的性能。根据你的需求&#xff0c;以下是常用的 MySQL 实时性能监控工具&#xff0c;包括轻量级的命令行工具和可视化监控工具。 &#x1f527; 1. MySQLTuner – 一键性能优化建议 ✅ 特点 快速分析 MySQL 的性能…...

编程日记 2025/1/10 11:58:47

ModuleNotFoundError: No module named ‘setuptools_rust‘ 解决方案

大家好，我是爱编程的喵喵。双985硕士毕业，现担任全栈工程师一职，热衷于将数据思维应用到工作与生活中。从事机器学习以及相关的前后端开发工作。曾在阿里云、科大讯飞、CCF等比赛获得多次Top名次。现为CSDN博客专家、人工智能领域优质创作者。喜欢通过博客创作的方式对所学的…...

编程日记 2025/1/10 11:54:40

基于Spring Boot的海滨体育馆管理系统的设计与实现

风定落花生&#xff0c;歌声逐流水&#xff0c;大家好我是风歌&#xff0c;混迹在java圈的辛苦码农。今天要和大家聊的是一款基于springboot的海滨体育馆管理系统的设计与实现。项目源码以及部署相关请联系风歌&#xff0c;文末附上联系信息 。 项目简介&#xff1a; 宠物医院…...

编程日记 2025/1/10 11:53:38

【机器视觉】OpenCV 图像轮廓（查找/绘制轮廓、轮廓面积/周长、多边形逼近与凸包、外接矩形）

文章目录 7. 图像轮廓7.1 什么是图像轮廓7.2 查找轮廓7.3 绘制轮廓7.4 轮廓的面积和周长7.5 多边形逼近与凸包7.6 外接矩形 OpenCV官网 7. 图像轮廓 7.1 什么是图像轮廓 图像轮廓是具有相同颜色或灰度的连续点的曲线. 轮廓在形状分析和物体的检测和识别中很有用。 轮廓的作用…...

编程日记 2025/1/10 11:52:37

深入浅出：React 前端框架解析与应用

引言 随着前端开发技术的不断发展&#xff0c;现代化的前端框架成为了提升开发效率、优化用户体验和构建复杂应用的关键工具。在众多的前端框架中&#xff0c;React凭借其简洁、高效、可扩展的特点&#xff0c;已成为目前最流行的前端框架之一。它由Facebook于2013年发布&…...

编程日记 2025/1/10 11:51:36

【网络安全设备系列】7、流量监控设备

0x00 定义: 网络流量控制是一种利用软件或硬件方式来实现对电脑网络流量的控制。它的最主要方法&#xff0c;是引入QoS的概念&#xff0c;从通过为不同类型的 网络数据包标记&#xff0c;从而决定数据包通行的优先次序。 0x01 类型: 流控技术分为两种&#xff1a; 一种是…...

编程日记 2025/1/10 11:50:35

qemu解析qcow文件

旧的 QEMU 图像格式&#xff0c;支持备份文件、紧凑图像文件、加密和压缩。 backing_file 基础镜像的文件名&#xff08;参见create子命令&#xff09; encryption 此选项已弃用&#xff0c;相当于encrypt.formataes encrypt.format 如果设置为aes&#xff0c;则图像将使用 128…...

编程日记 2025/1/10 11:49:31

免费网站源码下载指南：如何安全获取并降低开发成本

许多开发者或是需要建立网站的人&#xff0c;可以方便地获取免费网站源码。这样的下载能帮助他们降低开发费用&#xff0c;迅速构建起基本框架。但在此过程中&#xff0c;仍有许多需要注意的事项。 许多开发者或是需要建立网站的人&#xff0c;可以方便地获取免费网站源码。这…...

编程日记 2025/1/10 11:47:28

【Ubuntu】如何设置 Ubuntu 自动每日更新：轻松保持系统安全

如何设置 Ubuntu 自动每日更新&#xff1a;轻松保持系统安全 大家好&#xff01;今天我们来聊一个非常实用的话题——如何让 Ubuntu 系统自动每日更新。如果你是一个 Ubuntu 用户&#xff0c;尤其是服务器管理员&#xff0c;你可能会经常遇到这样的问题&#xff1a;系统需要频…...

编程日记 2025/1/10 11:46:23

江科大STM32入门——UART通信笔记总结

wx&#xff1a;嵌入式工程师成长日记 1、简介 简单双向串口通信有两根通信线(发送端TX和接收端RX)TX与RX要交叉连接当只需单向的数据传输时&#xff0c;可以只接一根通信线当电平标准不一致时&#xff0c;需要加电平转换芯片 传输模式&#xff1a;全双工&#xff1b;时钟&…...

编程日记 2025/1/10 11:44:20

github gitbook写书

github创建新的仓库 在仓库中添加目录 ‘SUMMARY.md # Summary * [简介](README.md)gitbook 新建一个site https://www.gitbook.com/ 注册账号 取名字 一路 next&#xff0c;注意选免费版 最后 gitbook同步到github 你在主页可以看到 刚刚的test网站 点击右上角圈出来…...

编程日记 2025/1/10 11:43:18

探秘MetaGPT：革新软件开发的多智能体框架（22/30）

一、MetaGPT 引发的 AI 变革浪潮 近年来&#xff0c;人工智能大模型领域取得了令人瞩目的进展&#xff0c;GPT-3、GPT-4、PaLM 等模型展现出了惊人的自然语言处理能力&#xff0c;仿佛为 AI 世界打开了一扇通往无限可能的大门。它们能够生成流畅的文本、回答复杂的问题、进行创…...

编程日记 2025/1/10 11:39:07

【优选算法】Binary-Blade：二分查找的算法刃（下）

文章目录 1.山脉数组的峰顶索引2.寻找峰值3.寻找旋转排序数组中的最小值4.点名希望读者们多多三连支持小编会继续更新你们的鼓励就是我前进的动力&#xff01; 本篇接上一篇二分查找&#xff0c;主要通过部分题目熟悉二分查找的进阶使用&#xff0c;重点强调二段性&#xff0c;…...

编程日记 2025/1/10 11:37:03

Improving Language Understanding by Generative Pre-Training GPT-1详细讲解

Improving Language Understanding by Generative Pre-Training 2018.06 GPT-1 0.有监督、半监督、无监督 CV&#xff1a;ImageNet pre-trained model NLP&#xff1a;pre-trained model? 在计算机视觉中任务包含分类、检测、分割&#xff0c;任务类别数少&#xff0c;对应…...

编程日记 2025/1/10 11:35:01

分治算法——优选算法

本章我们要学习的是分治算法&#xff0c;顾名思义就是分而治之&#xff0c;把大问题分为多个相同的子问题进行处理&#xff0c;其中我们熟知的快速排序和归并排序用的就是分治算法&#xff0c;所以我们需要重新回顾一下这两个排序。 一、快速排序&#xff08;三路划分&#xf…...

编程日记 2025/1/10 11:28:45

FastAPI中间件性能优化：从GZip压缩到异步日志的7个提速技巧

FastAPI中间件性能优化&#xff1a;从GZip压缩到异步日志的7个提速技巧 当你的FastAPI应用开始处理每秒数千甚至百万级的请求时&#xff0c;中间件可能成为性能瓶颈的隐形杀手。本文将揭示如何通过7个关键技巧&#xff0c;让你的中间件处理速度提升300%以上。 1. 理解中间件的性…...

编程新知 2026/4/7 14:11:52

BEV特征压缩算法：提升PETRv2模型推理效率的创新方案

BEV特征压缩算法&#xff1a;提升PETRv2模型推理效率的创新方案 1. 引言 在自动驾驶的3D感知领域&#xff0c;BEV&#xff08;鸟瞰图&#xff09;表示已经成为主流技术方向。PETRv2作为基于Transformer的先进3D检测模型&#xff0c;虽然精度表现出色&#xff0c;但其计算复杂…...

编程新知 2026/4/7 13:49:23

STM32CubeHAL 多外设仿真实战 | Proteus 8.15 驱动整合与调试技巧（LCD/OLED/温湿度/舵机/蜂鸣器）

1. 工程环境搭建与工具准备 第一次用Proteus仿真STM32时&#xff0c;我踩过一个坑&#xff1a;明明CubeMX生成的代码在开发板上运行正常&#xff0c;但仿真时外设死活不工作。后来发现是Proteus版本太旧&#xff0c;根本不支持HAL库模型。这里分享下经过验证的黄金组合&#xf…...

编程新知 2026/4/7 12:50:32

C语言实战：用栈结构解析括号匹配的三种典型错误

1. 为什么括号匹配是编程基本功 刚学C语言那会儿&#xff0c;我最怕遇到段错误(Segmentation Fault)。有次调试了整整两天&#xff0c;最后发现是少写了个右花括号。这种痛只有程序员才懂——括号就像代码的标点符号&#xff0c;漏一个整个程序就崩溃了。 用栈处理括号匹配之所…...

编程新知 2026/4/7 12:01:48

平衡小车建模避坑指南：为什么我算的A、B矩阵和别人的不一样？（牛顿法vs拉格朗日法）

平衡小车建模避坑指南&#xff1a;牛顿法与拉格朗日法的矩阵差异解析 第一次推导平衡小车状态空间方程时&#xff0c;发现自己的A、B矩阵和GitHub热门项目相差15%&#xff0c;那种感觉就像考试时所有步骤都检查过却依然对不上参考答案。这种困惑在控制理论初学者中极为常见——…...

编程新知 2026/4/7 10:24:27

38_一文讲清楚蓝牙协议栈和BLE协议

一、蓝牙协议栈概述1. 蓝牙协议栈的分类(1) 经典蓝牙协议栈&#xff08;BR/EDR&#xff09;a. 核心协议层i. 无线电层&#xff08;Radio&#xff09;⓵ 工作在 2.42.42.4 GHz 的 ISM 频段⓶ 采用跳频扩谱&#xff08;FHSS&#xff09;技术&#xff0c;每秒跳频 160016001600 次…...

编程新知 2026/4/7 9:51:46

【MicroPython】基于ESP32的REPL交互式在线仿真开发环境实战

1. 为什么你需要ESP32的MicroPython REPL环境 第一次接触MicroPython的开发者经常会问&#xff1a;为什么不用传统的C语言开发ESP32&#xff1f;这里有个很现实的痛点——当你需要快速验证一个硬件功能时&#xff0c;C语言那套编译、烧录、调试的流程实在太重了。我去年给团队…...

编程新知 2026/4/7 9:47:34

根据DNI、角度、光伏板参数等计算24小时光伏功率输出并用matlab编写MPPT追踪算法研究（Matlab代码实现）

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…...

编程新知 2026/4/7 9:12:55

5步构建炉石传说自动化系统：开源工具让日常任务效率提升500%

5步构建炉石传说自动化系统&#xff1a;开源工具让日常任务效率提升500% 【免费下载链接】Hearthstone-Script Hearthstone script&#xff08;炉石传说脚本&#xff09; 项目地址: https://gitcode.com/gh_mirrors/he/Hearthstone-Script 炉石传说自动化系统是一款能够…...

编程新知 2026/4/7 9:02:22

3分钟解锁QQ音乐加密文件：QMCDecode让你的音乐重获自由

3分钟解锁QQ音乐加密文件&#xff1a;QMCDecode让你的音乐重获自由 【免费下载链接】QMCDecode QQ音乐QMC格式转换为普通格式(qmcflac转flac&#xff0c;qmc0,qmc3转mp3, mflac,mflac0等转flac)&#xff0c;仅支持macOS&#xff0c;可自动识别到QQ音乐下载目录&#xff0c;默认…...

编程新知 2026/4/7 8:27:04