javascript - 将两个 Canvas 彼此重叠放置

我试着把两张画布放在每个画布上，同时让它们像这样居中，但我怀疑有一张画布超出了框架。
CSS:

body    { background-color: #000000; text-align: center; margin: 0px; padding: 0px; width:100%; height:100%; }
*   { margin:0; padding:0; }
canvas  { display:block; padding: 0; margin: auto; position: absolute; top: 0; bottom: 0; left: 0; right: 0; }
cnv1    { z-index: 2; }
cnv2    { z-index: 1; }

HTML格式：

<canvas id="cnv1">U no do HTML5, fix.</canvas>
<canvas id="cnv2">U no do HTML5, fix.</canvas>

Javascript代码：

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);

那就不会出现了。但写信给ctx2会的。

最佳答案

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

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

它现在按计划工作。谢谢大家抽出时间。

关于javascript - 将两个 Canvas 彼此重叠放置，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/43384755/