如何删除 canvas 元素周围的所有 space？

Question

* {
    padding: 0;
    margin: 0;
    border: 0;
}

.canvas {
    border: 1px solid black;
    margin: 2px;
    width: calc(100vw - 6px);
    height: calc(100vh - 6px);
}

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="styles.css">
    <title>Document</title>
</head>
<body>
    <canvas class="canvas"></canvas>
    <script src="./bundle.js"></script>
</body>
</html>

但由于某种原因，canvas 周围仍然有 space（除了我的边距和边框）。我在这个项目的第一个版本中使用了相同的 CSS，由于某些原因我需要删除它，但它工作得很好。

Answer 1

有必要吗？为了删除此 space，需要设置父级 container，在这种情况下，此 body 标签应设置为 width 和 height.

* {
    padding: 0;
    margin: 0;
    border: 0;
}

body {
    width: 100%;
    height: 100vh;
}

.canvas {
    border: 1px solid black;
    margin: 2px;
    width: calc(100% - 6px);
    height: calc(100% - 6px);
}

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="styles.css">
    <title>Document</title>
</head>
<body>
    <canvas class="canvas"></canvas>
    <script src="./bundle.js"></script>
</body>
</html>

Answer 2

VH 和 VW 是视图高度和视图宽度。因此 - 它们是没有任何控制台 url 导航器的屏幕测量值。视图。

你变白的原因 space 是你正在计算一个新数字......它比整个屏幕略小 - 6px，因为你通过从中减去 px 来缩小 100% 的视图覆盖率高度和宽度。

canvas 上的边距也是您看到白色 space 的原因...

margin ->border ->padding ->content 是该模型的嵌套。边距只是将 space 添加到元素 - 这是 space 围绕元素 {space 直接在边界外} - （边距与其他边距相结合） - 其中填充增加 space 在 div 的边界内 - 边距增加 space 在目标元素的边界外。

因此，如果您的目标是使其适合 100% 的屏幕。你只需要 VH/VW 设置为 100；并取消边距。

如果您的目标是将其 100% 放入其所在的 div 容器中...VH VW 是错误的度量单位。

这是我在 codepen 上做的一些测试代码。

这会导致 canvas 覆盖屏幕，除了 canvas 之外没有留下 space。

html

<html>
<body>
    <canvas class="canvas" id="canvas"></canvas>
</body>
</html>

css
* {
    padding: 0;
    margin: 0;
    border: 0;
}
.canvas {
    width: 100vw;
    height: 100vh;
}

js test

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
ctx.fillStyle = "black";
ctx.fillRect(0,0,canvas.width,canvas.height);

如何删除 canvas 元素周围的所有 space？

How can I remove all the space around my canvas element?

html

css

spacing

html5-canvas