Ergebnis 1 bis 4 von 4
  1. #1
    Avatar von xorg1990
    xorg1990 ist offline König
    registriert
    19-12-2013
    Beiträge
    835

    DIV will nicht über canvas und umgedreht

    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/63...r-problem.html (‎OffscreenCanvas + WebWorker Problem)

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

  2. #2
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.632

    AW: DIV will nicht über canvas und umgedreht

    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.

  3. #3
    Avatar von xorg1990
    xorg1990 ist offline König
    registriert
    19-12-2013
    Beiträge
    835

    AW: DIV will nicht über canvas und umgedreht

    Zitat Zitat von kkapsner
    <span>dein Text</span><canvas></canvas>[code] Die Positionierung musst du dann per CSS machen.
    Ok doki. Seuftz den ganzen css krempel umändern...naja nützt nix

    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.

    - - - Aktualisiert - - -

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

    Habe das mal runtergeschraubt:
    HTML-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 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>
    Das div <div class="infos" id="right"></div> tümpelt irgendwo rum und <div id="rightBank"> ist irwo ganz unten zu finden
    Geändert von xorg1990 (02-02-2018 um 23:29 Uhr)

  4. #4
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.632

    AW: DIV will nicht über canvas und umgedreht

    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.

Ähnliche Themen

  1. [FRAGE] Canvas wird nicht auf canvas gerendert via drawImage
    Von xorg1990 im Forum JavaScript
    Antworten: 5
    Letzter Beitrag: 05-12-2014, 18:13
  2. Canvas-Zeichnungen werden nicht dargestellt?
    Von CidCreaper im Forum JavaScript
    Antworten: 5
    Letzter Beitrag: 20-08-2014, 23:28
  3. Antworten: 3
    Letzter Beitrag: 06-08-2012, 14:07
  4. Antworten: 3
    Letzter Beitrag: 02-11-2011, 15:29
  5. Select Box über Checkbox ändern oder umgedreht
    Von noxy88 im Forum JavaScript
    Antworten: 1
    Letzter Beitrag: 12-04-2007, 13:27

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •