2つのキャンバスを重ね合わせて配置するCSS

Question

私は2つのキャンバスをお互いに配置しようとしていますが、同時にこれを中心にしていますが、1つのキャンバスがフレーム外であると思われます。

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への書き込みは行います。

Answer 1

OK、それは私が疲れていることが分かりました。私は、CSSのCNV1 & CNV2の部分に＃を追加するのを忘れ：今、意図したとおりに

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

それは動作します。あなたのお時間をありがとうございました。

Answer 2

これはあなたが欲しいものですか？背面レイヤーと前面レイヤーが重複するようになりました。 私がそれを行うためにしなければならなかったことは、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 = "red"; 
 
ctx.fillText('images loaded and ready to go', 25, 95); 
 

 
ctx2.save(); 
 

 
//ctx2.globalAlpha = 0.5; 
 
ctx2.clearRect(0,0,ctx2.width,ctx2.height); 
 
ctx2.fillStyle="#eeeeee"; 
 
ctx2.fillRect(0,0,50,200); 
 
ctx2.fillRect(50,50,50,150); 
 
ctx2.fillRect(100,0,25,200); 
 

 
ctx2.fillRect(150,50,50,150); 
 

 
ctx2.fillStyle="#202020"; 
 
ctx2.fillText('Gotham City.', 20, 128);

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; 
 
    background-color:transparent; 
 
    } 
 
#cnv1 { 
 
    z-index: 2; 
 
    } 
 
#cnv2 { 
 
    z-index: 1; 
 
    }

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