<!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;}canvas {display: block;}</style>
</head><body><canvas id="canvas"></canvas><script>const canvas = document.getElementById('canvas');const ctx = canvas.getContext('2d');canvas.width = window.innerWidth;canvas.height = window.innerHeight;// 爱心类class Heart {constructor() {this.x = Math.random() * canvas.width;this.y = Math.random() * -canvas.height;this.size = Math.random() * 10 + 10;this.speed = Math.random() * 2 + 1;}draw() {ctx.beginPath();const t = Date.now() / 1000;const x = 16 * Math.pow(Math.sin(t), 3);const y = 13 * Math.cos(t) - 5 * Math.cos(2 * t) - 2 * Math.cos(3 * t) - Math.cos(4 * t);const scaledX = this.x + x * this.size;const scaledY = this.y - y * this.size;ctx.moveTo(scaledX, scaledY);ctx.bezierCurveTo(scaledX + this.size, scaledY - this.size, scaledX + 2 * this.size, scaledY + this.size, scaledX, scaledY + 2 * this.size);ctx.bezierCurveTo(scaledX - 2 * this.size, scaledY + this.size, scaledX - this.size, scaledY - this.size, scaledX, scaledY);ctx.fillStyle = 'red';ctx.fill();}move() {this.y += this.speed;if (this.y > canvas.height) {this.y = -this.size;this.x = Math.random() * canvas.width;}}}// 创建爱心数组const hearts = [];for (let i = 0; i < 100; i++) {hearts.push(new Heart());}// 动画循环function animate() {ctx.clearRect(0, 0, canvas.width, canvas.height);hearts.forEach(heart => {heart.draw();heart.move();});requestAnimationFrame(animate);}animate();// 鼠标互动canvas.addEventListener('mousemove', (e) => {const mouseX = e.clientX;const mouseY = e.clientY;hearts.forEach(heart => {const dx = mouseX - heart.x;const dy = mouseY - heart.y;const distance = Math.sqrt(dx * dx + dy * dy);if (distance < 100) {const angle = Math.atan2(dy, dx);heart.x -= Math.cos(angle) * 2;heart.y -= Math.sin(angle) * 2;}});});</script>
</body></html>
