Javascript 将两张画布放在彼此的CSS顶部

我试着把两张画布放在彼此的上面，同时让它们像这样居中，但我怀疑有一张画布出了框

CSS:

HTML:

如果我现在试着写这样的东西

ctx.font = "30px Arial";
ctx.fillStyle = "red";
ctx.fillText('images loaded and ready to go', 180, 45);

---

那就不会出现了。但是给ctx2写信会有帮助。

好吧，原来只是我累了。我只是忘了在css的cnv1和cnv2部分添加#：

#cnv1   { z-index: 2; }
#cnv2   { z-index: 1; }

---

它现在按预期工作。谢谢大家抽出时间。

您想要这样的东西吗？后层和前层现在重叠。 我唯一要做的就是颠倒它们在html中的显示顺序

我不知道为什么z索引不起作用/没有遵守。但改变他们的外表顺序效果很好

var cnv=document.getElementById（'cnv1'）
var ctx=cnv.getContext（'2d'）；
var cnv2=document.getElementById（'cnv2'）
var ctx2=cnv2.getContext（'2d'）；
ctx.font=“30px Arial”；
ctx.fillStyle=“红色”；
ctx.fillText（'图像已加载并准备就绪'，25,95）；
ctx2.save（）；
//ctx2.globalAlpha=0.5；
ctx2.clearRect（0,0，ctx2.宽度，ctx2.高度）；
ctx2.fillStyle=“#eeee”；
ctx2.fillRect（0,0,50200）；
ctx2.fillRect（50,50,50150）；
ctx2.fillRect（100,0,25200）；
ctx2.fillRect（150,50,50150）；
ctx2.fillStyle=“#202020”；
ctx2.fillText（'Gotham City'，20128）
body{
背景色：#000000；
文本对齐：居中；
边际：0px；
填充：0px；
宽度：100%；
高度：100%；}
*   { 
保证金：0；
填充：0；
}
画布{
显示：块；
填充：0；
保证金：自动；
位置：绝对位置；
排名：0；
底部：0；
左：0；
右：0；
背景色：透明；
}
#cnv1{
z指数：2；
}
#cnv2{
z指数：1；
}
U不做HTML5，修复。
你不做HTML5，修复。
我可以问一下你为什么想要两张画布吗？如果你的应用程序设计正确，你不需要2张画布。。。Javascript无论如何都是单线程的。只有在给定画布上绘制自己的实体。首先绘制背景中的实体，然后绘制其他实体。这是一个性能提升。通过将背景放置在单独的画布上，我不必清除整个画布，然后在重画形状或图片时在每个循环上重画背景。现在，每次我在另一块画布上重画一个很小的矩形时，我都会清除它。这样我可以节省电池电量（用于移动应用程序），并且占用更少的处理能力。但是如果你没有写#那么它怎么能用于cnv1呢。？
var cnv = document.getElementById('cnv1')
var ctx = cnv.getContext('2d');
var cnv2 = document.getElementById('cnv2')
var ctx2 = cnv2.getContext('2d');

ctx.font = "30px Arial";
ctx.fillStyle = "red";
ctx.fillText('images loaded and ready to go', 180, 45);

#cnv1   { z-index: 2; }
#cnv2   { z-index: 1; }