HTML5 Canvas全屏显示异常：滚动条出现问题求助

核心原因 #

浏览器默认给html、body标签添加了margin，同时Canvas默认是inline-block元素，会产生基线间隙，这些都会导致页面总尺寸超出窗口，触发滚动条。

解决步骤 #

• 重置html和body的默认样式，清除margin、padding，并设置高度为100%，确保根元素占满窗口
• 将Canvas设置为block级元素，消除inline元素的基线间隙
• 同步Canvas的绘制尺寸和显示尺寸（避免拉伸模糊），并监听窗口 resize 事件动态更新

完整代码示例 #

CSS 部分

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden; /* 彻底禁用滚动条 */
}

#mainCanvas {
  display: block; /* 消除inline-block的基线间隙 */
  width: 100vw;
  height: 100vh;
}

JavaScript 部分

let canvas = document.getElementById("mainCanvas");
const ctx = canvas.getContext("2d");

// 设置Canvas的绘制尺寸（匹配窗口像素）
function resizeCanvas() {
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
  // 这里可以添加重绘逻辑，比如重新渲染游戏画面
}

// 初始化执行一次
resizeCanvas();
// 监听窗口大小变化
window.addEventListener("resize", resizeCanvas);

补充说明 #

• overflow: hidden可以直接禁用页面滚动，适合游戏场景
• 使用100vw和100vh确保Canvas的显示尺寸占满视口，同时通过JS设置width和height属性保证绘制精度，避免画面拉伸模糊

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