2つの同じサイズのキャンバスを重ね合わせるにはどうすればよいですか？

以下はコードです。キャンバスの下にmoveCanvasが必要です。2つの同じサイズのキャンバスを重ね合わせるにはどうすればよいですか？

<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番目の質問です。より高いレベルで、私は下のキャンバスを隠そうとしています。 moveCanvasは色分けされたマップです。ここでクリックしたときにどのような値が参照されているかを調べます。また、ピクセルにアクセスする唯一の方法は、HTML5のキャンバスとコンテキストを使用する方法です。トップの「キャンバス」はフロントエンドであり、すばらしく見えるはずです。それはこれを行うための純粋な方法のように聞こえるか？

出典

2012-04-05 user422318

CSSのposition: absoluteを使用してください。あなたのページに次のCSSを追加します。

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

これは、同じ場所で両方のキャンバスを置く：TOPLEFT-ほとんどの部分。

子要素を含めるには、ラッパー要素に入れる必要があります（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-06 00:11:49

最初の質問：ラッパーdivのポイントは何ですか？ 2つのキャンバスを一緒に保つだけですか？ 2番目の質問：「キャンバス」は、ゲームの2Dクリック可能な地図です。配置のため、キャンバスのクリックが検出されなくなりました。どうすればそれに対処できますか？ – user422318

位置決め用のラッパーdivが存在します。両方のキャンバスにクリックを登録できるようにするには...完全にはわかりません。おそらくそれらを1つのキャンバスに統合できますか？ –

本当に2つのキャンバスが必要な場合は、上のキャンバスにキャンバスの下部にイベントを送信させることができます。 –

2つの同じサイズのキャンバスを重ね合わせるにはどうすればよいですか？

答えて

関連する問題