新春烟花特效 HTML：打造你的节日专属网页

默语

发布于 2025-01-20 18:57:17

23100

代码可运行

文章被收录于专栏：JAVAJAVA

运行总次数：0

代码可运行

摘要每逢新春佳节，烟花总能为节日增添一份热闹和喜庆。如何用HTML和JavaScript在网页上实现炫丽的烟花特效呢？本文将从零开始，带领小白用户创建一个简单却生动的烟花效果。无论你是初学者还是有一定经验的开发者，这篇文章都将为你提供详细的实现步骤与代码示例。

引言

烟花特效是许多节日主题网页中的亮点，为用户带来愉悦的视觉体验。通过学习和实现这个效果，你不仅可以提升自己的前端开发技能，还能让你的网页更具吸引力。本文将结合HTML5的 <canvas> 元素与JavaScript，手把手教你如何实现一个动态烟花特效。

新春烟花特效 HTML：打造你的节日专属网页

正文

1. 准备工作

在开始之前，你需要以下工具：

一台可以运行现代浏览器的电脑（推荐使用Chrome或Firefox）。
一个简单的文本编辑器，例如VS Code或Notepad++。

文件结构

创建一个新文件夹，并包含以下文件：

fireworks/
├── index.html
├── style.css
└── script.js

2. HTML 结构

首先，我们需要一个基本的HTML文件。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>新春烟花特效</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <canvas id="fireworks"></canvas>
    <script src="script.js"></script>
</body>
</html>

这里的 <canvas> 元素是绘制烟花的核心区域，我们将在JavaScript中对其进行操作。

3. 添加样式

我们需要为 <canvas> 设置样式，让它占满整个屏幕。

/* style.css */
body {
    margin: 0;
    overflow: hidden;
    background: #000;
}

canvas {
    display: block;
    width: 100vw;
    height: 100vh;
}

4. 实现烟花特效

下面是实现烟花特效的主要代码。

初始化画布

首先，在 script.js 中获取 <canvas> 元素，并设置其尺寸：

const canvas = document.getElementById('fireworks');
const ctx = canvas.getContext('2d');

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) {
        this.x = x;
        this.y = y;
        this.color = color;
        this.radius = Math.random() * 2 + 1;
        this.velocityX = (Math.random() - 0.5) * 8;
        this.velocityY = (Math.random() - 0.5) * 8;
        this.alpha = 1;
    }

    draw() {
        ctx.save();
        ctx.globalAlpha = this.alpha;
        ctx.beginPath();
        ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
        ctx.fillStyle = this.color;
        ctx.fill();
        ctx.restore();
    }

    update() {
        this.x += this.velocityX;
        this.y += this.velocityY;
        this.alpha -= 0.02;
    }
}

生成随机颜色

function randomColor() {
    const colors = ['#ff0000', '#ff7f00', '#ffff00', '#00ff00', '#0000ff', '#4b0082', '#8f00ff'];
    return colors[Math.floor(Math.random() * colors.length)];
}

动画循环

最后，将粒子集合组合到动画中：

let particles = [];

function createFirework(x, y) {
    for (let i = 0; i < 100; i++) {
        particles.push(new Particle(x, y, randomColor()));
    }
}

function animate() {
    ctx.fillStyle = 'rgba(0, 0, 0, 0.1)';
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    particles = particles.filter(p => p.alpha > 0);

    particles.forEach(particle => {
        particle.update();
        particle.draw();
    });

    requestAnimationFrame(animate);
}

canvas.addEventListener('click', (e) => {
    createFirework(e.clientX, e.clientY);
});

animate();

5. 效果预览

完成上述代码后，打开 index.html，点击屏幕任意位置，你会看到炫丽的烟花效果！

总结

通过本教程，我们学会了如何利用HTML5的 <canvas> 元素与JavaScript创建一个炫丽的新春烟花特效。这个项目虽然简单，却涉及了粒子系统、动画循环等重要概念，是学习前端开发的一个有趣实践。

