求助：修改烟花效果背景色为#ECEFF1并移除循环触发逻辑

针对你提出的两个需求，以下是修改后的代码及详细说明：

修改后的完整代码 #

(async ({
    document,
    setTimeout,
    clearTimeout,
    addEventListener,
    installFont,
    Fireworks,
    Math
}) => {
    const { body } = document;

    await installFont(
        "Noto Sans JP",
        "@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100&display=swap');"
    );

    const isMobile = "ontouchend" in window;

    const touchText = document.createElement("div");
    touchText.innerText = isMobile ? "touch to start" : "click to start";
    touchText.classList.add("start");

    const overlay = document.createElement("div");
    overlay.classList.add("overlay");

    overlay.appendChild(touchText);
    body.appendChild(overlay);

    const triggerKey = isMobile ? "touchend" : "click";
    overlay.addEventListener(triggerKey, () => {
        body.removeChild(overlay);
        
        const get_rect = () => [
            Math.min(1200, window.innerWidth),
            Math.min(400, window.innerHeight)
        ];

        const fireworks = Fireworks.init();
        fireworks.amount(7);
        
        // 修改1：设置烟花画布背景色与页面一致
        fireworks.view.style.backgroundColor = '#ECEFF1';
        // 初始化画布背景，覆盖库默认的黑色清屏
        const ctx = fireworks.view.getContext('2d');
        ctx.fillStyle = '#ECEFF1';
        ctx.fillRect(0, 0, fireworks.view.width, fireworks.view.height);
        
        document.body.appendChild(fireworks.view);

        const resize = () => requestAnimationFrame(() => {
            fireworks.resize(...get_rect());
            // 窗口缩放时重新绘制背景
            const ctx = fireworks.view.getContext('2d');
            ctx.fillStyle = '#ECEFF1';
            ctx.fillRect(0, 0, fireworks.view.width, fireworks.view.height);
        });
        resize();

        let id;
        window.addEventListener('resize', () => {
            clearTimeout(id);
            id = setTimeout(resize, 100);
        });
        
        // 修改2：实现单次烟花效果，移除循环
        fireworks.start();
        // 监听粒子状态，所有粒子消失后停止循环
        const checkFireworksComplete = () => {
            // 假设库将活跃粒子存储在_particles属性中
            if (!fireworks._particles || fireworks._particles.length === 0) {
                fireworks.stop();
                return;
            }
            requestAnimationFrame(checkFireworksComplete);
        };
        requestAnimationFrame(checkFireworksComplete);
    });
})(window);

关键修改说明 #

1. 修改背景色为#ECEFF1 #

• 直接操作烟花实例的画布元素（fireworks.view，即<canvas>），通过JS设置其style.backgroundColor为目标颜色，绕开CSS无效的问题。
• 额外通过画布上下文fillRect初始化背景，并在窗口resize时重新绘制，防止库的默认黑色清屏逻辑覆盖设置的背景色。

2. 实现单次触发烟花效果 #

• 保留fireworks.start()启动烟花，但添加了帧检测函数checkFireworksComplete：
  • 检测烟花实例中的活跃粒子数量（假设库将粒子存储在_particles属性中），当所有粒子消失后，调用fireworks.stop()终止循环。
  • 如果该烟花库提供了官方的完成事件（如fireworks.on('finished', callback)），可以替换此检测逻辑，实现更精准的停止时机。

内容的提问来源于stack exchange，提问作者TobitheDev