web-dev-qa-db-fra.com

Combinaison de deux ou plusieurs éléments Canvas avec une sorte de fusion

Est-il possible de combiner le contenu de 2 éléments de toile distincts en un seul élément de toile?

Quelque chose comme l'équivalent de "Aplatissement" de deux ou plusieurs calques dans Photoshop ...?

Je peux penser à une solution, mais je n'en suis pas si sûr. J'exporte le contenu des deux canvi (lol) sous la forme de .png, puis un troisième élément de canevas dessine les deux images avec une sorte d'algorithme de fusion (xor, blend, négatif, etc.). 

html5canvas
32
Abhishek

Bien sûr, vous pouvez, et vous n'avez besoin d'aucune bibliothèque amusante, appelez simplement drawImage avec un canevas comme image.

Voici un exemple où je combine deux éléments de toile sur un troisième:

http://jsfiddle.net/bnwpS/878/

Bien sûr, vous pouvez le faire avec seulement deux (un sur l’autre), mais trois en sont un meilleur exemple.

Vous pouvez toujours changer la globalCompositeOperation si vous voulez un effet XOR ou autre.

42
Simon Sarris

Si vous voulez le mode de mélange «normal»

  • Assurez-vous que vos éléments canvas n'ont pas d'arrière-plan spécifié en CSS. Cela les laissera transparent.

  • Positionnez absolument tous vos éléments canvas les uns sur les autres. Par exemple, enveloppez-les tous dans un <div class="canvas-layers"> et utilisez ensuite CSS comme:

     /* Set to the same width/height as the canvases */
.canvas-layers { position:relative; width:400px; height:300px }
.canvas-layers canvas { position:absolute; top:0; left:0 }

  • Laissez le navigateur effectuer automatiquement le mélange des zones semi-transparentes les unes sur les autres.

Si vous avez besoin du mode de fusion «normal» sur une seule toile

Si vous voulez un masquage simple, plus léger ou plus foncé

Si vous voulez des modes de fusion de style Photoshop

  • J'ai créé une bibliothèque simple, légère et à code source ouvert, permettant d'exécuter les modes de fusion de style Photoshop d'un contexte HTML à un autre: context-blender . Voici l'utilisation de l'échantillon:

    // Might be an 'offscreen' canvas
var over  = someCanvas.getContext('2d');
var under = anotherCanvas.getContext('2d');

over.blendOnto( under, 'screen', {destX:30,destY:15} );

    Voir le README pour plus d'informations.

13
Phrogz

Je pense que vous recherchez quelque chose comme la bibliothèque pixastic ( Documentation ).

1
Tim

Vous pouvez avec css position 2 (ou plus) toiles superposées et laisser chacune travailler comme une couche. Je ne suis pas sûr de savoir exactement comment faire cela avec les CSS, mais j'ai fait quelque chose de similaire, je dois contourner les uns sur les autres, un pour le contenu 2D et un pour Webgl et l'utilisateur pourrait facilement permuter entre eux. 

<div height="640" style="position: absolute;">
    <canvas width="640" style="position: absolute;visibility: hidden;" height="640" tabindex="1"></canvas>
    <canvas width="640" height="640" style="visibility: hidden;position: absolute;"></canvas>
</div>

Je suppose que ce code n’est ni bullet proff, ni correct, mais cela fonctionne. J'espère que cela t'aides. 

Si cela ne fonctionne pas, j'utiliserais la solution de contournement que vous avez mentionnée. (En fait, j'ai créé une application comme celle-ci, dans laquelle j'ai dessiné des ombres 2D sur un canevas hors écran et les ai dessinées sur la toile principale avec transparence, très joliment décorées)

0
Rickard