Éléments de canevas HTML superposés

J'ai une page WWWeb avec des éléments empilés <canvas>. Le but est de dessiner quelque chose de persistant dans la toile inférieure et dessiner, effacer et redessiner, à plusieurs reprises, dans la toile supérieure. Selon w3.org et this StackOverflow article (How do I make a transparent canvas in html5?), les éléments de canevas sont, par défaut, transparents. Ce que je vois, c'est que non seulement ils ne sont pas transparents, mais que la superposition via z-index ne fonctionne pas. Voici une version « vanille » du code de la page (complet et utilisé pour générer les images):Éléments de canevas HTML superposés

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

et voici le résultat:

Si j'échange l'ordre des éléments de toile

<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;" />

le résultat est

Il semble que le z-index ait été ignoré et que l'ordre de déclaration soit prioritaire.

Ce que je veux est

(image de synthèse)

Le comportement est identique dans Chrome, Edge, Firefox et Internet Explorer sous Windows 10. Cela me rend confiant que je Il me manque juste quelques détails plutôt que de vivre une anomalie. Cependant, je reçois un front aplati de me frotter la tête contre un mur et j'apprécierais vraiment quelques conseils, ici.

Merci à tous!

Quelques notes (peut-être sans importance, peut-être pas):

style="position:absolute; ... (sans les left et top entrées) semble faire la même chose que style="left:0;position:absolute;top:0; ...
De la même manière, style="position:inherit; ... est probablement nécessaire si le canevas doit résider à l'intérieur d'une table <td> et que <td> est autre que le premier dans un <tr>.

Source

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>

Vous devez fermer explicitement vos éléments de toile. fermer simplement avec:

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

au lieu de l'embarqué près « /> »

Je leur ai aussi enfermé dans une position de div et utilisé: absolu pour qu'ils se chevauchent en fait ...

Source

2017-04-11 21:39:46 fmacdee

Éléments de canevas HTML superposés

Répondre

Questions connexes