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

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

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

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

在开发基于 HTML5 Canvas 的游戏或可视化应用时，常遇到“Canvas 无法完美填满窗口，页面意外出现滚动条”的问题。这通常并非 Canvas 本身尺寸设置错误，而是由浏览器对和元素的默认样式（如 margin、padding）以及文档流布局行为导致的——即使你用 JavaScript 正确设置了 canvas.width = window.innerWidth 和 canvas.height = window.innerHeight，若父容器存在额外空间或未脱离文档流，仍会触发溢出。

✅ 正确做法：CSS + JS 协同控制

第一步：清除默认布局干扰
在 CSS 中重置根元素与主体的外边距和内边距：

html, body {
    margin: 0;
    padding: 0;
    overflow: hidden; /* 可选：主动禁止滚动，增强健壮性 */
}

第二步：用 CSS 视口单位固定 Canvas 尺寸
直接为 Canvas 设置 100vw（视口宽度）和 100vh（视口高度），确保其渲染尺寸严格匹配可视区域：

#mainCanvas {
    display: block; /* 关键！防止 inline 元素默认的底部空白（基线对齐导致的间隙） */
    width: 100vw;
    height: 100vh;
}

⚠️ 注意：display: block 不可省略。Canvas 默认是 inline 元素，会因行内对齐产生约 4px 的底部空白，导致实际高度超限并触发垂直滚动条。

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

下载

第三步：JavaScript 仅负责像素级渲染分辨率（非显示尺寸）
Canvas 的 width/height 属性控制的是绘图上下文的逻辑像素数（即 CSS 像素对应的分辨率），而非显示大小。为兼顾高清屏（Retina）清晰度，建议按设备像素比缩放：

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

function resizeCanvas() {
    const dpr = window.devicePixelRatio || 1;
    canvas.width = Math.floor(window.innerWidth * dpr);
    canvas.height = Math.floor(window.innerHeight * dpr);
    canvas.style.width = "100vw";
    canvas.style.height = "100vh";
    ctx.scale(dpr, dpr); // 让绘图坐标系自动适配高DPR
}

// 初始化 + 监听窗口变化
resizeCanvas();
window.addEventListener("resize", resizeCanvas);