Question

我想看到所有图层黄色正方形的确切位置和大小

我想将所有图层放置在黄色矩形内的中心宽度和top;10px;。所有图层都包含layerA应为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>

Answer 1

看看这个jsFiddle example

首先，// comment不是CSS中的有效注释语法。这搞砸了你的代码。请使用/* comments */进行CSS内联通知。

其次，为了定位你想要的我认为的画布元素，我已经包含了这个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代码。

如何将所有图层中心画布？

1 个答案: