CSS：画布无法正确调整大小且无法分层

Question

所以我有两种 canvas 麻烦。

问题 1：canvases 大小不正确

我正在尝试制作一小堆漂亮的白色盒子，但它们无法根据 div.

正确调整自己的大小

看到它们如何超出绿色矩形底部太远了吗？它们应该恰好适合填充边框。他们为什么不这样做？？

这是我的 HTML:

<div id="behindAll">
    <div id="dotTextList">
        <canvas id="dotCanvas1" class="dotTextCanvas"></canvas>
        <canvas id="dotCanvas2" class="dotTextCanvas"></canvas>
        <canvas id="dotCanvas3" class="dotTextCanvas"></canvas>
        <canvas id="dotCanvas4" class="dotTextCanvas"></canvas>
        <canvas id="dotCanvas5" class="dotTextCanvas"></canvas>
    </div>
</div>

这是我的 CSS:

#behindAll {
  box-sizing: border-box;
  position: absolute;
  top: 0;
  left: 0;
  background: red;
  width: 100%;
  height: 100%;
  padding: 10px;
}

#dotTextList {
  box-sizing: border-box;
  background: green;
  width: 100%;
  height: 100%;
  padding: 10px;
}

.dotTextCanvas {
  box-sizing: border-box;
  height: 20%;
  width:100%;
  background-color: white;
}

我已经将小白框定义为其父方框的 20%，因此它们应该玩得很好，但事实并非如此。

问题2：canvases不会分层

最后，我想让五个白色的 canvases 在大背景前画自己 canvas。

这是我的 HTML：

<div id="behindAll">
    <canvas id="backgroundCanvas" />
    <div id="dotTextList">
        <canvas id="dotCanvas1" class="dotTextCanvas"></canvas>
        <canvas id="dotCanvas2" class="dotTextCanvas"></canvas>
        <canvas id="dotCanvas3" class="dotTextCanvas"></canvas>
        <canvas id="dotCanvas4" class="dotTextCanvas"></canvas>
        <canvas id="dotCanvas5" class="dotTextCanvas"></canvas>
    </div>
</div>

还有我的CSS：

#behindAll {
  box-sizing: border-box;
  position: absolute;
  top: 0;
  left: 0;
  background: red;
  width: 100%;
  height: 100%;
  padding: 10px;
}

#backgroundCanvas {
  z-index: 5;
  box-sizing: border-box;
  background: blue;
  width: 100%;
  height: 100%;
  padding: 10px;
}

#dotTextList {
  box-sizing: border-box;
  background: green;
  width: 100%;
  height: 100%;
  padding: 10px;
}

.dotTextCanvas {
  z-index: 9;
  box-sizing: border-box;
  height: 20%;
  width:100%;
  background-color: white;
}

结果如下：

白框不见了！

我调换了事物的顺序，我尝试了 z-indexes（如您所见），但我似乎无法获得那些白框 a) 正确的大小和 b) 绘图在蓝色方框前。

感谢所有帮助！

Answer 1

这导致了您的问题 trouble2:

（去掉这个） <canvas id="backgroundCanvas" />

抱歉，请使用这个

<div id="behindAll">
    <canvas id="backgroundCanvas">
    <div id="dotTextList">
        <canvas id="dotCanvas1" class="dotTextCanvas"></canvas>
        <canvas id="dotCanvas2" class="dotTextCanvas"></canvas>
        <canvas id="dotCanvas3" class="dotTextCanvas"></canvas>
        <canvas id="dotCanvas4" class="dotTextCanvas"></canvas>
        <canvas id="dotCanvas5" class="dotTextCanvas"></canvas>
    </div>
    </canvas>
</div>

还有这个

#backgroundCanvas {
  box-sizing: border-box;
  background: blue;
  width: 100%;
  height: 100%;
  padding: 10px;
}

.dotTextCanvas {
  box-sizing: border-box;
  height: 20%;
  width:100%;
  background-color: white;
}

麻烦1：

（设置这个）

.dotTextCanvas {
  box-sizing: border-box;
  height: calc((100% - 20px)/5);
}

CSS：画布无法正确调整大小且无法分层

CSS: Canvases won't size correctly and won't layer

css

html5-canvas