烟花html

作者：自然ㄣ之光发布日期:2025-11-13 浏览:24

<!DOCTYPE html>
<html>
<head>
    <title>烟花效果</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
            background: black;
        }
        canvas {
            display: block;
        }
    </style>
</head>
<body>
    <canvas id="fireworks"></canvas>
    <script>
        // 烟花效果的JavaScript代码
        const canvas = document.getElementById('fireworks');
        const ctx = canvas.getContext('2d');
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;

        class Particle {
            constructor(x, y) {
                this.x = x;
                this.y = y;
                this.color = `hsl(${Math.random() * 360}, 100%, 50%)`;
                this.size = Math.random() * 5 + 1;
                this.speedX = (Math.random() - 0.5) * 10;
                this.speedY = (Math.random() - 0.5) * 10;
                this.gravity = 0.1;
                this.friction = 0.97;
            }

            update() {
                this.speedY += this.gravity;
                this.x += this.speedX;
                this.y += this.speedY;
                this.speedX *= this.friction;
                this.speedY *= this.friction;
            }

            draw() {
                ctx.fillStyle = this.color;
                ctx.beginPath();
                ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
                ctx.closePath();
                ctx.fill();
            }
        }

        class Firework {
            constructor(x, y) {
                this.particles = [];
                for (let i = 0; i < 100; i++) {
                    this.particles.push(new Particle(x, y));
                }
            }

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

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

        let fireworks = [];

        function animate() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            fireworks.forEach(firework => {
                firework.update();
                firework.draw();
            });
            fireworks = fireworks.filter(firework => firework.particles.some(particle => particle.size > 0.1));
            requestAnimationFrame(animate);
        }

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

        setInterval(spawnFirework, 1000);

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

解释说明

这段代码创建了一个简单的烟花效果。它使用HTML5的<canvas>元素来绘制动画，并通过JavaScript实现烟花的逻辑。

HTML部分：定义了一个全屏的<canvas>元素，用于绘制烟花。
CSS部分：设置了页面背景为黑色，并隐藏了滚动条。
JavaScript部分：
- 定义了两个类：Particle（粒子）和Firework（烟花）。
- Particle类表示单个粒子，具有位置、颜色、大小和速度等属性，并且可以更新和绘制自己。
- Firework类表示一个烟花，由多个粒子组成，可以更新和绘制这些粒子。
- animate函数负责每一帧的绘制和更新。
- spawnFirework函数随机生成新的烟花，并每隔一秒调用一次。

这样，你就可以在浏览器中看到一个动态的烟花效果。

上一篇：html 设置字体

下一篇：html中的空格