DIV will nicht über canvas und umgedreht

xorg1990 · 02. Feb. 2018

Hi, die Problemchen hören nicht auf. Ich wollte erst ein DIV über ein Canvas legen was mir aber nicht gelang, man sieht es einfach nicht.

Also wollte ich ein canvas im div "appenden" mit jquery aber ich sehe das canvas auch nicht, selbst wen ich das div mit opacity transparent gestalte das canvas ist nicht da. Wenn ich mit den Entwicklertools die Elemente durchsuche ist es aber sehr wohl da, man sieht es nur nicht.

Code:

 			let div = $("<div></div>").css({
					position: "relative",
					zIndex: -1,
					backgroundColor: "green",
				    width: "320px",
					height: "200px"
  			}).attr({
  					id: chStr,
  			});

  			let can = $("<canvas></canvas>").css({
					backgroundColor: "rgba(51, 51, 51, 0.4)",
					position: "abolute",
					zIndex: 0,
					top: "15px"
  			}).attr({
  					class: chStr,
  				    width : 320,
					height: 160
  			});

  			div.append(can);

Das ganze gehört mit zu diesem Thema http://forum.jswelt.de/javascript/63853-offscreencanvas-webworker-problem.html

- - - Aktualisiert - - -

Das ganze ist ein wenig komisch.

Habe diese dom :

Code:

<div>
Text Content blablabla
<canvas></canvas>
</div>

Wenn ich den Dom erzeuge ist alles in Ordnung, aktualisiere ich aber den Text Content, dann verschwindet das Canvas. Also es ist nicht mehr im Dom.. gelöscht.

document.querySelector("#myCanvasID") = null.

der witz ist das ich das Canvas einmalig dem worker zuweiße:

Code:

let offscreen = document.querySelector("."+chStr).transferControlToOffscreen();
 worker.postMessage({workerID: null, canvas: offscreen, fftTimeData : null}, [offscreen]);

Auch wenn das canvas gelöscht wird kommt es zu keiner Fehlermeldung, verrückt.

So rum bleibt das div erhalten aber ich sehe nix, das div ist immer irwie im Hintergrund.

Code:

<canvas>
<div>
Text Content blablabla
</div>
</canvas>

Ob das valider html code ist weiß ich auch nicht.

fillText funktioniert in der offscrencanvas Api nicht oder noch nicht. Sonnst würde ich ja nicht solche Quantensprünge machen^^

kkapsner · 02. Feb. 2018

Wenn du den textContent setzt, wird das canvas einfach aus dem DOM ausgehängt. Existieren tut es noch - deswegen keine Fehlermeldung.
Das div im canvas ist invalides HTML und der Inhalt wird nur angezeigt, wenn der Browser canvas gar nicht unterstützt.

Wenn du Text über das Canvas positionieren willst, musst du das Element "neben" dem canvas platzieren:

Code:

<span>dein Text</span><canvas></canvas>[code] Die Positionierung musst du dann per CSS machen.

xorg1990 · 02. Feb. 2018

kkapsner schrieb:

Code:

 Die Positionierung musst du dann per CSS machen.[/QUOTE]
Ok doki. Seuftz den ganzen css krempel umändern...naja nützt nix:mad:

Wäre einfach gewesen wenn die Offscreen canvas fillText bug frei unterstützt . Möchtet aber nicht warten, ehe das soweit ist, fliest noch viel Wasser die Elbe hinab.

[SIZE=1]- - - Aktualisiert - - -[/SIZE]

@kkapsner es will mir nicht gelingen css ist the Evil within HTML.

Habe das mal runtergeschraubt:
[HTML]
<!DOCTYPE html>
<html>

