Canvas烟花页面按钮创建、循环移除及点击触发问题求助

1. 解决按钮被Canvas遮挡问题 #

PIXI生成的Canvas默认层级较高，通过JS创建按钮时，手动设置按钮的层级优先级即可：

// 生成按钮
const fireBtn = document.createElement('button');
fireBtn.textContent = '触发烟花';
// 强制设置按钮层级高于Canvas
fireBtn.style.position = 'fixed';
fireBtn.style.top = '30px';
fireBtn.style.left = '30px';
fireBtn.style.zIndex = '9999';
fireBtn.style.padding = '12px 24px';
fireBtn.style.fontSize = '16px';
document.body.appendChild(fireBtn);

无需修改PIXI Canvas的层级，只要按钮的zIndex数值足够大，就能覆盖在Canvas上方。

2. 移除自动循环 #

找到代码中负责自动执行的循环逻辑，针对性停止：

• 若使用PIXI的ticker驱动循环：
  假设原代码用app.ticker.add(renderFunc)绑定了渲染函数，直接移除监听：

  // 移除ticker上的渲染函数绑定
  app.ticker.remove(renderFunc);
  

• 若使用原生requestAnimationFrame：
  保存循环ID后调用取消方法：

  // 假设之前的循环ID存在loopId变量中
  cancelAnimationFrame(loopId);
  

同时删除页面初始化时自动调用烟花生成函数的代码（比如createFirework()这类直接执行的语句）。

3. 给按钮绑定点击事件触发烟花 #

根据需求选择单次触发或循环触发的逻辑，用指定代码包裹触发过程：

单次触发（点击一次生成一组烟花） #

fireBtn.addEventListener('click', () => {
  // 这里写入你需要包裹的指定代码
  console.log('触发单组烟花');
  // 调用烟花生成函数
  createFirework();
});

循环触发（点击后持续生成烟花，可再次点击停止） #

let isLooping = false;
fireBtn.addEventListener('click', () => {
  // 包裹的指定代码
  if (!isLooping) {
    console.log('开始循环生成烟花');
    app.ticker.add(renderFunc);
    isLooping = true;
    fireBtn.textContent = '停止烟花';
  } else {
    console.log('停止烟花循环');
    app.ticker.remove(renderFunc);
    isLooping = false;
    fireBtn.textContent = '触发烟花';
  }
});

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