❤️创意网页：HTML5 Canvas技术实现绚丽多彩的烟花特效

✨博主：命运之光

🌸专栏：Python星辰秘典

🐳专栏：web开发（简单好用又好看）

❤️专栏：Java经典程序设计

☀️博主的其他文章：点击进入博主的主页

前言：欢迎踏入我的Web项目专栏，一段神奇而令人陶醉的数字世界！

🌌在这里，我将带您穿越时空，揭开属于Web的奥秘。通过HTML、CSS和JavaScript的魔力，我创造了一系列令人惊叹的Web项目，它们仿佛是从梦境中涌现而出。

🌌在这个专栏中，您将遇到华丽的界面，如流星划过夜空般迷人；您将感受到动态的交互，如魔法般让您沉浸其中；您将探索响应式设计的玄妙，让您的屏幕变幻出不同的绚丽景象。

🌌无论您是一个探险家还是一位嗜血的代码巫师，这个专栏将成为您的魔法书。我将分享每个项目的秘密，解开编码的谜题，让您也能够拥有制作奇迹的力量。

🌌准备好了吗？拿起您的键盘，跟随我的指引，一起进入这个神秘而充满惊喜的数字王国。在这里，您将找到灵感的源泉，为自己创造出一段奇幻的Web之旅！

引言

动态图展示

静态图展示

图1

图2

准备工作

代码解析

HTML结构

JavaScript代码

项目完整代码

代码的使用方法（超简单什么都不用下载）

🍓1.打开记事本

🍓2.将上面的源代码复制粘贴到记事本里面将文件另存为HTML文件点击保存即可

🍓3.打开html文件（大功告成(●'◡'●)）

结语

引言

烟花特效一直以来都是网页设计中的热门元素之一，它能够为用户带来视觉上的愉悦和惊喜。在这篇技术博客中，我们将使用HTML5 Canvas和JavaScript来实现一个绚丽多彩的烟花特效。我们将逐步解释代码的不同部分，介绍如何利用Canvas API和动画效果来创造这个引人注目的效果。

动态图展示

静态图展示

图1

图2

准备工作

在开始之前，我们需要了解一些基本知识。Canvas是HTML5新增的一个2D绘图API，它允许我们通过JavaScript来绘制图形、动画和特效。在本次实现中，我们将使用Canvas来生成烟花爆炸的效果，并通过动画来让烟花绽放在屏幕上。

代码解析

我们将按照代码的结构来逐步解析烟花特效的实现。

HTML结构

首先，我们在HTML文件中添加了一个<canvas>元素，用于在其中绘制烟花。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Fireworks Effect</title><style>body {margin: 0;overflow: hidden;background-color: black;}canvas {display: block;}</style>
</head>
<body><canvas id="fireworksCanvas"></canvas><!-- JavaScript代码将在这里插入 -->
</body>
</html>

JavaScript代码

接下来，让我们来看一下JavaScript部分的代码。

首先，我们创建一个Particle类，用于表示烟花爆炸后的每个粒子效果。每个粒子的位置、颜色、速度和透明度都是随机生成的，以达到多样化的效果。

接着，我们创建了Firework类，用于表示完整的烟花效果。每个烟花爆炸时，会产生多个粒子效果。

在animate函数中，我们通过调用requestAnimationFrame来实现动画效果，每帧都会更新画布和粒子的状态，并进行绘制。

最后，在setInterval函数中，我们定时触发烟花的生成，以便让烟花不断地绽放在画布上。

