如何让 HTML5 Canvas 全屏铺满浏览器窗口且不触发滚动条-js教程-PHP中文网

如何让 HTML5 Canvas 全屏铺满浏览器窗口且不触发滚动条

通过重置默认边距、使用视口单位 css 设置 canvas 尺寸，并配合 javascript 动态适配，可彻底消除滚动条，实现真正全屏无间隙的 canvas 渲染。

通过重置默认边距、使用视口单位 css 设置 canvas 尺寸，并配合 javascript 动态适配，可彻底消除滚动条，实现真正全屏无间隙的 canvas 渲染。

要让 <canvas></canvas> 元素严格占满整个浏览器视口（viewport），仅靠 JavaScript 动态设置 width 和 height 属性是不够的——因为 Canvas 的 CSS 渲染尺寸（即元素在页面中占据的空间）与 绘图上下文尺寸（即 canvas.width/.height 像素数）是两个独立概念。若未约束其 CSS 行为，浏览器会按默认样式渲染 <canvas></canvas>（如内联元素默认有基线对齐、body 默认带 margin），导致实际布局溢出，从而触发滚动条。

✅ 正确做法需三步协同：

清除全局默认间距
移除和的默认 margin 与 padding，这是滚动条最常见的根源：

html, body {
  margin: 0;
  padding: 0;
  overflow: hidden; /* 可选：强制禁止滚动，确保视觉一致性 */
}

用 CSS 视口单位固定 Canvas 占位尺寸
直接设置 #mainCanvas 的 CSS 宽高为 100vw（viewport width）和 100vh（viewport height），使其在布局阶段就撑满整个可视区域：

#mainCanvas {
  display: block; /* 关键！避免 inline 元素默认的底部空白（基线对齐导致的额外高度） */
  width: 100vw;
  height: 100vh;
}

⚠️ 注意：display: block 不可省略。Canvas 默认是 inline-level 元素，会因基线对齐在下方预留约 4px 空隙，造成实际高度 > 100vh，进而触发垂直滚动条。

Wechat HTML Publisher
直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

JavaScript 保持逻辑分辨率与设备像素比匹配（进阶推荐）
上述 CSS 已解决布局问题，但若需高清绘制（如 Retina 屏），应在 JS 中同步缩放绘图上下文：

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

function resizeCanvas() {
  const dpr = window.devicePixelRatio || 1;
  const rect = canvas.getBoundingClientRect();

  // 设置 CSS 显示尺寸（已由 CSS 控制，此处仅作显式声明）
  canvas.style.width = `${rect.width}px`;
  canvas.style.height = `${rect.height}px`;

  // 设置真实绘图缓冲区尺寸（考虑设备像素比）
  canvas.width = Math.floor(rect.width * dpr);
  canvas.height = Math.floor(rect.height * dpr);

  // 缩放绘图上下文，使坐标系保持逻辑像素一致
  ctx.scale(dpr, dpr);
}

// 首次初始化 + 响应窗口变化
resizeCanvas();
window.addEventListener("resize", resizeCanvas);

? 总结：

CSS 是布局前提：margin/padding: 0 + display: block + 100vw/100vh 是消除滚动条的必要条件；
JS 是功能增强：动态适配 devicePixelRatio 提升画质，但非全屏必需；
避免仅依赖 canvas.width = window.innerWidth —— 它只设置缓冲区，不控制 DOM 布局，无法解决滚动条问题。

这样配置后，Canvas 将真正无缝覆盖整个视口，为游戏或可视化应用提供稳定、可控的全屏画布基础。