-1

互いの上に配置された 2 つのキャンバス レイヤーがあります。

ただし、ページに対して相対的に配置する必要があります。

レイヤーの幅は 800、高さは 300 です。

画面のサイズに関係なく中央に配置し、画面のサイズごとに高さを調整したい.

現在私は使用しています：

<div>
    <canvas id="canvas" width="800" height="300"  style="position: absolute; left:20%; top: 40%; z-index: 0;"></canvas>
    <canvas id="canvasAnimation" width="800" height="300"  style="position: absolute; left: 20%; top: 40%; z-index: 0;"></canvas>
</div>

<br>そして、それを配置するためのスペースを作るためにたくさん使用します。

jQueryも使用しています。それが役立つ場合、画面の幅を取得する方法を知っています。

4

2 に答える 2

1

次のコードを使用して、コンテナーの残りの幅を設定すると、すべてが自動的に設定されます。

<div id="container" style="float:left; width:100px; height:200px;">
   <div style="position:relative; border:1px solid black; width:100%; height:100%">
     <canvas id="canvas" style="position: absolute; left:10%; top: 40%; z-index: 0;border:1px     solid #000000;background-color:red;width:80%; height:30%">CANVAS 1</canvas>
     <canvas id="canvasAnimation" style="position: absolute; left: 5%; top: 40%; z-index: -1;border:1px solid #000000;background-color:green;width:90%; height:30%">CANVAS 2    </canvas>
   </div>
</div>
于 2013-09-11T15:36:06.040 に答える
0

Nikhil Doomra が出した答えは近いものでした。

次のスタイル コードをコンテナに追加すると、常にページの中央に配置されます (ページがオブジェクトよりも広い場合)。

margin-left: auto; 
margin-right: auto;

したがって、コードは次のようになります。

<div id="container" style="margin-left: auto; margin-right: auto; width:100px; height:200px;">
  <div style="position:relative; border:1px solid black; width:100%; height:100%">
    <canvas id="canvas" style="position: absolute; left:10%; top: 40%; z-index: 0;border:1px     solid #000000;background-color:red;width:80%; height:30%">
      CANVAS 1
    </canvas>
    <canvas id="canvasAnimation" style="position: absolute; left: 5%; top: 40%; z-index: -1;border:1px solid #000000;background-color:green;width:90%; height:30%">
      CANVAS 2
    </canvas>
  </div>
</div>
于 2013-10-30T14:01:05.610 に答える