const canvas = document.getElementById('fireworksCanvas');
const ctx = canvas.getContext('2d');
let fireworks = [];canvas.width = window.innerWidth;
canvas.height = window.innerHeight;window.addEventListener('resize', () => {canvas.width = window.innerWidth;canvas.height = window.innerHeight;
});class Particle {constructor(x, y, color, velocityX, velocityY) {this.x = x;this.y = y;this.color = color;this.velocityX = velocityX;this.velocityY = velocityY;this.radius = 2.5;this.opacity = 1;}update() {this.x += this.velocityX;this.y += this.velocityY;this.velocityY += 0.1;this.opacity -= 0.01;}draw(ctx) {ctx.beginPath();ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);ctx.fillStyle = this.color;ctx.globalAlpha = this.opacity;ctx.shadowBlur = 10;ctx.shadowColor = this.color;ctx.fill();}
}class Firework {constructor(x, y) {this.x = x;this.y = canvas.height; // 从画布底部发射this.particles = [];this.velocityY = -10; // 初始向上速度for (let i = 0; i < 50; i++) {const color = `hsl(${Math.random() * 360}, 100%, 50%)`;const velocityX = (Math.random() - 0.5) * 6;this.particles.push(new Particle(x, y, color, velocityX, this.velocityY));}}update() {this.particles.forEach(particle => particle.update());}draw(ctx) {this.particles.forEach(particle => particle.draw(ctx));}
}function animate() {ctx.fillStyle = 'rgba(0, 0, 0, 0.1)';ctx.fillRect(0, 0, canvas.width, canvas.height);fireworks.forEach((firework, index) => {if (firework.particles[0].opacity <= 0) {fireworks.splice(index, 1);} else {firework.update();firework.draw(ctx);}});requestAnimationFrame(animate);
}// 定时触发烟花效果
setInterval(() => {for (let i = 0; i < 25; i++) {const x = Math.random() * canvas.width;const y = Math.random() * (canvas.height / 2) + canvas.height / 2;fireworks.push(new Firework(x, y));}
}, 2000); // 每2秒触发一次烟花效果// 启动动画
animate();

项目完整代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Fireworks Effect</title><style>body {margin: 0;overflow: hidden;background-color: black;}canvas {display: block;}</style>
</head>
<body><canvas id="fireworksCanvas"></canvas><script>const canvas = document.getElementById('fireworksCanvas');const ctx = canvas.getContext('2d');let fireworks = [];// 设置画布大小canvas.width = window.innerWidth;canvas.height = window.innerHeight;// 监听窗口大小变化window.addEventListener('resize', () => {canvas.width = window.innerWidth;canvas.height = window.innerHeight;});class Particle {constructor(x, y, color, velocityX, velocityY) {this.x = x;this.y = y;this.color = color;this.velocityX = velocityX;this.velocityY = velocityY;this.radius = 2.5;this.opacity = 1;}update() {this.x += this.velocityX;this.y += this.velocityY;this.velocityY += 0.1;this.opacity -= 0.01;}draw(ctx) {ctx.beginPath();ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);ctx.fillStyle = this.color;ctx.globalAlpha = this.opacity;ctx.shadowBlur = 10;ctx.shadowColor = this.color;ctx.fill();}}class Firework {constructor(x, y) {this.x = x;this.y = canvas.height; // Set the starting position at the bottom of the canvasthis.particles = [];this.velocityY = -10; // Initial upward velocityfor (let i = 0; i < 50; i++) {const color = `hsl(${Math.random() * 360}, 100%, 50%)`;const velocityX = (Math.random() - 0.5) * 6;this.particles.push(new Particle(x, y, color, velocityX, this.velocityY));}}update() {this.particles.forEach(particle => particle.update());}draw(ctx) {this.particles.forEach(particle => particle.draw(ctx));}}function animate() {ctx.fillStyle = 'rgba(0, 0, 0, 0.1)';ctx.fillRect(0, 0, canvas.width, canvas.height);fireworks.forEach((firework, index) => {if (firework.particles[0].opacity <= 0) {fireworks.splice(index, 1);} else {firework.update();firework.draw(ctx);}});requestAnimationFrame(animate);}// 自动触发烟花效果setInterval(() => {for (let i = 0; i < 25; i++) {const x = Math.random() * canvas.width;const y = Math.random() * (canvas.height / 2) + canvas.height / 2;fireworks.push(new Firework(x, y));}}, 2000); // Fireworks will be triggered every 2 seconds// 启动动画animate();</script>
</body>
</html>