Wie man zwei Leinwände nebeneinander und über eine dritte platziert

Brauchen Sie Rat zu HTML 5. Bin relativ neu zu diesem Thema.Wie man zwei Leinwände nebeneinander und über eine dritte platziert

Ich möchte ein Bild über die obere Hälfte des Bildschirms mit zwei Objekten, Logo und einem Namen über dieses Bild an festen Orten platziert werden. Ich habe versucht, die drei Objekte in drei verschiedene Leinwände innerhalb desselben div, aber kein Glück zu platzieren, dann legte die drei Objekte in drei verschiedenen <div> Werte, aber kein Glück wieder.

Zu Erklärungszwecken ließ ich das Haupthintergrundbild fallen und versuchte zu experimentieren, nur die zwei Leinwände nebeneinander zu halten, aber leider keinen Erfolg. Dieser Code ist wie folgt:

<!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>

und das entsprechende CSS-Blatt ist wie folgt:

#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; 
}

Hilfe anfordern mit etwas ausführlichere Erklärung für Neulinge in das Thema. Bitte geben Sie auch an, wie ich das dritte Hauptunterlagsbild auf diese beiden Leinwände einfüge?

Dank

Quelle

2016-04-17 quasar66

ein div-Container mit position:relative erstellen und stellen Sie Ihre 3 Leinwände innen mit position:absolute und verwenden left die Leinwände zu bewegen, wie gewünscht.

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>

Quelle

2016-04-18 02:50:13 markE

ein Anfang ein großes Dankeschön - seine die Grenzen richtig zu zeichnen, aber seine Zeichnung nicht die Bilder (das Skript, wie in meinem ursprünglichen Problem gegeben, aber modifiziert, um die Änderungen enthalten) - jede Hinweise warum? – quasar66

Gern geschehen - froh, dass ich helfen konnte. * Über Ihr JavaScript: * Sie müssen warten, bis das DOM vollständig geladen ist, bevor Sie Ihr Skript ausführen. Sie verwenden [window.onload] (https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onload). Wenn Sie 'logo_img.src' einstellen, müssen Sie erneut darauf warten, dass das neue Bild geladen wird, bevor Sie' logo_context.drawImage' ausführen, indem Sie den 'logo_img.onload' Callback setzen. – markE

Wie man zwei Leinwände nebeneinander und über eine dritte platziert

Antwort

Verwandte Themen