Canvas超出网格布局：窗口缩放后无法自适应100vw/100vh问题

这个问题我之前也遇到过——particles.js默认不会自动监听窗口大小变化来调整canvas尺寸，所以缩放窗口后它还会保持原来的尺寸。下面是具体的解决步骤：

1. 确保CSS定位和尺寸设置正确 #

首先调整你的容器和overlay的样式，保证overlay能完全覆盖容器，并且canvas能占满overlay：

.container {
  height: 100vh;
  width: 100vw;
  position: relative; /* 关键：让子元素的absolute定位基于容器 */
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3列网格布局 */
  /* 其他网格相关样式 */
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none; /* 防止canvas遮挡网格内容的交互事件 */
}

#particles-js {
  width: 100%;
  height: 100%;
}

pointer-events: none很重要，不然你的网格内容可能会被canvas挡住，无法点击或交互。

2. 添加窗口resize事件监听，重置particles.js实例 #

particles.js没有内置的resize自适应，所以我们需要手动监听窗口大小变化，销毁旧实例后重新初始化：

// 先把particles的配置单独存成变量，避免重复代码
const particlesConfig = {
  particles: {
    number: { value: 80 },
    size: { value: 3 },
    // 这里放你原来的所有particles配置参数
  },
  interactivity: {
    // 你的交互配置...
  }
};

// 初始化particles
particlesJS('particles-js', particlesConfig);

// 监听窗口resize事件
window.addEventListener('resize', () => {
  // 先销毁已存在的particles实例
  if (window.pJSDom && window.pJSDom.length > 0) {
    window.pJSDom[0].pJS.fn.vendors.destroypJS();
  }
  // 重新初始化，适配新的窗口尺寸
  particlesJS('particles-js', particlesConfig);
});

这样每次窗口大小变化时，canvas都会被销毁并重新创建，自动适配当前的容器尺寸。

额外优化：添加防抖函数减少频繁重置 #

如果缩放窗口时感觉有卡顿，可以给resize事件添加防抖函数，降低重置频率：

// 防抖函数，避免频繁触发
function debounce(func, delay = 200) {
  let timeoutId;
  return (...args) => {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => func.apply(this, args), delay);
  };
}

// 用防抖后的函数监听resize
window.addEventListener('resize', debounce(() => {
  if (window.pJSDom && window.pJSDom.length > 0) {
    window.pJSDom[0].pJS.fn.vendors.destroypJS();
  }
  particlesJS('particles-js', particlesConfig);
}));

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