10

以下はファイルコードです。キャンバスの下にmovementCanvasが必要です。

<html>
<head>
  <script type="text/javascript" src="game.js"></script>
</head>
<body>

  <canvas id="canvas" width="710" height="597" style="border:1px solid #c3c3c3;">
    <p>Your browser doesn't support canvas!</p>
  </canvas>

  <canvas id="movementCanvas" width="710" height="597" style="border:1px solid #c3c3c3;">
  </canvas>

</body>
</html>

2番目の質問。より高いレベルでは、下のキャンバスを非表示にしようとしています。MovementCanvasは色分けされたマップで、クリックするとどのような値になるかを調べます。ピクセルにアクセスする唯一の方法は、HTML5キャンバスとコンテキストを使用することです。一番上の「キャンバス」はフロントエンドで、見栄えがするはずです。それはこれを行うための正しい方法のように聞こえますか？

4

1 に答える 1

14

CSSを使用しposition: absoluteます。次のCSSをページに追加します。

canvas {
    position: absolute;
    top: 0;
    left: 0;
}

これにより、両方のキャンバスが同じ場所（左上の部分）に配置されます。

それらをラッパー要素に配置することをお勧めします。ラッパー要素は、position: relativeその子要素が存在するために必要になります。たとえば、HTMLは次のようになります。

<div class="wrapper">
    <canvas id="canvas1" width="400" height="300"></canvas>
    <canvas id="canvas2" width="400" height="300"></canvas>
</div>

そして、CSSは次のようになります。

.wrapper {
    position: relative;
    width: 400px;
    height: 300px;
}

.wrapper canvas {
    position: absolute;
    top: 0;
    left: 0;
}

次に、ラッパーdivを配置しますが、他のものを配置します。

于 2012-04-06T00:11:49.047 に答える