Attributo globalCompositeOperation del canvas HTML
Definizione e uso
globalCompositeOperation Impostazione o restituzione dell'attributo che determina 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 utilizzando diversi valori 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. Visualizza l'immagine sorgente sull'immagine di destinazione. |
| source-atop | Visualizza l'immagine sorgente in alto rispetto all'immagine di destinazione. La parte dell'immagine sorgente al di fuori dell'immagine di destinazione non sarà visibile. |
| source-in | Visualizza l'immagine sorgente all'interno dell'immagine di destinazione. Verrà visualizzata solo la parte dell'immagine sorgente all'interno dell'immagine di destinazione, l'immagine di destinazione è trasparente. |
| source-out | Visualizza l'immagine sorgente al di fuori dell'immagine di destinazione. Verrà visualizzata solo la parte dell'immagine sorgente al di fuori dell'immagine di destinazione, l'immagine di destinazione è trasparente. |
| destination-over | Mostra l'immagine di destinazione sopra l'immagine sorgente. |
| destination-atop | Mostra l'immagine di destinazione in cima all'immagine sorgente. La parte dell'immagine di destinazione al di fuori dell'immagine sorgente non viene mostrata. |
| destination-in | Mostra l'immagine di destinazione all'interno dell'immagine sorgente. Solo la parte dell'immagine di destinazione all'interno dell'immagine sorgente viene mostrata, l'immagine sorgente è trasparente. |
| destination-out | Mostra l'immagine di destinazione al di fuori dell'immagine sorgente. Solo la parte dell'immagine di destinazione al di fuori dell'immagine sorgente viene mostrata, l'immagine sorgente è trasparente. |
| lighter | Mostra l'immagine sorgente + immagine di destinazione. |
| copy | Mostra l'immagine sorgente. 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>.
