Domanda Combinando due o più elementi Canvas con una sorta di fusione


È possibile combinare il contenuto di 2 elementi canvas separati in un singolo elemento canvas?

Qualcosa come un equivalente di "appiattimento" di due o più livelli in Photoshop ...?

Posso pensare ad un giro di strada, ma non ne sono così sicuro. Esportare il contenuto di entrambi i canvi (lol) nella forma di .png's, e quindi avere un terzo elemento canvas disegnare entrambe le immagini con una sorta di algoritmo di fusione (xor, blend, negativo, ecc.).


31
2017-07-22 09:13


origine


risposte:


Certo che puoi, e non hai bisogno di librerie divertenti o altro, basta chiamare drawImage con una tela come l'immagine.

Ecco un esempio in cui combino due elementi canvas su un terzo:

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

Naturalmente puoi farlo solo con due (uno sull'altro), ma tre ne fanno un esempio migliore.

Puoi sempre cambiare il globalCompositeOperation se vuoi un effetto XOR o qualcosa del genere.


38
2017-07-22 13:51



Se si desidera la modalità di miscelazione "normale"

  • Assicurati che il tuo canvas gli elementi non hanno uno sfondo specificato in CSS. Questo li lascerà trasparenti.
  • Assolutamente posizionati tutti i tuoi canvas elementi uno sopra l'altro. Ad esempio, avvolgili tutti in a <div class="canvas-layers"> e quindi usa CSS come:

     /* 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 }
    
  • Lascia che il browser esegua automaticamente la fusione di aree semitrasparenti una sopra l'altra.

Se hai bisogno della modalità di fusione "normale" su una singola tela

Se vuoi mascheramento semplice, più leggero o più scuro

Se vuoi le modalità di fusione in stile Photoshop

  • Ho creato una libreria semplice, leggera e open source per l'esecuzione di modalità di fusione in stile Photoshop da un contesto Canvas HTML a un altro: context-frullatore. Ecco l'esempio di utilizzo:

    // Might be an 'offscreen' canvas
    var over  = someCanvas.getContext('2d');
    var under = anotherCanvas.getContext('2d');
    
    over.blendOnto( under, 'screen', {destX:30,destY:15} );
    

    Vedere il LEGGIMI per maggiori informazioni.


13
2017-07-22 13:16



Penso che tu stia cercando qualcosa come il pixastic biblioteca (Documentazione).


1
2017-07-22 10:06



È possibile con css posizionare 2 (o più) tele una sull'altra e lasciare che ciascuna lavori come un livello. Non sono sicuro esattamente come fare questo con i CSS, ma ho fatto qualcosa di simile, ho delle tele sopra l'una, uno per i contenuti 2D e uno per il webgl e l'utente potrebbe facilmente scambiare tra loro

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

Immagino che il codice non sia proffetto o corretto, ma funziona. Spero che questo ti aiuti.

Se non lo farei, userei la soluzione che hai menzionato. (Realmente ho realizzato un'app simile a quella in cui ho disegnato ombre 2D su una tela non in vista e l'ho disegnata sopra la tela principale con trasparenza, molto carina)


0
2017-07-22 09:39