如何删除画布元素周围的所有空间？

问题描述

* {
    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>

但是由于某种原因，画布周围仍然有空间（除了我的边距和边框）。对于该项目的第一个版本，我使用了相同的CSS，出于某种原因我需要删除它，并且效果很好。

解决方法

有必要吗？为了删除此空间，需要设置父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>

VH和VW是视图高度和视图宽度。这样-在没有任何控制台URL导航器的情况下，它们就是屏幕的测量值。视图。

获得空白的原因是您正在计算一个比整个屏幕略小6px的新数字...，因为您要通过从高度和宽度中减去px来缩小100％的视图覆盖范围。 / p>

画布上的边距也是您看到空白的原因...。

边距->边框->填充->内容是该模型的嵌套。边距只是在元素上增加空间-元素{周围的空间直接在边框外}周围的空间-（边距与其他边距结合）-其中填充增加了div边框内的空间-边距在边框外增加了空间定位元素。

因此，如果您的目标是使其适合屏幕的100％。您只需要将VH / VW设置为100；并取消保证金。

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

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

这导致画布覆盖屏幕，除了画布之外没有其他空间。

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,canvas.width,canvas.height);

html html5-canvas spacing