Ricerca…
Disegna dietro le forme esistenti con "destination-over"
context.globalCompositeOperation = "destination-over"
Il compositing "destination-over" posiziona il nuovo disegno sotto i disegni esistenti .
context.drawImage(rainy,0,0);
context.globalCompositeOperation='destination-over'; // sunny UNDER rainy
context.drawImage(sunny,0,0);
Cancellare le forme esistenti con "destinazione-out"
context.globalCompositeOperation = "destination-out"
Il compositing "destination-out" utilizza nuove forme per cancellare i disegni esistenti.
La nuova forma non viene effettivamente disegnata, ma viene semplicemente utilizzata come "cookie-cutter" per cancellare i pixel esistenti.
context.drawImage(apple,0,0);
context.globalCompositeOperation = 'destination-out'; // bitemark erases
context.drawImage(bitemark,100,40);
Compositing predefinito: nuove forme sono disegnate su forme esistenti
context.globalCompositeOperation = "source-over"
Compositing "source-over" [predefinito] , colloca tutti i nuovi disegni su qualsiasi disegno esistente.
context.globalCompositeOperation='source-over'; // the default
context.drawImage(background,0,0);
context.drawImage(parachuter,0,0);
Ritaglia immagini all'interno di forme con "destinazione in entrata"
context.globalCompositeOperation = "destination-in"
"destination-in" compositing clip disegni esistenti all'interno di una nuova forma.
Nota: qualsiasi parte del disegno esistente che cade all'esterno del nuovo disegno viene cancellata.
context.drawImage(picture,0,0);
context.globalCompositeOperation='destination-in'; // picture clipped inside oval
context.drawImage(oval,0,0);
Ritaglia immagini all'interno di forme con "sorgente d'ingresso"
context.globalCompositeOperation = "source-in";
source-in compositing source-in ritaglia nuovi disegni all'interno di una forma esistente.
Nota: qualsiasi parte del nuovo disegno che cade all'esterno del disegno esistente viene cancellata.
context.drawImage(oval,0,0);
context.globalCompositeOperation='source-in'; // picture clipped inside oval
context.drawImage(picture,0,0);
Ombre interne con "source-atop"
context.globalCompositeOperation = 'source-atop'
source-atop compositing clip nuova immagine all'interno di una forma esistente.
// gold filled rect
ctx.fillStyle='gold';
ctx.fillRect(100,100,100,75);
// shadow
ctx.shadowColor='black';
ctx.shadowBlur=10;
// restrict new draw to cover existing pixels
ctx.globalCompositeOperation='source-atop';
// shadowed stroke
// "source-atop" clips off the undesired outer shadow
ctx.strokeRect(100,100,100,75);
ctx.strokeRect(100,100,100,75);
Inverti o nega l'immagine con "differenza"
Rendering di un rettangolo bianco su un'immagine con l'operazione composita
ctx.globalCompositeOperation = 'difference';
La quantità dell'effetto può essere controllata con l'impostazione alfa
// Render the image
ctx.globalCompositeOperation='source-atop';
ctx.drawImage(image, 0, 0);
// set the composite operation
ctx.globalCompositeOperation='difference';
ctx.fillStyle = "white";
ctx.globalAlpha = alpha; // alpha 0 = no effect 1 = full effect
ctx.fillRect(0, 0, image.width, image.height);
Bianco e nero con "colore"
Rimuovi il colore da un'immagine tramite
ctx.globalCompositeOperation = 'color';
La quantità dell'effetto può essere controllata con l'impostazione alfa
// Render the image
ctx.globalCompositeOperation='source-atop';
ctx.drawImage(image, 0, 0);
// set the composite operation
ctx.globalCompositeOperation='color';
ctx.fillStyle = "white";
ctx.globalAlpha = alpha; // alpha 0 = no effect 1 = full effect
ctx.fillRect(0, 0, image.width, image.height);
Aumentare il contrasto del colore con "saturazione"
Aumentare il livello di saturazione di un'immagine con
ctx.globalCompositeOperation = 'saturation';
La quantità dell'effetto può essere controllata con l'impostazione alfa o la quantità di saturazione nella sovrapposizione di riempimento
// Render the image
ctx.globalCompositeOperation='source-atop';
ctx.drawImage(image, 0, 0);
// set the composite operation
ctx.globalCompositeOperation ='saturation';
ctx.fillStyle = "red";
ctx.globalAlpha = alpha; // alpha 0 = no effect 1 = full effect
ctx.fillRect(0, 0, image.width, image.height);
Seppia FX con "luminosità"
Crea un seppia colorato con
ctx.globalCompositeOperation = 'luminosity';
In questo caso il colore seppia viene reso prima l'immagine.
La quantità dell'effetto può essere controllata con l'impostazione alfa o la quantità di saturazione nella sovrapposizione di riempimento
// Render the image
ctx.globalCompositeOperation='source-atop';
ctx.fillStyle = "#F80"; // the color of the sepia FX
ctx.fillRect(0, 0, image.width, image.height);
// set the composite operation
ctx.globalCompositeOperation ='luminosity';
ctx.globalAlpha = alpha; // alpha 0 = no effect 1 = full effect
ctx.drawImage(image, 0, 0);
Cambia opacità con "globalAlpha"
context.globalAlpha=0.50
È possibile modificare l'opacità dei nuovi disegni impostando globalAlpha su un valore compreso tra 0,00 (completamente trasparente) e 1.00 (completamente opaco).
Il valore predefinito globalAlpha è 1.00 (completamente opaco).
I disegni esistenti non sono influenzati da globalAlpha .
// draw an opaque rectangle
context.fillRect(10,10,50,50);
// change alpha to 50% -- all new drawings will have 50% opacity
context.globalAlpha=0.50;
// draw a semi-transparent rectangle
context.fillRect(100,10,50,50);