效果演示
html 代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Confetti Explosion</title>
<style>
body, html {margin: 0;padding: 0;height: 100%;overflow: hidden;}
#confettiCanvas {background-color: #1a202c;position: absolute;top: 0;left: 0;}
.instruction {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);color: white;font-family: Arial, sans-serif;font-size: 24px;font-weight: bold;text-align: center;pointer-events: none;}
</style>
</head>
<body>
<canvas id="confettiCanvas"></canvas>
<p class="instruction">移动鼠标创造五彩纸条哦！</p>
<script>
const canvas = document.getElementById("confettiCanvas");const ctx = canvas.getContext("2d");const colors = ["#FF3F8E", "#04C2C9", "#2E55C1", "#F9D423"];let particles = [];let mousePos = { x: 0, y: 0 };
class Particle {constructor(x, y, size, color, speedX, speedY) {this.x = x;this.y = y;this.size = size;this.color = color;this.speedX = speedX;this.speedY = speedY;}update() {this.x += this.speedX;this.y += this.speedY;this.size *= 0.98; }draw() {ctx.fillStyle = this.color;ctx.beginPath();ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);ctx.closePath();ctx.fill();}}
function resizeCanvas() {canvas.width = window.innerWidth;canvas.height = window.innerHeight;}
function createExplosion(x, y) {const particleCount = 50;for (let i = 0; i < particleCount; i++) {const size = Math.random() * 5 + 2;const color = colors[Math.floor(Math.random() * colors.length)];const speedX = (Math.random() * 2 - 1) * 2;const speedY = (Math.random() * 2 - 1) * 2;particles.push(new Particle(x, y, size, color, speedX, speedY));}}
function animate() {ctx.clearRect(0, 0, canvas.width, canvas.height);
particles = particles.filter((particle) => {particle.update();particle.draw();return particle.size > 0.5;});requestAnimationFrame(animate);}
function handleMouseMove(event) {mousePos.x = event.clientX;mousePos.y = event.clientY;}resizeCanvas();animate();window.addEventListener("resize", resizeCanvas);canvas.addEventListener("mousemove", handleMouseMove);setInterval(() => {createExplosion(mousePos.x, mousePos.y);}, 50);
</script>
</body>
</html>
