如何将Canvas设为页面背景？解决折叠菜单后画布留白问题

问题根源 #

当前Canvas嵌套在#content容器内，未设置全局覆盖的定位规则，且未监听侧边栏折叠后的布局变化，导致尺寸无法及时适配；同时setInterval的动画循环效率较低，容易出现帧丢失。

具体修复步骤 #

1. 调整Canvas的层级与定位

将Canvas移出#content，放在<body>最外层，通过CSS固定定位实现全屏覆盖，确保它始终处于页面内容下方：

<body>
  <!-- 全屏背景Canvas -->
  <canvas id="canv"></canvas>
  
  <!-- 原侧边栏与内容容器 -->
  <div class="wrapper d-flex align-items-stretch">
    <nav id="sidebar">
      <h1><a href="#" class="logo">App</a></h1>
      <ul class="list-unstyled components mb-5">
        <li class="active">
          <a href="#"><span class="fa fa-home mr-3"></span> home </a>
        </li>
      </ul>
    </nav>
    
    <div id="content">      
      <div style="position: absolute;">
        <div class="custom-menu" >
          <button type="button" id="sidebarCollapse" class="btn btn-primary">
            <i class="fa fa-bars"></i>
            <span class="sr-only">Toggle Menu</span>
          </button>
        </div>
        <h1> Hello world</h1>
      </div>
    </div>
  </div>

  <!-- 脚本放在body末尾 -->
  <script>
    // 脚本内容见下文
  </script>
</body>

添加对应CSS：

#canv {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1; /* 确保Canvas在所有内容下方 */
  display: block; /* 消除默认inline-block带来的底部空隙 */
}

body {
  margin: 0; /* 清除body默认边距 */
}

2. 优化Canvas尺寸适配逻辑

移除Canvas标签上无效的width="max-width"和height="max-height"属性，通过JS监听窗口 resize 与侧边栏折叠事件，动态调整画布尺寸；同时替换setInterval为requestAnimationFrame实现高效动画循环：

const canvas = document.getElementById('canv');
const ctx = canvas.getContext('2d');
const sidebarCollapseBtn = document.getElementById('sidebarCollapse');

// 调整画布尺寸并重绘
function resizeCanvas() {
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
  draw(); // 尺寸变化后立即重绘，避免空白
}

// 初始适配
resizeCanvas();

// 监听窗口大小变化
window.addEventListener('resize', resizeCanvas);

// 监听侧边栏折叠事件，延迟调整确保DOM更新完成
sidebarCollapseBtn.addEventListener('click', () => {
  setTimeout(resizeCanvas, 100);
});

// 绘制逻辑示例
function draw() {
  // 这里替换为你的自定义绘制代码
  ctx.fillStyle = '#f5f5f5';
  ctx.fillRect(0, 0, canvas.width, canvas.height);
  
  // 循环执行动画
  requestAnimationFrame(draw);
}

// 启动动画
requestAnimationFrame(draw);

3. 解决页面滚动问题

侧边栏折叠后出现滚动，通常是模板CSS中容器溢出规则导致，可通过以下CSS调整：

.wrapper {
  overflow: hidden; /* 禁止整体容器溢出滚动 */
}

#content {
  min-height: 100vh; /* 确保内容区域至少占满视口高度 */
  padding: 2rem; /* 按需调整，避免内容贴边 */
}

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