CSS:将HTML画布元素与屏幕边缘对齐

cs7cruho  于 2022-12-15  发布在  其他
关注(0)|答案(1)|浏览(116)

我想知道如何将画布元素与屏幕边缘对齐。看起来默认情况下,有一个很小的边距,如图所示。

我可以通过css在正文中将此边距设置为0

body {
   margin: 0;
}

然而,这会导致所有元素(如按钮和文本)的边距为零。

canvas {
   margin: 0;
}


这没有任何作用,我也试过在canvas元素周围放一个div,但是没有结果。
有什么办法吗?

nhhxz33t

nhhxz33t1#

可能文档上有边距,请尝试将:root也设置为margin: 0;样式。
参见示例:

const cvs = document.getElementById("cvs");
const ctx = cvs.getContext("2d");

ctx.fillStyle = "#26292a";
ctx.ellipse(30, 30, 60, 60, 0, 0, Math.PI * 2)
ctx.fill();
:root, body { 
  margin: 0;
}
<canvas id="cvs"></canvas>

相关问题