Canvas占比超出视口100%，如何实现铺满整个窗口？

嘿，我来帮你搞定这个Canvas铺满窗口却超出的问题！这种情况我之前也碰到过，主要是两个容易踩的坑：浏览器默认的页面边距，还有Canvas的「绘图缓冲区尺寸」和「CSS显示尺寸」没对应上。

问题根源拆解 #

• 浏览器默认给<body>和<html>加了margin（通常是8px），这会让你的Canvas即使设了100%宽高，也会因为父元素的边距而超出视口。
• Canvas有两个尺寸：一个是绘图用的真实像素尺寸（通过width/height属性设置），另一个是页面上显示的CSS尺寸。如果这两个尺寸不匹配，不仅会拉伸图形，还可能导致视觉上的尺寸超出。

一步一步解决 #

1. 重置页面默认样式

先把html和body的默认边距、内边距清掉，同时确保它们占满整个视口：

html, body {
  margin: 0;
  padding: 0;
  height: 100%; /* 让body占满视口高度 */
  overflow: hidden; /* 隐藏滚动条，防止出现多余的滚动空间 */
}

2. 正确设置Canvas的尺寸

既要用CSS让它在页面上铺满，也要用JavaScript设置它的真实绘图尺寸，避免拉伸和超出：

<head>
  <title>Canvas Tests</title>
  <style>
    html, body {
      margin: 0;
      padding: 0;
      height: 100%;
      overflow: hidden;
    }
    canvas {
      display: block; /* 去掉Canvas默认的行内元素间隙 */
      width: 100vw; /* 占满视口宽度 */
      height: 100vh; /* 占满视口高度 */
      /* 也可以用 width:100%; height:100%; 但前提是html/body设了height:100% */
    }
  </style>
</head>
<body>
  <canvas id="myCanvas"></canvas>

  <script>
    const canvas = document.getElementById('myCanvas');
    const ctx = canvas.getContext('2d');

    // 设置Canvas的真实绘图尺寸为窗口大小
    function resizeCanvas() {
      canvas.width = window.innerWidth;
      canvas.height = window.innerHeight;
      // 窗口变化后重绘内容
      drawTestContent();
    }

    // 初始化时设置一次
    resizeCanvas();
    // 监听窗口大小变化，实时更新尺寸
    window.addEventListener('resize', resizeCanvas);

    // 测试绘图，验证尺寸是否正确
    function drawTestContent() {
      ctx.fillStyle = '#2ecc71';
      ctx.fillRect(0, 0, canvas.width, canvas.height);
      ctx.fillStyle = '#fff';
      ctx.font = '24px Arial';
      ctx.fillText('Canvas完美铺满窗口啦！', 50, 50);
    }
  </script>
</body>

3. 关键细节解释

• 给Canvas加display:block：因为Canvas默认是行内块元素，会有底部的微小间隙，设置成块级元素就能消除这个间隙。
• 用window.innerWidth/window.innerHeight设置绘图尺寸：这两个值是视口的真实像素大小，确保绘制的内容不会被拉伸变形。
• 监听resize事件：用户调整窗口大小时，Canvas能自动适应新的视口尺寸。

这样设置后，你的Canvas就会完美铺满整个窗口，不会再出现超出视口的情况啦！

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