２つの図を重ねて表示したい

解決済

質問者：kiara007
質問日時：2011/12/12 18:45
回答数：2件

HTMLもJavaScriptも初心者です。

*.png の図と canvas に書いた図を重ねて表示したいのですが、canvas に書いた図が *.png に隠れて表示されません。

コーディングは次のとおりです。

<html>

<title>figures</title>

</head>

<body>
<div id=lyrwall
style="position:absolute; left:20px; top:20px;">
<img src=figure.png>
</div>
<canvas id="canvassample" width="500" height="500">
<script type="text/javascript">
onload = function() {
draw();
};
function draw() {
var canvas = document.getElementById('canvassample');
if ( ! canvas || ! canvas.getContext ) {
return false;
}
/* 2Dコンテキスト */
var ctx = canvas.getContext('2d');
/* 線を引く */
ctx.beginPath();
ctx.moveTo(20, 20);
ctx.lineTo(480, 480);
ctx.stroke();
}
</script>

</canvas>
</body>

</html>

直線のうち、figure.png と重なる部分が表示されません。表示されるようにするにはどうすればいいのでしょうか。よろしくお願いいたします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

ベストアンサー優先
最新から表示
回答順に表示

No.2ベストアンサー

回答者： ORUKA1951
回答日時：2011/12/16 18:32

canvasは(Flow content,Phrasing content,Embedded content.Embedded content)で、sectioningやgroupingコンテントではない(HTML4.01で言うところのインライン要素な)ので、必ず<p>などで囲む必要があります。

　それはさておき、画像を含むdiv要素(pで良いと思いますが・・)にposition:absoluteが指定されていますから、指定されていないstaticな要素から独立して上に乗ります。
　canvasを、sectioningコンテントかgroupingコンテント(p,figure,aside,sectionなど)に入れて、それもabsoluteすると良いでしょう。その際、z-indexを使うならソース上の出現順位には関わらず、上下(前後)を指定できます。

　HTML5は、HTML4.01より文書構造をきちんとマークアップすることが求められます。まず、それをしっかり身につけないと、先に勧めませんよ。
<figure class="menue">
　<p class="backImage"><img></p>
　<p class="overCanvas"><canvas></p>
</figure>

figure.manue{position:absolute;top:20px;left:20px;width:500px;height:500px;margin:0 auto;}
figure.manue p.backImage{margin:0;}
figure.menue p.overCanvas{position:absolute;top:0;left:0;}