Javascript 将两块画布组合起来。把第一个放在第二个上

我正试图做一些类似于这种抽象的事情

据我所知，需要将两个

画布

组合在一起，将它们放在彼此的顶部。但如何做到这一切呢

例如，这里我有两个实现。 首先

让顶点=[]；
设gl=particle.getContext（'webgl'）；
gl.bindBuffer（gl.ARRAY_BUFFER，gl.createBuffer（））；
调整大小（）；
函数resize（）{
粒子宽度=内部宽度；
粒子高度=内部高度；
让步骤=10，
w=数学地板（粒子宽度/步长），
h=数学地板（粒子高度/步长）；
顶点=[]；
对于（变量x=0；x（“+（1+i））
.padStart（4，“0”）+：“+str）
.join（“\n”）；
抛出消息；
}
}

帆布{
背景图片：url(https://i.imgur.com/HiAlf85.jpg);
}

如果你访问你链接的网站，并在他们的代码上达到顶峰，你会注意到他们只是将两个画布放在同一个div中，然后用一点css将它们放在彼此的顶部

画布{
位置：绝对位置；
排名：0；
右：0；
底部：0；
左：-1px；
}

如果你访问你链接的网站，并在他们的代码上达到顶峰，你会注意到他们只是将两个画布放在同一个div中，然后用一点css将它们放在彼此的顶部

画布{
位置：绝对位置；
排名：0；
右：0；
底部：0；
左：-1px；
}

在链接的示例中，由于绝对定位，两个画布相互重叠

但在您的示例中，即使将它们放置在彼此上方，也只能看到一个，因为您在每个画布上添加了一个不透明的背景图像

---

链接的示例取决于每个画布是否透明。这意味着，只为画布中需要着色的像素着色，没有背景色或图像，除非有透明度。

在链接的示例中，由于绝对定位，两个画布相互重叠

但在您的示例中，即使将它们放置在彼此上方，也只能看到一个，因为您在每个画布上添加了一个不透明的背景图像

---

链接的示例取决于每个画布是否透明。这意味着，只为画布中需要着色的像素着色，没有背景颜色或图像，除非有透明度。

您需要设置CSS，以便两个画布重叠，并从顶部画布移除背景

body {
  margin: 0;
}
canvas {
  display: block;
}

#particle {
  background-image:url(https://i.imgur.com/HiAlf85.jpg);
}
#canvas {
  position: absolute;
  left: 0;
  top: 0;
}

此外，您需要弄清楚如何合并这两个代码段。正如快速破解一样，我将这两个变量都包含在各自的函数中，这样变量就不会冲突，但这意味着一堆代码是重复的

最后一件事是一个自动关闭的画布，因为

是非法的HTML。您需要使用实际的结束标记，如

中所示

您可以通过检查来了解这一点

---

您需要设置CSS，使两个画布重叠，并从顶部画布移除背景

body {
  margin: 0;
}
canvas {
  display: block;
}

#particle {
  background-image:url(https://i.imgur.com/HiAlf85.jpg);
}
#canvas {
  position: absolute;
  left: 0;
  top: 0;
}

此外，您需要弄清楚如何合并这两个代码段。正如快速破解一样，我将这两个变量都包含在各自的函数中，这样变量就不会冲突，但这意味着一堆代码是重复的

最后一件事是一个自动关闭的画布，因为

是非法的HTML。您需要使用实际的结束标记，如

中所示

您可以通过检查来了解这一点

如果使用背景色制作第二（或第一）个画布并将其设置为透明，则只要顶部画布具有某种透明元素，您就应该能够看到底部画布。底部画布不需要是透明的，除非你也需要看穿它。但是只显示第二个脚本。还需要显示第一个变量。覆盖变量。由于重复使用

gl

和这两个变量之间的其他变量，因此只有一个变量最终会得到更新，因为您丢失了对上一个webgl上下文的所有引用。如果使用背景色制作第二个（或第一个）画布并将其设置为透明，则只要顶部画布具有某种透明元素，你应该能看透底部的那个。底部画布不需要是透明的，除非你也需要看穿它。但是只显示第二个脚本。还需要显示第一个变量。覆盖变量。由于您重用了

gl

和这两者之间的其他变量，因此只有一个变量最终会得到更新，因为您丢失了对以前webgl上下文的所有引用。是的，我知道。但是js呢？只显示第二个。您使用的是背景图像，如果要查看后面的内容，需要保持背景透明。至少是前面那个的背景。是的。但只显示第二个脚本。还需要显示第一个。两个画布的方法和变量使用相同的名称。这两个上下文都被定义为

gl

，因此在定义第二个上下文后，您几乎要删除第一个上下文。是的，我知道。但是js呢？只显示第二个。您使用的是背景图像，如果要查看后面的内容，需要保持背景透明。至少是前面那个的背景。是的。但只显示第二个脚本。还需要显示第一个。两个画布的方法和变量使用相同的名称。这两个上下文都被定义为

gl

，因此在定义第二个上下文后，您几乎要删除第一个上下文。它非常强大。Thnx.

当然不清楚您为什么要这样做。使用1画布可能会更快，但我假设您有自己的理由。

两个平面必须相互靠近，就像它们是独立的一样。我还不知道怎么做