播放5秒自己停止！
(function() {
// 1. 设置画布与透明度
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
canvas.style.position = 'fixed';
canvas.style.left = '0';
canvas.style.top = '0';
canvas.style.width = '100%';
canvas.style.height = '100%';
canvas.style.zIndex = '9999';
canvas.style.pointerEvents = 'none';
document.body.appendChild(canvas);
let width, height;
let particles = [];
let isRunning = true; // 控制运行开关
const colors = ['#FF1744', '#D500F9', '#3D5AFE', '#00E5FF', '#00E676', '#FFEA00', '#FF3D00'];
function resize() {
width = canvas.width = window.innerWidth;
height = canvas.height = window.innerHeight;
}
window.addEventListener('resize', resize);
resize();
class Particle {
constructor(x, y, color) {
this.x = x;
this.y = y;
this.color = color;
const angle = Math.random() * Math.PI * 2;
const force = Math.pow(Math.random(), 2) * 10 + 2;
this.vx = Math.cos(angle) * force;
this.vy = Math.sin(angle) * force;
this.radius = Math.random() * 2 + 1;
this.alpha = 1;
this.decay = Math.random() * 0.015 + 0.015;
this.gravity = 0.07;
this.friction = 0.95;
// 轨迹点：用于在透明背景下模拟流光
this.history = [];
for(let i=0; i<6; i++) this.history.push({x: x, y: y});
}
update() {
this.history.shift();
this.history.push({x: this.x, y: this.y});
this.vx *= this.friction;
this.vy *= this.friction;
this.vy += this.gravity;
this.x += this.vx;
this.y += this.vy;
this.alpha -= this.decay;
}
draw() {
ctx.beginPath();
ctx.moveTo(this.history[0].x, this.history[0].y);
for(let i=1; i<this.history.length; i++) {
ctx.lineTo(this.history[i].x, this.history[i].y);
}
ctx.strokeStyle = this.color;
ctx.lineWidth = this.radius;
ctx.lineCap = 'round';
ctx.globalAlpha = this.alpha;
ctx.stroke();
}
}
function createFirework(x, y) {
if (!isRunning && particles.length > 500) return;
const color = colors[Math.floor(Math.random() * colors.length)];
for (let i = 0; i < 60; i++) {
particles.push(new Particle(x, y, color));
}
}
// 核心动画循环
function loop() {
// 使用 clearRect 保持背景透明
ctx.clearRect(0, 0, width, height);
for (let i = particles.length - 1; i >= 0; i--) {
const p = particles[i];
p.update();
if (p.alpha <= 0) {
particles.splice(i, 1);
} else {
p.draw();
}
}
// 如果停止运行且粒子已排空，则彻底停止循环节省资源
if (!isRunning && particles.length === 0) {
canvas.remove(); // 移除画布
return;
}
requestAnimationFrame(loop);
}
// 5秒后停止自动燃放
setTimeout(() => {
isRunning = false;
}, 5000);
// 自动燃放逻辑
function autoFire() {
if (isRunning) {
createFirework(Math.random() * width, Math.random() * (height * 0.5));
setTimeout(autoFire, Math.random() * 800 + 400);
}
}
// 依然保留点击手动燃放（5秒内有效）
window.addEventListener('mousedown', (e) => {
if (isRunning) createFirework(e.clientX, e.clientY);
});
loop();
autoFire();
})();
速度这么快？
操作姿势：
️ 温馨提示：