html5 - élément toile - couches multiples

Question

Sans aucune bibliothèque d'extension, est-il possible d'avoir plusieurs couches dans le même élément de toile?

Donc, si je fais un clearRect sur la couche supérieure, il ne sera pas effacer celle du bas?

Merci.

Answer 1

Non, mais vous pouvez superposer plusieurs éléments <canvas> sur le dessus de l'autre et d'accomplir quelque chose de similaire.

<div style="position: relative;"> 
<canvas id="layer1" width="100" height="100" 
    style="position: absolute; left: 0; top: 0; z-index: 0;"></canvas> 
<canvas id="layer2" width="100" height="100" 
    style="position: absolute; left: 0; top: 0; z-index: 1;"></canvas> 
</div> 

Dessine ta première couche sur la toile layer1, et la deuxième couche sur la toile layer2. Ensuite, quand vous clearRect sur le calque du haut, tout ce qui est sur la toile inférieure montrera à travers.

Answer 2

associés à ceci:

Si vous avez quelque chose sur votre toile et que vous voulez dessiner quelque chose à l'arrière de celui-ci - vous pouvez le faire en modifiant le réglage de context.globalCompositeOperation à « destination-over » - et puis retournez-le à "source-over" lorsque vous avez terminé.

var co = document.getElementById('cvs').getContext('2d'); 

// Draw a red square 

co.fillStyle = 'red'; 
co.fillRect(50,50,100,100); 



// Change the globalCompositeOperation to destination-over so that anything 
// that is drawn on to the canvas from this point on is drawn at the back 
// of whats already on the canvas 

co.globalCompositeOperation = 'destination-over'; 



// Draw a big yellow rectangle 

co.fillStyle = 'yellow'; 
co.fillRect(0,0,600,250); 


// Now return the globalCompositeOperation to source-over and draw a 
// blue rectangle 

co.globalCompositeOperation = 'source-over'; 

co.fillStyle = 'blue'; 
co.fillRect(75,75,100,100); 

Answer 3

Vous pouvez créer plusieurs canvas éléments sans les annexant dans le document. Ceux-ci seront vos couches:

faire alors tout ce que vous voulez avec eux et à la fin tout simplement rendre leur contenu en ordre sur toile de destination en utilisant drawImage sur context.

Answer 4

j'avais trop ce même problème, je en plusieurs éléments en toile avec position: absolute fait le travail, si vous voulez enregistrer la sortie dans une image, qui ne va pas au travail. Je suis donc allé de l'avant et j'ai fait un simple "système" de codage comme si chaque couche avait son propre code, mais tout est rendu dans le même élément.

https://github.com/federicojacobi/layeredCanvas

Je compte d'ajouter des fonctionnalités supplémentaires, mais il le fera maintenant.

Vous pouvez faire plusieurs fonctions et les appeler pour les couches « faux ».

Answer 5

Vous pouvez également consulter le http://www.concretejs.com qui est un cadre en toile Html5 moderne et léger qui permet la détection de coupures, la superposition et bien d'autres choses périphériques. Vous pouvez faire des choses comme ceci:

var wrapper = new Concrete.Wrapper({ 
    width: 500, 
    height: 300, 
    container: el 
}); 

var layer1 = new Concrete.Layer(); 
var layer2 = new Concrete.Layer(); 

wrapper.add(layer1).add(layer2); 

// draw stuff 
layer1.sceneCanvas.context.fillStyle = 'red'; 
layer1.sceneCanvas.context.fillRect(0, 0, 100, 100); 

// reorder layers 
layer1.moveUp(); 

// destroy a layer 
layer1.destroy(); 

Answer 6

Je comprends que le Q ne veut pas utiliser une bibliothèque, mais je vais offrir ce pour d'autres provenant de recherches Google. @EricRowell a mentionné un bon plugin, mais, il y a aussi un autre plugin que vous pouvez essayer, html2canvas.

Dans notre cas, nous utilisons des PNG transparents en couches avec z-index en tant que widget «Product Builder». Html2canvas a travaillé avec brio pour faire bouillir la pile sans pousser les images, ni utiliser les complexités, les solutions de contournement et la toile "non-réactive" elle-même. Nous n'avons pas été en mesure de le faire en douceur/sane avec le canvas vanilla + JS.

D'abord, utilisez z-index sur les divs absolus pour générer du contenu en couches dans un wrapper positionné relatif. Ensuite, placez le wrapper dans html2canvas pour obtenir un canevas rendu, que vous pouvez laisser tel quel, ou en sortie en tant qu'image afin qu'un client puisse l'enregistrer.