Überlagerte HTML-Canvas-Elemente

Ich habe eine WWWeb-Seite mit gestapelten <canvas> Elementen. Das Ziel besteht darin, etwas Bleibendes auf die untere Leinwand zu zeichnen und wiederholt auf der oberen Leinwand zu zeichnen, zu löschen und neu zu zeichnen. Laut w3.org und this StackOverflow article (How do I make a transparent canvas in html5?) sind Canvas-Elemente standardmäßig transparent. Was ich sehe, ist, dass sie nicht nur nicht transparent sind, sondern dass die Überlagerung über z-index nicht funktioniert. Hier ist eine „Vanilla“ -Version der Code der Seite (komplett und verwendet, um die Bilder zu erzeugen):Überlagerte HTML-Canvas-Elemente

<html> 
    <head> 
     <title>Canvas Stack</title> 
     <script> 
      function doStuff() { 
       drawStuff(document.getElementById("lowerCanvas"), 0, 1); 
       drawStuff(document.getElementById("upperCanvas"), 1, 0); 
      } 
      function drawStuff(cvs, p0X, p1X) { 
       var ctx = cvs.getContext("2d"); 
       ctx.clearRect(0, 0, cvs.width, cvs.height); 
       ctx.strokeStyle = cvs.style.color; 
       ctx.beginPath(); 
       ctx.moveTo(p0X * cvs.width, 0); 
       ctx.lineTo(p1X * cvs.width, cvs.height); 
       ctx.stroke(); 
      } 
     </script> 
    </head> 
    <body onload="doStuff();" style="border:solid;"> 
     <canvas id="lowerCanvas" style="color:red;height:200px;left:0;position:inherit;top:0;width:300px;z-index:0;" /> 
     <canvas id="upperCanvas" style="color:blue;height:200px;left:0;position:inherit;top:0;width:300px;z-index:1;" /> 
    </body> 
    </html>

und hier ist das Ergebnis:

Wenn ich tauschen die Reihenfolge der Canvas-Elemente

<canvas id="upperCanvas" style="color:blue;height:200px;left:0;position:inherit;top:0;width:300px;z-index:1;" /> 
    <canvas id="lowerCanvas" style="color:red;height:200px;left:0;position:inherit;top:0;width:300px;z-index:0;" />

das Ergebnis ist

Es scheint, als ob die z-index ignoriert wurde und dass die Reihenfolge der Deklaration Vorrang hat.

Was ich will, ist

(synthetisches Bild)

Das Verhalten ist identisch in Chrome, Rand, Firefox und Internet Explorer unter Windows 10. Das bin ich zuversichtlich macht, dass ich Ich vermisse nur etwas Detail, anstatt eine Anomalie zu erleben. Allerdings bekomme ich eine abgeflachte Stirn, weil ich meinen Kopf gegen eine Wand geschlagen habe und ich würde hier eine Anleitung sehr schätzen.

Vielen Dank, alle!

Einige Anmerkungen (vielleicht irrelevant, vielleicht auch nicht):

style="position:absolute; ... (ohne die left und top Einträge) die gleichen wie style="left:0;position:absolute;top:0; ...
In ähnlicher Weise zu tun scheint, style="position:inherit; ... ist wahrscheinlich erforderlich, wenn die Zeichenfläche innerhalb der Tabelle <td> liegen soll und dass <td> eine andere als die erste in einer <tr> ist.

Quelle

2017-04-11 user1601638

<html> 
 
    <head> 
 
     <title>Canvas Stack</title> 
 
     <script> 
 
      function doStuff() { 
 
       drawStuff(document.getElementById("lowerCanvas"), 0, 1); 
 
       drawStuff(document.getElementById("upperCanvas"), 1, 0); 
 
      } 
 
      function drawStuff(cvs, p0X, p1X) { 
 
       var ctx = cvs.getContext("2d"); 
 
       ctx.clearRect(0, 0, cvs.width, cvs.height); 
 
       ctx.strokeStyle = cvs.style.color; 
 
       ctx.beginPath(); 
 
       ctx.moveTo(p0X * cvs.width, 0); 
 
       ctx.lineTo(p1X * cvs.width, cvs.height); 
 
       ctx.stroke(); 
 
      } 
 
     </script> 
 
    </head> 
 
    <body onload="doStuff();" style="border:solid;"> 
 
    <div style="position:relative;min-height:200px"> 
 
     <canvas id="lowerCanvas" style="color:red;height:200px;left:0;position:absolute;top:0;width:300px;z-index:0;"></canvas> 
 
     <canvas id="upperCanvas" style="color:blue;height:200px;left:0;position:absolute;top:0;width:300px;z-index:1;"></canvas> 
 
    </body> 
 
    </html>

Sie müssen explizit Ihre Canvas-Elemente schließen. schließen Sie es einfach mit:

<canvas id="lowerCanvas" style="color:red;height:200px;left:0;position:inherit;top:0;width:300px;z-index:0;"></canvas>

statt der Nähe eingebettet "/>"

ich eingeschlossen sie auch in einem div und verwendet position: absolute, so dass sie tatsächlich überlappen ...

Quelle

2017-04-11 21:39:46 fmacdee

Überlagerte HTML-Canvas-Elemente

Antwort

Verwandte Themen