html5/css/javascript：如何在 div 中叠加两个画布答案

【问题标题】：html5/css/javascript : How to superpose two canvas in a divhtml5/css/javascript：如何在 div 中叠加两个画布
【发布时间】：2021-08-23 16:16:54
【问题描述】：

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>

你好

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

我想我错过了 css 中的某些内容，以便成功地将这两个画布叠加，按钮部分覆盖红色矩形，但是什么？

如果有人可以提供帮助，谢谢。

【问题讨论】：

嗨，你能检查一下你的 sn-p 并确保它运行正常并显示一些东西吗？谢谢。
不幸的是，运行此代码时我在屏幕上看不到任何内容。图纸非常简单，应该显示在屏幕上。我的问题是“他们为什么不出现”
我不熟悉“snipet”。尽管“绘图功能未知”包含在 javascript 部分中，但我收到一个错误。在 js/css/html 的三个框中复制/粘贴我的代码时，我可能错过了一些东西！确保如果我正确组装这三段代码，无论是在单个文件中还是拆分为三个文件，我都会遇到相同的画布问题。
我编辑并修复了 sn-p。您不需要整个 HTML 设置，最好从 JS 块调用您的 JS 函数。
我没有看到 sn-p 的任何模组。是不是因为我试图同时编辑它：我猜测（可能是错误的）“draw”函数名称可以保留并将其更改为“drawAll”。是否有页面可以学习如何使用这个“sn-p”工具？

标签： javascript html css canvas

【解决方案1】：

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

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

在正常的文档布局流程中不再存在绝对定位的元素。相反，它位于自己的层上，与其他所有内容分开。

来源：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>

【讨论】：

是的，它有效。我不知道这些 vh 和 vw 单位，并认为“%”可以完成这项工作。显然不是。非常感谢。
@JiPe38 很酷，很高兴我能帮上忙。如果您可以通过单击左侧的复选标记将我的答案标记为“已接受”，我将不胜感激。