Html5 canvas 未调整大小以填充父项 div

Question

我正在尝试制作一个正方形 canvas。我想用 css 执行此操作，以便在页面加载时立即调整 canvas 的大小。

为了让它变成正方形，我将它包裹在 div 中，并按如下方式设置样式：

body {
    background-color: blue;
}

#wrap {
    width: 40%;
    height: 0;
    padding-bottom: 40%;
}

canvas {
    background-color: white;
    width:100%;
    height:100%
}

然而，什么也没有出现。如果我将换行的 css 设置为硬编码宽度大小（像素或百分比），则会显示 canvas。我怀疑我遗漏了一些简单的东西，但我不知道它是什么。

Answer 1

因为你将高度设置为 0 来包裹 canvas 的高度也为 0 并且什么都不显示试试这个

body {
    background-color: blue;
}

#wrap {
    width: 40vh;
    height: 40vh;
}

canvas {
    background-color: white;
    width:100%;
    height:100%
}

Html5 canvas 未调整大小以填充父项 div

Html5 canvas not sizing to fill parent div

html

css

canvas

html5-canvas