Mehere canvases anordnen

**xorg1990** · 30-01-2018, 10:12

Hi, dieses css treibt mich noch in den Wahnsinn.

Habe mehrere canvas, die in den div's dargestellt werden sollen wie im HTML Dom.

Code:

<!DOCTYPE html>
<html>

<head>
	<title>test</title>
	<style type="text/css">
	#rahmen{
		width: 100%
		height: 100%
	}

#mainVolume{
	margin: 5px;
}

#leftBank{
	float: left;
	border: 1px solid black;
	width: 350px;
	height: 1000px;
}

#rightBank{
	float: right;
	border: 1px solid black;
	width: 350px;
	height: 1000px;
}

#center_LFE{
	width: 650px;
	height: auto;
	margin: 0 auto;
}

#centerBank{
	border: 1px solid black;
	width: 100%;
	height: 161px;
}

#left{
	margin-left: 8px;
 float: left;
}

#right{
	margin-right: 8px;
	float: right;
}

#center{
	margin-left: 5px;
	float: right;
}

#LFE{
	float: left;
	margin-right: 5px;
}

#leftSourroundBack{
margin-left: 8px;
 float: left;
}

#rightSourroundBack{
margin-right: 8px;
	float: right;
}

#leftSourround{
margin-left: 8px;
 float: left;
}

#rightSourround{
margin-right: 8px;
	float: right;
}


	</style>

	</head>
<body  onload="run()">
<div id="rahmen">
<div id="centerBank">
	<div id="center_LFE">
		<canvas style="background-color: rgba(51, 51, 51, 0.4); width=320; height=160;" id="LFE" width="320" height="160"></canvas>
		<canvas style="background-color: rgba(51, 51, 51, 0.4); width=320; height=160;" id="center" width="320" height="160"></canvas>
	</div>
	<canvas style="background-color: rgba(51, 51, 51, 0.4); width=320; height=160;" id="left" width="320" height="160"></canvas>
	<canvas style="background-color: rgba(51, 51, 51, 0.4); width=320; height=160;" id="right" width="320" height="160"></canvas>
</div>
<div id="leftBank">
	<canvas style="background-color: rgba(51, 51, 51, 0.4); width=320; height=160;" id="leftSourroundBack" width="320" height="160"></canvas>
	<canvas style="background-color: rgba(51, 51, 51, 0.4); width=320; height=160;" id="rightSourround" width="320" height="160"></canvas>
</div>
<div id="rightBank">
	<canvas style="background-color: rgba(51, 51, 51, 0.4); width=320; height=160" id="rightSourroundBack" width="320" height="160"></canvas>
	<canvas style="background-color: rgba(51, 51, 51, 0.4); width=320; height=160;" id="rightSourround" width="320" height="160"></canvas>
</div>
<div  class="block center">
	<div id="mainVolume">Volume Here</div>
</div>
</div>
</body>
</html>

diese 2 canvas

<canvas style="background-color: rgba(51, 51, 51, 0.4); width=320; height=160;" id="left" width="320" height="160"></canvas>

	<canvas style="background-color: rgba(51, 51, 51, 0.4); width=320; height=160;" id="right" width="320" height="160"></canvas>

sind alle außerhalb von <div id="centerBank">

Und dadurch kommt alles durcheinander. canvas "left" soll in <div id="centerBank"> links steh und canvas "right", rechts.

*die canvases werden später dynamisch erzeugt deswegen das unhübsche inline css.

**kkapsner** · 30-01-2018, 18:10

Wenn du sowieso bei den Breiten und Höhen schon mit absoluten Pixelzahlen arbeitest, warum positionierst du die canvas dann nicht einfach mit position: absolute;?

**xorg1990** · 30-01-2018, 19:01

Ich kann die Position auf "absolute" stellen aber daran ändert sich nichts.

Welche absoluten Pixelzahlen meinst du konkret, die css Angaben widht, height, habe ich aus Verzweiflung da stehen.

Css angaben weg und..es hat sich nichts verändert. Kann's auch mal irwo Hosten..

Ok, das das Problem ist dieses

HTML-Code:

<div id="centerBank">
	<div id="center_LFE">
		<canvas style="background-color: rgba(51, 51, 51, 0.4); width=320; height=160;" id="LFE" width="320" height="160"></canvas>
		<canvas style="background-color: rgba(51, 51, 51, 0.4); width=320; height=160;" id="center" width="320" height="160"></canvas>
	</div>
	<canvas style="background-color: rgba(51, 51, 51, 0.4); width=320; height=160;" id="left" width="320" height="160"></canvas>
	<canvas style="background-color: rgba(51, 51, 51, 0.4); width=320; height=160;" id="right" width="320" height="160"></canvas>
</div>

geändert nach:

HTML-Code:

<div id="centerBank">
	<canvas style="background-color: rgba(51, 51, 51, 0.4); width=320; height=160;" id="left" width="320" height="160"></canvas>
	<canvas style="background-color: rgba(51, 51, 51, 0.4); width=320; height=160;" id="right" width="320" height="160"></canvas>
	<div id="center_LFE">
		<canvas style="background-color: rgba(51, 51, 51, 0.4); width=320; height=160;" id="LFE" width="320" height="160"></canvas>
		<canvas style="background-color: rgba(51, 51, 51, 0.4); width=320; height=160;" id="center" width="320" height="160"></canvas>
	</div>
</div>

Und schon passt es.

Aber die dynamisch Erstellung passiert nun mal nicht unbedingt in der Reihenfolge. Oder muss ich dann prepend nutzen?

Code:

  		function generateCanvas(chStr){
  			//<canvas style="background-color: rgba(51, 51, 51, 0.4); width=320; height=160; id="'+chStr.trim()+'" width="320" height="160"
  			let canvas = $("<canvas></canvas>").css({
					backgroundColor: "rgba(51, 51, 51, 0.4)",
					width : 320,
					height: 160
  			}).attr({
  					id: chStr,
  				    width : 320,
					height: 160
  			});
  			switch(chStr){
  			  case "right"://channel 1 right channel 
  			  		$("#centerBank").append(canvas);
		      break;
		       case "center": //channel 2 center channel 
		        	$("#center_LFE").append(canvas);
		      break;
		       case "LFE": //channel 3 LFE channel
		           $("#center_LFE").append(canvas);
		      break;
		       case "leftSourroundBack": //channel 4 links hinten
		       		$("#leftBank").append(canvas);
		      break;
		       case "rightSourroundBack"://channel 5 rechts hinten
		       		$("#rightBank").append(canvas);
		      break;
		       case "leftSourround"://channel  6 links mitte
		       		$("#leftBank").append(canvas);
		      break;
		       case "rightSourround"://channel  7 rechts mitte
		       		$("#rightBank").append(canvas);
		      break;
		      //channel 0 left channel 
		       default: $("#centerBank").append(canvas);
  			}
  		}

**kkapsner** · 30-01-2018, 20:30

Wenn du absolute Positionierung verwendest, musst du natürlich mit top, left, right oder bottom sagen, wo du es haben willst.

prepend() klingt nach einer guten Idee, wenn du damit dein CSS gelöst bekommst.