html烟花

作者：浪子无家发布日期:2026-07-02 浏览:70

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML 烟花</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
            background: black;
        }
        canvas {
            display: block;
        }
    </style>
</head>
<body>
    <canvas id="fireworksCanvas"></canvas>
    <script>
        // 获取画布和上下文
        const canvas = document.getElementById('fireworksCanvas');
        const ctx = canvas.getContext('2d');
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;

        // 定义烟花类
        class Firework {
            constructor(x, y) {
                this.x = x;
                this.y = y;
                this.particles = [];
                for (let i = 0; i < 100; i++) {
                    this.particles.push({
                        x: this.x,
                        y: this.y,
                        velocity: {
                            x: (Math.random() - 0.5) * 10,
                            y: (Math.random() - 0.5) * 10
                        },
                        color: `hsl(${Math.random() * 360}, 100%, 50%)`,
                        size: Math.random() * 4 + 1
                    });
                }
            }

            update() {
                this.particles.forEach(particle => {
                    particle.x += particle.velocity.x;
                    particle.y += particle.velocity.y;
                    particle.velocity.y += 0.1; // 加速度
                    particle.size -= 0.05; // 缩小

                    if (particle.size > 0) {
                        ctx.beginPath();
                        ctx.arc(particle.x, particle.y, particle.size, 0, Math.PI * 2);
                        ctx.fillStyle = particle.color;
                        ctx.fill();
                    }
                });

                // 清除消失的粒子
                this.particles = this.particles.filter(particle => particle.size > 0);
            }
        }

        let fireworks = [];

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

            fireworks.forEach(firework => firework.update());

            // 清除已完成的烟花
            fireworks = fireworks.filter(firework => firework.particles.length > 0);

            requestAnimationFrame(animate);
        }

        function spawnFirework() {
            const x = Math.random() * canvas.width;
            const y = Math.random() * canvas.height;
            fireworks.push(new Firework(x, y));
        }

        setInterval(spawnFirework, 500); // 每隔500毫秒生成一个烟花

        animate();
    </script>
</body>
</html>

解释说明：

这段代码实现了一个简单的 HTML5 烟花效果，主要由以下几个部分组成：

HTML 部分：创建了一个 <canvas> 元素用于绘制烟花。
CSS 部分：设置了页面背景为黑色，并确保画布占据整个窗口。
JavaScript 部分：
- 定义了一个 Firework 类，用于表示每个烟花。每个烟花包含多个粒子（particles），每个粒子有自己的位置、速度、颜色和大小。
- update 方法负责更新粒子的位置、速度和大小，并在画布上绘制它们。
- animate 函数是动画循环，每帧都会清除旧的粒子并更新新的粒子。
- spawnFirework 函数每隔 500 毫秒随机生成一个新的烟花。

通过这些代码，你可以在浏览器中看到不断绽放的烟花效果。

上一篇：html table合并单元格

下一篇：html整体居中代码