如何修复JS代码使HTML5 Canvas铺满页面实现全页粒子效果？

嘿，这个问题我之前也碰到过！核心问题就是你的Canvas只适配了初始窗口的大小，没考虑到页面滚动后的实际高度，而且粒子的运动边界也没跟着更新。我给你一套完整的修复方案，保证粒子能铺满整个页面：

1. 先给Canvas设置正确的CSS样式 #

首先要让Canvas固定在视口，不管页面怎么滚动都能覆盖所有区域：

canvas {
  position: fixed; /* 固定定位，不随滚动移动 */
  top: 0;
  left: 0;
  width: 100vw; /* 样式宽度占满视口宽度 */
  height: 100vh; /* 样式高度占满视口高度 */
  z-index: -1; /* 把Canvas放到页面内容下方，不干扰交互 */
}

注意：这里的width和height是CSS样式尺寸，用来控制Canvas在页面上的显示大小；我们还需要单独设置Canvas的实际绘图尺寸（也就是canvas.width和canvas.height），这才是粒子运动的真实边界。

2. 动态设置Canvas的实际绘图尺寸 #

页面的实际高度可能超过窗口高度（比如滚动后显示的内容），所以不能只用window.innerHeight，要获取整个页面的滚动高度：

const canvas = document.getElementById('yourCanvasId');
const ctx = canvas.getContext('2d');

// 封装一个更新Canvas尺寸的函数
function updateCanvasDimensions() {
  // 获取页面的实际总高度（兼容不同浏览器）
  const pageTotalHeight = Math.max(
    document.documentElement.scrollHeight,
    document.body.scrollHeight,
    window.innerHeight
  );
  // 获取页面的实际总宽度
  const pageTotalWidth = Math.max(
    document.documentElement.scrollWidth,
    document.body.scrollWidth,
    window.innerWidth
  );

  // 设置Canvas的实际绘图尺寸（这步是关键！）
  canvas.width = pageTotalWidth;
  canvas.height = pageTotalHeight;
}

3. 监听页面变化事件，实时更新尺寸 #

页面滚动、窗口大小改变时，都要重新计算Canvas尺寸：

// 页面加载完成后初始化一次
window.addEventListener('DOMContentLoaded', updateCanvasDimensions);

// 监听窗口 resize 事件
window.addEventListener('resize', updateCanvasDimensions);

// 监听页面滚动事件（防止动态加载内容导致页面高度变化）
window.addEventListener('scroll', updateCanvasDimensions);

4. 调整粒子的运动边界 #

最后要确保粒子的反弹逻辑用的是Canvas的实际尺寸，而不是初始窗口大小：

// 假设你的粒子运动逻辑是这样的，修改边界判断条件
function animateParticles() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  particles.forEach(particle => {
    // 更新粒子位置
    particle.x += particle.vx;
    particle.y += particle.vy;

    // 碰撞边界反弹：用canvas.width和canvas.height作为边界
    if (particle.x <= 0 || particle.x >= canvas.width) {
      particle.vx *= -1;
    }
    if (particle.y <= 0 || particle.y >= canvas.height) {
      particle.vy *= -1;
    }

    // 绘制粒子
    ctx.beginPath();
    ctx.arc(particle.x, particle.y, particle.radius, 0, Math.PI * 2);
    ctx.fillStyle = particle.color;
    ctx.fill();
  });

  requestAnimationFrame(animateParticles);
}

// 启动粒子动画
animateParticles();

额外提醒 #

如果你的页面有动态加载的内容（比如异步加载列表、图片），记得在内容加载完成后手动调用一次updateCanvasDimensions()，确保Canvas尺寸能覆盖新增加的内容高度。

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