当我提到宽度为 window.innerwidth 和高度为 window.innerheight 时，为什么我会溢出答案

【问题标题】：Why am I getting overflow when i mentioned width to be window.innerwidth and height to be window.innerheight当我提到宽度为 window.innerwidth 和高度为 window.innerheight 时，为什么我会溢出
【发布时间】：2021-10-14 05:15:40
【问题描述】：

screenshot for reference

所以我一直想知道，当我提到高度和宽度分别为 window.innerheight 和 window.innerwidth 时，是什么导致了溢出。

这是一个sn-p：

var canvas = document.querySelector('canvas');

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

canvas {
  border: 1px solid;
}

<body>
  <canvas id="canvas" width=""></canvas>

  <script src="./canvas.js"></script>
</body>

【问题讨论】：

标签： javascript html css html5-canvas

【解决方案1】：

在css中设置宽度和高度：

canvas {
    width: 100%;
    height: 100%;
}

【讨论】：

【解决方案2】：

简短的回答似乎是宽度和高度是 HTML 属性 - 与 CSS 无关 - 而 box-sizing 与 CSS 有关。即 box-sizing 不会影响宽度/高度 + 边框设置，因此您会溢出。

对于更长的答案，我试图了解我的 Windows10 系统（Edge/Chrome）在通过 CSS 设置画布尺寸时发生了什么，而属性保持不变。我只是部分理解，x 方向似乎很好，边框在那里，但右侧的垂直边框被隐藏了一个垂直滚动条 - 似乎计算是一个像素，直到我全屏显示没有滚动。

希望其他人可以更深入地解释这里发生了什么，因为画布上的 box-sizing 似乎有效，但没有完全发挥作用。

为了安全起见，这个 sn-p 将所有内容设置为具有边距和填充 0。

canvas = document.querySelector('canvas');

function resize() {
  //canvas.width = window.innerWidth;
  //canvas.height = window.innerHeight;
  canvas.style.width = window.innerWidth + 'px';
  canvas.style.height = window.innerHeight + 'px';
}
window.onresize = resize;
resize();

* {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
}

canvas {
  border: 10px solid;
}

&lt;canvas id="canvas" width=""&gt;&lt;/canvas&gt;

【讨论】：