html5 – élément de canvas – Plusieurs couches

Non, cependant, vous pouvez superposer plusieurs éléments et accomplir quelque chose de similaire.

Dessinez votre premier calque sur le canevas layer1 et le second calque sur le canevas layer2 . Ensuite, lorsque vous clearRect le calque supérieur, tout ce qui se trouve sur le canevas inférieur apparaîtra.

Lié à ceci:

Si vous avez quelque chose sur votre canevas et que vous souhaitez dessiner quelque chose à l’arrière de celui-ci – vous pouvez le faire en modifiant le paramètre context.globalCompositeOperation sur “destination-over” – et le renvoyer ensuite à “source-over” re fait.

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

Vous pouvez créer plusieurs éléments de canvas sans les append au document. Ce seront vos couches :

Ensuite, faites ce que vous voulez avec eux et, à la fin, restituez leur contenu dans le bon ordre sur le canevas de destination en utilisant drawImage le context .

J’ai eu ce même problème aussi, alors que plusieurs éléments de canvas avec position: absolu fait le travail, si vous voulez enregistrer la sortie dans une image, cela ne va pas fonctionner.

Je suis donc allé de l’avant et ai fait un simple “système” de superposition pour coder comme si chaque couche avait son propre code, mais tout est rendu dans le même élément.

https://github.com/federicojacobi/layeredCanvas

J’ai l’intention d’append des capacités supplémentaires, mais pour le moment, ça va le faire.

Vous pouvez faire plusieurs fonctions et les appeler pour “falsifier” les calques.

Vous pouvez également consulter http://www.concretejs.com qui est un framework de canevas Html5 moderne et léger qui permet la détection des hits, la superposition et de nombreux autres objects 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(); 

Je comprends que le Q ne veut pas utiliser une bibliothèque, mais je proposerai cela pour les autres provenant de recherches Google. @EricRowell a mentionné un bon plugin, mais vous pouvez aussi essayer un autre plugin, html2canvas .

Dans notre cas, nous utilisons des PNG transparents superposés avec z-index tant que widget “constructeur de produits”. Html2canvas a fonctionné avec brio pour faire bouillir la stack sans repousser les images, ni utiliser les complexités, les solutions de contournement et le canevas “non réactif” lui-même. Nous n’avons pas pu le faire en douceur / sain d’esprit avec la canvas vanille + JS.

Utilisez d’abord z-index sur les div absolus pour générer du contenu en couches dans un wrapper positionné relatif. Puis dirigez le wrapper vers html2canvas pour obtenir un canevas rendu, que vous pouvez laisser tel quel, ou le générer sous forme d’image pour qu’un client puisse l’enregistrer.