如何消除滚动条闪烁并实现全屏自适应Canvas

滚动条反复闪烁的核心原因是：canvas采用relative定位时会参与文档流布局，视口尺寸变化时，canvas先调整自身宽高，瞬间超出body范围触发滚动条，随后body尺寸被重新计算，canvas又被修正，导致滚动条反复出现消失。

修复步骤： #

1. 修改canvas定位为fixed
   fixed定位让canvas脱离文档流，直接基于视口定位，不会影响body的尺寸计算，从根源避免滚动条触发。同时设置top/left/right/bottom为0，让它自动铺满视口。

2. 使用window视口尺寸替代body.clientWidth/Height
   window.innerWidth和window.innerHeight直接获取当前视口的实际大小，比document.body.clientWidth更准确，能避免因body样式或滚动条带来的尺寸偏差。

3. 同步canvas的绘图缓冲区尺寸与显示尺寸
   确保canvas的width/height（绘图分辨率）和样式宽高一致，避免图像拉伸，同时保证每次尺寸变化时都更新这两个值。

修改后的完整代码： #

CSS部分：

html,
body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    background:
        linear-gradient(180deg,
            rgba(0, 191, 254, 1) 10%,
            rgba(252, 252, 252, 1) 100%);
    overflow: hidden; /* 强制隐藏body滚动条，双重保险 */
}

canvas {
    box-sizing: border-box;
    position: fixed; /* 改为fixed定位 */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 0;
    margin: 0;
    background: rgba(0, 0, 0, .5);
}

JavaScript部分：

let dimensions = {
  w: window.innerWidth,
  h: window.innerHeight,
};

const log = console.log.bind(console);
const $ = document.querySelector.bind(document);
let canvas;
let ctx;
let screenSizeObserver;
let initialized = false;

function initialize() {
  if (document.visibilityState === "visible" && initialized === false) {
    initialized = true;

    let c = document.createElement("canvas");
    c.id = "canvas";
    document.body.append(c);

    canvas = $("#canvas");
    ctx = canvas.getContext("2d");

    updateCanvasSize();
  }
}

// 抽离尺寸更新逻辑，复用更方便
function updateCanvasSize() {
  dimensions.w = window.innerWidth;
  dimensions.h = window.innerHeight;
  canvas.width = dimensions.w;
  canvas.height = dimensions.h;
}

document.addEventListener("DOMContentLoaded", () => {
  document.addEventListener("visibilitychange", initialize);
  initialize();
});

screenSizeObserver = new ResizeObserver(() => {
  updateCanvasSize();
});

// 监听html元素，更精准捕获视口尺寸变化
screenSizeObserver.observe(document.documentElement);

额外说明： #

• 给body加overflow: hidden是双重保障，即使出现意外情况也不会显示滚动条。
• 把ResizeObserver的监听对象改为document.documentElement（html元素），比监听body更能准确捕获视口尺寸变化。
• 抽离updateCanvasSize函数让代码更简洁，初始化和resize时调用同一个方法，避免重复代码。

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