在网站上展现春节烟花效果，仿百度首页

[malaohu]

播放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();
})();