2つのキャンバスを互いに隣接して配置し、3番目のキャンバスの上に置く方法

HTML5に関するアドバイスが必要です。2つのキャンバスを互いに隣接して配置し、3番目のキャンバスの上に置く方法

私は2つのオブジェクト、ロゴ、およびこのイメージの上に固定された場所に置かれた名前で画面の上半分に画像を描画したいと考えています。 3つのオブジェクトを同じdiv内の3つの異なるキャンバスに配置しようとしましたが、運がない場合は、3つのオブジェクトを別々の3つの<div>値に配置しましたが、再び運はありません。

説明のために、私は主な背景イメージを落とし、2つのキャンバスだけを隣に置いて実験しましたが、残念なことに成功しませんでした。このコードは以下の通りです：

<!DOCTYPE html> 
<html lang="en-US"> 
<head> 
<meta charset="utf-8" /> 
<link rel="stylesheet" type="text/css" href="mls.css"></link> 
<title>HTML5 more difficult than 64 bit assembly</title> 
<img id="logo_image"></img> 
</head> 

<body> 
<div> 
<div id="header_logo"><canvas id="header_logo_canvas"></canvas></div> 
<div id="header_name"><canvas id="header_name_canvas"></canvas></div> 
<div style="clear:both";></div> 
</div> 
<script type="text/javascript"> 
    var logo_canvas = document.getElementById("header_logo_canvas"); 
    var logo_context = logo_canvas.getContext("2d"); 
    var logo_img = document.getElementById("logo_image"); 
    logo_img.src="logo v2.jpg"; 
    logo_context.drawImage(logo_img,logo_canvas.width/2,logo_canvas.height/2); 

    var h_name_canvas = document.getElementById("header_name_canvas"); 
    var h_name_context = h_name_canvas.getContext("2d"); 
    h_name_context.font="20px Arial"; 
    h_name_context.fillStyle="#0000FF"; 
    h_name_context.textAlign="left"; 
    h_name_context.fillText("HTML5",0,h_name_canvas.height/2); 
</script> 
</body> 
</html>

と対応するCSSシート以下の通りです：対象への新規参入に適したいくつかの詳細な説明と

#logo_image { 
    height:128px; 
    width:128px; 
} 
#header_logo_canvas { 
    border:3px; 
    border-color:black; 
    background:transparent; 
    height:200px; 
    width:200px; 
    z-index:1; 
} 
#header_name_canvas { 
    border:1px; 
    border-color:blue; 
    background:transparent; 
    height:200px; 
    width:600px; 
    z-index:0; 
} 
#header_logo { 
    position:absolute; 
    left:100px; 
    top:100px; 
    float:left; 
    width:200px; 
    background:transparent; 
} 
#header_name { 
    position:absolute; 
    left:300px; 
    top:100px;  
    width:600px; 
    background:transparent; 
}

ヘルプを要求します。また、これらの2つのキャンバスに3番目のメインアンダーレイ画像をどうやって導入するのかアドバイスしてください。

おかげ

出典

2016-04-17 quasar66

はposition:relativeでのdivコンテナを作成し、position:absoluteを内部あなたの3つのキャンバスを置き、必要に応じてキャンバスを移動するためにleftを使用しています。

var canvasB=document.getElementById("canvasBottom"); 
 
var ctxB=canvasB.getContext("2d"); 
 
var canvasL=document.getElementById("canvasLeft"); 
 
var ctxL=canvasL.getContext("2d"); 
 
var canvasR=document.getElementById("canvasRight"); 
 
var ctxR=canvasR.getContext("2d"); 
 

 
drawLine(ctxB,'red'); 
 
drawLine(ctxL,'green'); 
 
drawLine(ctxR,'blue'); 
 

 
function drawLine(ctx,color){ 
 
    ctx.beginPath(); 
 
    ctx.moveTo(0,0); 
 
    ctx.lineTo(ctx.canvas.width,ctx.canvas.height); 
 
    ctx.strokeStyle=color; 
 
    ctx.stroke(); 
 
}

#container{position:relative;border:1px solid gold;width:800px;height:400px;} 
 
.part{position:absolute;} 
 
#canvasBottom{left:0;border:2px solid red;} 
 
#canvasLeft{left:0;border:1px solid green;} 
 
#canvasRight{left:300px;border:1px solid blue;};

<h4>Red==bottom canvas, Green==Left canvas, Blue==Right canvas</h4> 
 
<canvas id="canvasBottom" class='part' width=700 height=350></canvas> 
 
<canvas id="canvasLeft" class='part' width=300 height=300></canvas> 
 
<canvas id="canvasRight" class='part' width=300 height=300></canvas>

出典

2016-04-18 02:50:13 markE

最初の大きな感謝 - そのが正しく境界線を描くが、そのイメージを描画しない（私の元の問題に与えられたとして、スクリプトを使用して、その変更を含むように変更） - 任意のなぜポインター？ – quasar66

あなたを歓迎します。私が手伝ってくれてうれしいです。 *あなたのJavaScriptについて：*スクリプトを実行する前に、DOMが完全に読み込まれるまで待つ必要があります。 [window.onload]（https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onload）を使用します。また、 'logo_img.son'を設定する場合は、' logo_img.onload'コールバックを設定して 'logo_context.drawImage'を実行する前に、新しいイメージが読み込まれるのを再度待つ必要があります。 – markE

2つのキャンバスを互いに隣接して配置し、3番目のキャンバスの上に置く方法

答えて

関連する問題