如何解决如何删除画布元素周围的所有空间?
* {
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);
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。