Proprietà globalCompositeOperation del canvas
Definizione e uso
globalCompositeOperation
Impostazione o restituzione delle proprietà che determinano come disegnare un'immagine sorgente (nuova) su un'immagine di destinazione (già esistente).
Immagine sorgente = Disegno che intendi posizionare sulla lavagna.
Immagine di destinazione = Disegno che hai già posizionato sulla lavagna.
Esempio
Esempio 1
Disegna rettangoli con valori diversi di globalCompositeOperation. Il rettangolo rosso è l'immagine di destinazione. Il rettangolo blu è l'immagine sorgente:
source-over destination-over
JavaScript:
var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.fillStyle="red"; ctx.fillRect(20,20,75,50); ctx.globalCompositeOperation="source-over"; ctx.fillStyle="blue"; ctx.fillRect(50,50,75,50); ctx.fillStyle="red"; ctx.fillRect(150,20,75,50); ctx.globalCompositeOperation="destination-over"; ctx.fillStyle="blue"; ctx.fillRect(180,50,75,50);
Esempio 2
Tutti i valori dell'attributo globalCompositeOperation:
Sintassi
context.globalCompositeOperation="source-in";
Valore dell'attributo
Valore | Descrizione |
---|---|
source-over | Predefinito. Mostra l'immagine di origine sull'immagine di destinazione. |
source-atop | Mostra l'immagine di origine in alto rispetto all'immagine di destinazione. La parte dell'immagine di origine al di fuori dell'immagine di destinazione è invisibile. |
source-in | Mostra l'immagine di origine all'interno dell'immagine di destinazione. Solo la parte dell'immagine di origine all'interno dell'immagine di destinazione viene mostrata, l'immagine di destinazione è trasparente. |
source-out | Mostra l'immagine di origine al di fuori dell'immagine di destinazione. Solo la parte dell'immagine di origine al di fuori dell'immagine di destinazione viene mostrata, l'immagine di destinazione è trasparente. |
destination-over | Mostra l'immagine di destinazione sopra l'immagine di origine. |
destination-atop | Mostra l'immagine di destinazione in alto rispetto all'immagine di origine. La parte dell'immagine di destinazione al di fuori dell'immagine di origine non viene mostrata. |
destination-in | Mostra l'immagine di destinazione all'interno dell'immagine di origine. Solo la parte dell'immagine di destinazione all'interno dell'immagine di origine viene mostrata, l'immagine di origine è trasparente. |
destination-out | Mostra l'immagine di destinazione al di fuori dell'immagine di origine. Solo la parte dell'immagine di destinazione al di fuori dell'immagine di origine viene mostrata, l'immagine di origine è trasparente. |
lighter | Mostra l'immagine di origine + l'immagine di destinazione. |
copy | Mostra l'immagine di origine. Ignora l'immagine di destinazione. |
xor | Combina l'immagine sorgente con l'immagine di destinazione utilizzando l'operazione XOR. |
Dettagli tecnici
Valore predefinito: | source-over |
---|
Supporto del browser
I numeri nella tabella indicano la versione del browser che supporta completamente l'attributo.
Chrome | Edge | Firefox | Safari | Opera |
---|---|---|---|---|
Chrome | Edge | Firefox | Safari | Opera |
4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Nota:Internet Explorer 8 e versioni precedenti non supportano l'elemento <canvas>.