html5/css/javascript : 如何在 div 中叠加两个 canvas

Question

function drawAll() {
  // Upper zone, 8 grey transparent buttons
  let canvas0 = document.getElementById("layer0");
  canvas0.width = 1000;
  canvas0.height = 100;
  let bandeau = canvas0.getContext("2d");
  bandeau.fillStyle = "rgba(128,128,80,0.3)";

  for (var i = 0; i < 8; i++) {
    bandeau.beginPath;
    bandeau.arc(50 + 110 * i, 50, 45, 0, 2 * Math.PI);
    bandeau.fill();
  }

  // Lower zone, a red rectangle partially under the buttons
  let canvas1 = document.getElementById("layer1");
  canvas1.width = 1000;
  canvas1.height = 1000;
  let dessin = canvas1.getContext("2d");
  dessin.fillStyle = "red";
  dessin.fillRect(30, 50, 800, 200);
  canvas0.style.visibility = "visible";
  canvas1.style.visibility = "visible";
}

drawAll()

body {
  background-color: rgb(249, 249, 250);
}

.container {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: -10;
}

.scrollable {
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 1;
}

.fixed {
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 2;
}

<div class="container">
  <canvas id="layer0" class="scrollable"></canvas>
  <canvas id="layer1" class="fixed"></canvas>
</div>

你好

我被两个 canvas 的叠加问题困住了。这是一个简化的例子。请注意，在实际应用程序中，按钮和绘图要复杂得多，我想保持 html5 / css / javascript.

的结构

我想我在 css 中遗漏了一些东西以成功将这两个 canvas 叠加，按钮部分覆盖红色矩形，但是什么？

如果有人能提供帮助，谢谢。

Answer 1

问题是 <body> 没有任何高度，这使得 100% 的 .container 高度等于零。

绝对定位的元素不会影响其父元素的高度。只要你开始给 .container 一个实际高度，你就可以看到它的内容。在下面的示例中，我为宽度和高度选择了 100vw 和 100vh，但由于您的画布宽度为 1000 像素，您也可以使用该值或任何其他值。

An absolutely positioned element no longer exists in the normal document layout flow. Instead, it sits on its own layer separate from everything else.

来源：MDN Web Docs

另一种选择是从 .container 中删除 overflow: hidden; 并显示它之外的所有内容。

function drawAll() {
  // Upper zone, 8 grey transparent buttons
  let canvas0 = document.getElementById("layer0");
  canvas0.width = 1000;
  canvas0.height = 100;
  let bandeau = canvas0.getContext("2d");
  bandeau.fillStyle = "rgba(128,128,80,0.3)";

  for (var i = 0; i < 8; i++) {
    bandeau.beginPath;
    bandeau.arc(50 + 110 * i, 50, 45, 0, 2 * Math.PI);
    bandeau.fill();
  }

  // Lower zone, a red rectangle partially under the buttons
  let canvas1 = document.getElementById("layer1");
  canvas1.width = 1000;
  canvas1.height = 1000;
  let dessin = canvas1.getContext("2d");
  dessin.fillStyle = "red";
  dessin.fillRect(30, 50, 800, 200);
  canvas0.style.visibility = "visible";
  canvas1.style.visibility = "visible";
}

drawAll()

body {
  background-color: rgb(249, 249, 250);
}

.container {
  position: relative;
  overflow: hidden;
  z-index: -10;
  height: 100vh;
  width: 100vw;
}

.scrollable {
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 1;
}

.fixed {
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 2;
}

<div class="container">
  <canvas id="layer0" class="scrollable"></canvas>
  <canvas id="layer1" class="fixed"></canvas>
</div>

html5/css/javascript : 如何在 div 中叠加两个 canvas

html5/css/javascript : How to superpose two canvas in a div

html

javascript

css

canvas