<head>
	<title>test</title>
	<style type="text/css">
 #rahmen{
     border: 1px solid black;
     width: 100%;
     height: 700px;
}

 #zentrum {
 	 height:150px;
     width:300px;
     text-align:left;
     position: absolute;
     top:50%;
     left:40%;
     margin:auto;
     background-color:green;
}
 #mainVolume{
     margin: 5px;
}
 #leftBank{
     width : 400px;
     height: 800px;
}
 #rightBank{
     float: right;
}
 #center_LFE{
     width : 656px;
     height: 190px;
     margin: 0 auto;
}
 #centerBank{
     margin-bottom: 10px;
     width: 100%;
     height: 180px;
}
 #left{
 	margin-left: 8px;
    float: left;
}
 #right{
 	margin-right: 8px;
     float: right;
}
 #center{
     float: right;
     margin-left: : -400px;
}
 #LFE{
     float: left;
}
 #leftSourroundBack{
 	 margin-top: 8px;
     margin-left: 8px;
}
 #rightSourroundBack{
     margin-right: 8px;
}
 #leftSourround{
     margin-top: 18px;
     margin-left: 8px;
}
 #rightSourround{
     margin-top: 17px;
     margin-right: 8px;
}

 .infos{
     width : 320px;
     height: 190px;
     background-color: rgba(51, 51, 51, 0.4);
}

	</style>
	</head>
<body  onload="run()">
<div id="rahmen">
<div id="centerBank">
	<div class="infos" id="left"></div>
	<div id="center_LFE">
		<div class="infos" id="LFE"></div>
		<div class="infos" id="center"></div>
	</div>
	<div class="infos" id="right"></div>
</div>
<div id="leftBank">
	<div class="infos" id="leftSourround"></div>
	<div class="infos" id="leftSourroundBack"></div>
</div>
<div id="rightBank">
	<div class="infos" id="rightSourround"></div>
	<div class="infos" id="rightSourroundBack"></div>
</div>
<div  id="zentrum">
	<div id="mainVolume">Volume Here</div>
</div>
	<div id="player"></div>
</div>
</body>
</html>
[/HTML]
Das div [INLINE]<div class="infos" id="right"></div>[/INLINE] tümpelt irgendwo rum und [INLINE]<div id="rightBank">[/INLINE] ist irwo ganz unten zu finden

kkapsner · 06. Feb. 2018

Das Problem ist nicht CSS, sondern float. Das ist definitiv das evil within:

Code:

<!DOCTYPE html>
<html>

<head>
	<title>test</title>
	<style type="text/css">
 #rahmen{
     border: 1px solid black;
     width: 100%;
     height: 700px;
}

 #zentrum {
 	 height:150px;
     width:300px;
     text-align:left;
     position: absolute;
     top:50%;
     left:40%;
     margin:auto;
     background-color:green;
}
 #mainVolume{
     margin: 5px;
}
 #leftBank{
     width : 400px;
     height: 800px;
}
 #rightBank{
     float: right;
}
 #center_LFE{
     width : 656px;
     height: 190px;
     margin: 0 auto;
}
 #centerBank{
     margin-bottom: 10px;
     width: 100%;
     height: 180px;
}
 #left{
 	margin-left: 8px;
    float: left;
}
 #right{
 	margin-right: 8px;
     float: right;
}
 #center{
     float: right;
     margin-left: : -400px;
}
 #LFE{
     float: left;
}
 #leftSourroundBack{
 	 margin-top: 8px;
     margin-left: 8px;
}
 #rightSourroundBack{
     margin-right: 8px;
}
 #leftSourround{
     margin-top: 18px;
     margin-left: 8px;
}
 #rightSourround{
     margin-top: 17px;
     margin-right: 8px;
}

 .infos{
     width : 320px;
     height: 190px;
     background-color: rgba(51, 51, 51, 0.4);
}

	</style>
	</head>
<body  onload="run()">
<div id="rahmen">
<div id="centerBank">
	<div class="infos" id="left"></div>
	<div class="infos" id="right"></div>
	<div id="center_LFE">
		<div class="infos" id="LFE"></div>
		<div class="infos" id="center"></div>
	</div>
</div>
<div id="rightBank">
	<div class="infos" id="rightSourround"></div>
	<div class="infos" id="rightSourroundBack"></div>
</div>
<div id="leftBank">
	<div class="infos" id="leftSourround"></div>
	<div class="infos" id="leftSourroundBack"></div>
</div>
<div  id="zentrum">
	<div id="mainVolume">Volume Here</div>
</div>
	<div id="player"></div>
</div>
</body>
</html>

- die Elemente, die "floaten", müssen vor anderen Elementen sein.

Ich würde dir empfehlen, dir mal Grid-Layouts anzusehen. Damit bekommst du das viel nachvollziehbarer hin.

DIV will nicht über canvas und umgedreht

xorg1990

New member

kkapsner

Super Moderator

xorg1990

New member

kkapsner

Super Moderator