将两个画布放在彼此的CSS之上

时间:2017-04-13 06:13:18

标签: javascript html css canvas

我正在尝试将2幅画布放在彼此的顶部,同时让它们像这样居中,但我怀疑一块画布是不合帧的。

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会。

2 个答案:

答案 0 :(得分:0)

好的,原来只是我累了。我忘了把#添加到cnv1&amp; cnv2部分css:

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

现在按预期工作。谢谢大家的时间。

答案 1 :(得分:0)

这是你想要的吗?背层和前层现在重叠。 我唯一需要做的就是颠倒它们在html中出现的顺序。

我不知道为什么z-index没有工作/没有服从。但是扭转他们的外表顺序很有效。

&#13;
&#13;
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);
&#13;
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;
  }
&#13;
<canvas id="cnv2">U no do HTML5, fix.</canvas>
<canvas id="cnv1">U no do HTML5, fix.</canvas>
&#13;
&#13;
&#13;