如何居中所有的图层画布

How to center all the layers canvas?

本文关键字：图层 何居中      更新时间：2023-09-26

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

我想把所有的图层设置为居中宽度和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的例子

首先，// 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代码。

相关文章：