すべてのレイヤーを表示したい 黄色い四角の正確な位置とサイズ
top;10px;すべてのレイヤーを幅の中央に配置し、黄色の長方形の内側に配置したいと考えています。すべてのレイヤーにレイヤーAが含まれている必要がありますwidth:1000px height:500px
私は多くの方法でそれをやろうとしていますが、私の理解を超えています。
私はそれができることを知っていますが、私のコードでは間違っています。
どんな助けにも感謝します。
私のコード:
<!DOCTYPE HTML>
<html>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> - jsFiddle demo</title>
<style type='text/css'>
body {background-color:black; padding:0; margin:0; }
#layers {position:relative; width:1000px; height:500px; padding:0; margin-left:auto; margin-right:auto; z-index:1; top:10px; background-color:blue; }//contain all layers
#layerA {position:absolute; width:1000px; height:500px; padding:0; margin:0; z-index:4; background-color:green; border:1px green solid; left:0; top:0;}//background screen show
#layerB {position:absolute; width:1000px; height:500px; padding:0; margin:0; z-index:2; background-color:red; border:1px red solid; visibility:hidden; }//Variable animation hidden
#layerC {position:absolute; width:1000px; height:500px; padding:0; margin:0; z-index:3; background-color:brown; border:1px brown solid; display:none; }//Variable animation hidden
#layerD {position:absolute; width:1000px; height:500px; padding:0; margin:0; z-index:5; background-color:azure; border:1px azure solid; }//create ball
#pos{top:50px; left:10px; color:white; font-size:16px;}
#status{position;absolute; top:10px; left:10px; color:white; font-size:16px;}
#status1{position;absolute; top:20px; left:10px; color:white; font-size:16px;}
#fps_count {position: absolute; top: 10px; right: 0px; width:150px; font-size: 20px;
color: white; font-family: 'Happy Sans', cursive; border:1px red solid;}
/* Loading */
#loading {position:relative; width:1000px; height:500px; padding:0; margin-left:auto; margin-right:auto; top:10px; background:yellow; z-index:1;}
#loading #barCont {width: 400px; height: 20px; position: absolute;
top: 50%; left: 50%; margin: -10px 0 0 -200px; background: black;}
#loading #bar {width: 0; height: 20px; position: absolute; left: 0; background: #F3FF67;}
</style>
</head>
<body>
<div id="loading">
<p id="loadText">Loading...</p>
<div id="barCont"></div>
<div id="bar"></div>
</div>
<div id="layers">
<canvas id="layerA" ></canvas>
<canvas id="layerB" ></canvas>
<canvas id="layerC" ></canvas>
<canvas id="layerD" ></canvas>
</div>
<div id="fps_count">71 32 58 FPS</div>
<div id="pos">pos</div>
<div id="status">status</div>
<div id="status1">status1</div>
<script>
var WW = 1400,WH = 700,WTH = 1000,HTH = 500;
var layerA = document.getElementById('layerA'),//layer background
CanvasA = layerA.getContext('2d');
layerA.width = 300;//width size of image background
layerA.height = 150;//height size of image background
var layerB = document.getElementById('layerB'),//senvich animation hidden
CanvasB = layerB.getContext('2d');
layerB.width = WW;
layerB.height = WH;
var layerC = document.getElementById('layerC'),//DEFINE layerBVariable it use as a variable
CanvasC = layerC.getContext('2d');
layerC.width = WW;
layerC.height = WH;
var layerD = document.getElementById("layerD"),//createball
CanvasD = layerD.getContext('2d');
layerD.width = WW;
layerD.height = WH;
CanvasA.clearRect(0,0,300,150);
CanvasA.fillStyle= 'green';
CanvasA.fillRect(0,0,300,150);
CanvasB.clearRect(0,0,WW,WH);
CanvasB.fillStyle= 'red';
CanvasB.fillRect(0,0,WW,WH);
CanvasC.clearRect(0,0,WW,WH);
CanvasC.fillStyle= 'brown';
CanvasC.fillRect(0,0,WW,WH);
CanvasD.clearRect(0,0,WW,WH);
CanvasD.fillStyle= 'azure';
CanvasD.fillRect(0,0,WW,WH);
</script>
</body>
</html>