我想查看所有图层黄色正方形的确切位置和大小
我想将所有图层放置在黄色矩形内的中心宽度和top;10px;处。
包括layerA在内的所有图层均应为width:1000px height:500px
我尝试通过多种方式做到这一点，但超出了我的理解范围。
我知道可以做到，但是在我的代码中犯了错误。
感谢您的帮助。
Demo jsFiddle
我的代码：
<!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>
最佳答案
看看这个jsFiddle example
首先，// comment在CSS中不是有效的注释语法。这是在修改您的代码。
请对CSS内联注释使用/* comments */。
其次，为了按照我的要求放置画布元素，我包含了以下CSSc代码：
#layers {position:absolute; width:1000px; height:500px; padding:0; margin-left: -500px; left: 50%; z-index:1; top:10px; background-color:blue; }/*contain all layers*/
#layers canvas{width: 200px;} #layerA {position:absolute; width:1000px; height:500px; top: 0px; left: 0px; padding:0; margin:0; z-index:4; background-color:green; border:1px gre solid; left:0; top:0;}/*background screen show*/
#layerB {position:absolute; width:1000px; height:500px; top: 0px; left: 0px; 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; top: 0px; left: 0px; 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; top: 0px; left: 0px; padding:0; margin:0; z-index:5; background-color:azure; border:1px azure solid; }/*create ball*/
为了使1000px宽的绝对定位元素居中，我添加了
left: 50%; margin-left: -500px。这实际上是告诉浏览器将元素的最左边缘放置在其容器的50％（在本例中为文档主体）处，然后将其向左移动其宽度的一半（以像素为单位）。这样可以将其正确放置在中央仅供参考-我强烈建议您在此处使用类而不是ID，以避免重复的，不可读的CSS代码。
关于javascript - 如何将 Canvas 的所有图层居中？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/15529713/