如果你有任何疑问，或者希望了解更多前端开发的知识，欢迎添加我的微信与我交流！

自己做的一个小的烟花绽放的demo(完整带阿米)

<!DOCTYPE html>
<html lang="zh-CN">
<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: black;
        }
        canvas {
            display: block;
        }
    </style>
</head>
<body>
    <canvas id="fireworksCanvas"></canvas>
    <script>
        window.onload = function() {
            const canvas = document.getElementById('fireworksCanvas');
            const ctx = canvas.getContext('2d');
            resizeCanvas();

            const colors = [
                '255,99,71', '135,206,250', '50,205,50', '255,215,0', 
                '218,112,214', '255,140,0', '75,0,130', '255,20,147'
            ];
            const fireworks = [];

            function resizeCanvas() {
                canvas.width = window.innerWidth;
                canvas.height = window.innerHeight;
            }

            window.addEventListener('resize', resizeCanvas);

            function Particle(x, y, color) {
                const angle = Math.random() * Math.PI * 2; // Random angle
                const speed = Math.random() * 3 + 2; // Random speed
                this.x = x;
                this.y = y;
                this.vx = Math.cos(angle) * speed;
                this.vy = Math.sin(angle) * speed;
                this.life = 150;
                this.color = color;
                this.shape = Math.random() > 0.5 ? 'circle' : 'line'; // Random shape
            }

            function initFirework() {
                const x = Math.random() * canvas.width;
                const y = canvas.height;
                const v = Math.random() * 5 + 5;
                const color = colors[Math.floor(Math.random() * colors.length)];
                const height = Math.random() * canvas.height / 2 + canvas.height / 4; // Random height
                const firework = { x, y, v, color, height, particles: [] };
                fireworks.push(firework);
            }

            function updateFireworks() {
                for (let i = fireworks.length - 1; i >= 0; i--) {
                    const firework = fireworks[i];
                    if (firework.y > firework.height) {
                        firework.y -= firework.v;
                        ctx.beginPath();
                        ctx.arc(firework.x, firework.y, 3, 0, 2 * Math.PI);
                        ctx.fillStyle = `rgb(${firework.color})`;
                        ctx.fill();
                    } else {
                        if (firework.particles.length === 0) {
                            for (let j = 0; j < 200; j++) { // Increased particles
                                firework.particles.push(new Particle(firework.x, firework.y, firework.color));
                            }
                        }
                        for (let j = firework.particles.length - 1; j >= 0; j--) {
                            const particle = firework.particles[j];
                            particle.x += particle.vx;
                            particle.y += particle.vy;
                            particle.vy += 0.02; // Slight gravity
                            particle.life--;
                            const alpha = particle.life / 150;
                            ctx.fillStyle = `rgba(${particle.color},${alpha})`;

                            if (particle.shape === 'circle') {
                                ctx.beginPath();
                                ctx.arc(particle.x, particle.y, 2, 0, 2 * Math.PI);
                                ctx.fill();
                            } else if (particle.shape === 'line') {
                                ctx.beginPath();
                                ctx.moveTo(particle.x, particle.y);
                                ctx.lineTo(particle.x - particle.vx * 2, particle.y - particle.vy * 2);
                                ctx.strokeStyle = ctx.fillStyle;
                                ctx.stroke();
                            }

                            if (particle.life <= 0) {
                                firework.particles.splice(j, 1);
                            }
                        }
                        if (firework.particles.length === 0) {
                            fireworks.splice(i, 1);
                        }
                    }
                }
            }

            function animate() {
                ctx.clearRect(0, 0, canvas.width, canvas.height);
                updateFireworks();
                requestAnimationFrame(animate);
            }

            setInterval(initFirework, 100); // More frequent fireworks
            animate();
        };
    </script>
</body>
</html>

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2025-01-12，如有侵权请联系 cloudcommunity@tencent.com 删除

动画