Canvas 占用父 div 的空间答案

【问题标题】：Canvas takes up space of parent divCanvas 占用父 div 的空间
【发布时间】：2022-01-29 09:43:34
【问题描述】：

我已经做了很多搜索，但我无法解决我遇到的这个问题。

我有一个canvas 嵌套在div 中，目的是让div 作为canvas 的背景，这样我就可以在上面绘制对象等等。

当我运行我的代码时，画布与 div 并排显示，我不确定要更改什么来修复它。

// html
<body>
    <div id="root">
        <div id='board'>
           <div>test</div>
           <canvas></canvas>
        </div>
    </div>
</body>

// css
#board {
    position: relative;
    display: flex;
    width: 640px;
    height: 640px;
}

// js
let canvas = document.querySelector('canvas')
let ctx = canvas.getContext('2d')

canvas.width = canvas.offsetWidth
canvas.height = canvas.offsetHeight

在此处查找类似问题但收效甚微。非常感谢您的见解！

【问题讨论】：

你需要画布上的绝对位置
嘘。没有看到这么简单的答案，我感到很愚蠢。非常感谢。您想正式回答这个问题，以便我将其标记为正确吗？
@waifuxszn 如果我的回答对您有帮助，请考虑支持并接受它。

标签： javascript html css canvas

【解决方案1】：

例如，您可以添加此样式以使画布居中，然后根据需要向背景 div 添加更多项目。


canvas {
  background-color: green;
  width: 200px;
  height: 200px;
  align-self: center;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  left: 50%;
}

我添加了结果的图像。

【讨论】：