<html><head> <title>平滑中心流星雨</title> <style> body { margin: 0; overflow: hidden; background: #000; } 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 Meteor { constructor() { this.active = false; this.delay = Math.random() * 3000; // 初始随机延迟（0-3秒） this.trail = []; } reset() { this.x = canvas.width/2; this.y = canvas.height/2; this.angle = Math.random() * Math.PI * 2; this.speed = Math.random() * 3 + 1; this.size = Math.random() * 1 + 0.5; this.trailLength = 10 + Math.random() * 8; this.maxDistance = Math.hypot(canvas.width, canvas.height) * 1.2; this.active = true; } update() { if (!this.active) { this.delay -= 16; if (this.delay <= 0) this.reset(); return; } // 轨迹管理 this.trail.push({ x: this.x, y: this.y }); if (this.trail.length > this.trailLength) this.trail.shift(); // 位置更新 this.x += Math.cos(this.angle) * this.speed; this.y += Math.sin(this.angle) * this.speed; // 渐显计算 const dx = this.x - canvas.width/2; const dy = this.y - canvas.height/2; this.alpha = Math.min(Math.hypot(dx, dy) / 80, 1); // 边界重置 if (Math.abs(dx) > this.maxDistance || Math.abs(dy) > this.maxDistance) { this.active = false; this.delay = 100 + Math.random() * 500; // 重生间隔0.1-0.6秒 this.trail = []; } } draw() { if (!this.active) return; // 绘制尾迹 this.trail.forEach((pos, i) => { const ratio = i / this.trailLength; ctx.beginPath(); ctx.arc(pos.x, pos.y, this.size * (1 - ratio) * 0.6, 0, Math.PI*2); ctx.fillStyle = `rgba(255,255,255,${(1 - ratio) * 0.3 * this.alpha})`; ctx.fill(); }); // 绘制头部 ctx.beginPath(); ctx.arc(this.x, this.y, this.size, 0, Math.PI*2); ctx.fillStyle = `rgba(255,255,255,${this.alpha})`; ctx.fill(); } } // 创建流星池（数量增加到150） const meteors = Array(150).fill().map(() => new Meteor()); function animate() { ctx.fillStyle = 'rgba(0, 0, 0, 0.05)'; ctx.fillRect(0, 0, canvas.width, canvas.height); meteors.forEach(meteor => { meteor.update(); meteor.draw(); }); requestAnimationFrame(animate); } window.addEventListener('resize', () => { canvas.width = window.innerWidth; canvas.height = window.innerHeight; meteors.forEach(meteor => { if (meteor.active) meteor.reset(); }); }); animate(); </script></body></html>xxxxxxxxxxxxxxxxxxxx