html爱心烟花特效代码

作者：看不见相思意发布日期:2025-08-17 浏览:78

<!DOCTYPE html>
<html lang="en">
<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: black;
        }
        canvas {
            display: block;
        }
    </style>
</head>
<body>
    <canvas id="fireworksCanvas"></canvas>
    <script>
        // 爱心烟花特效的JavaScript代码
        const canvas = document.getElementById('fireworksCanvas');
        const ctx = canvas.getContext('2d');
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;

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

            update() {
                this.x += this.speedX;
                this.y += this.speedY;
                if (this.size > 0.2) this.size -= 0.1;
            }

            draw() {
                ctx.fillStyle = this.color;
                ctx.beginPath();
                ctx.moveTo(this.x, this.y);
                ctx.bezierCurveTo(this.x - 5, this.y + 5, this.x + 5, this.y + 5, this.x, this.y + 10);
                ctx.bezierCurveTo(this.x + 5, this.y + 5, this.x - 5, this.y + 5, this.x, this.y);
                ctx.closePath();
                ctx.fill();
            }
        }

        let particles = [];

        function animate() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            particles.forEach((particle, index) => {
                particle.update();
                particle.draw();
                if (particle.size <= 0.3) {
                    particles.splice(index, 1);
                }
            });
            requestAnimationFrame(animate);
        }

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

        canvas.addEventListener('click', (event) => {
            const x = event.clientX;
            const y = event.clientY;
            spawnParticles(x, y);
        });

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

解释说明：

HTML结构：页面包含一个<canvas>元素，用于绘制烟花效果。
CSS样式：设置了页面背景为黑色，并隐藏了滚动条。
JavaScript逻辑：
- 定义了一个HeartParticle类来表示每个爱心粒子，包括其位置、大小、速度和颜色。
- update()方法更新粒子的位置和大小。
- draw()方法绘制爱心形状。
- animate()函数不断清除并重新绘制粒子，模拟动画效果。
- spawnParticles()函数在指定位置生成多个粒子。
- 监听鼠标点击事件，在点击位置生成烟花效果。

上一篇：html table border

下一篇：html

标签