为何将canvas尺寸设为window.innerWidth/innerHeight时仍出现滚动条

问题根源 #

滚动条问题基本是两个默认样式特性导致的：

• canvas默认是inline行内元素，遵循基线对齐规则，会在元素下方额外产生3~5px的空白间隙
• 仅设置body的边距不生效，html根元素也可能存在默认边距，未限制溢出时浏览器默认会显示滚动条

最优实现方案（无需手动减去固定值） #

不要硬编码减去固定数值，不同浏览器的默认样式、滚动条宽度存在差异，硬减适配性极差，按以下步骤配置即可实现完美全屏：

1. 全局样式重置 #

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html, body {
  /* 限制根元素溢出不显示滚动条 */
  overflow: hidden;
  width: 100%;
  height: 100%;
}
canvas {
  /* 改为块级元素消除行内间隙 */
  display: block;
}

2. 设置Canvas宽高 #

注意区分canvas的元素属性宽高和CSS样式宽高，前者决定画布的绘制分辨率，后者决定元素在页面的展示尺寸，二者需要匹配避免画面模糊：

const canvas = document.querySelector('canvas');
// 设置画布绘制分辨率
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
// 可选：配合CSS设置展示尺寸，也可以直接在CSS写width:100vw;height:100vh
canvas.style.width = `${window.innerWidth}px`;
canvas.style.height = `${window.innerHeight}px`;

// 窗口大小变化时重新适配
window.addEventListener('resize', () => {
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
  canvas.style.width = `${window.innerWidth}px`;
  canvas.style.height = `${window.innerHeight}px`;
  // 此处可补充画布重绘逻辑
})

简化方案 #

如果不需要复杂的分辨率适配，也可以直接用视口单位实现：

canvas {
  display: block;
  width: 100vw;
  height: 100vh;
}

注意这种方案需要单独设置canvas的width/height属性和展示尺寸匹配，避免绘制内容模糊。

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