Esempio
Disegnare rettangoli utilizzando due diversi valori globalCompositeOperation. Rettangoli rossi sonoimmagini di destinazione.Rettangoli blu sonoimmagini di partenza:
fonte-over
meta-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);
Prova tu stesso " Supporto per il browser
Internet Explorer 9, Firefox, Opera, Chrome e Safari supporta la proprietà globalCompositeOperation.
Nota: Internet Explorer 8 e versioni precedenti, non supportano il <canvas> elemento.
Definizione e utilizzo
Gli insiemi di proprietà globalCompositeOperation o ritorni come un'immagine di origine (nuova) vengono disegnate su una destinazione di immagine (esistente).
class = fonte "notranslate" immagine = disegni che si sta per mettere sulla tela.
destination image = disegni che sono già posizionati sulla tela.
| Valore di default: | fonte-over |
|---|---|
| sintassi JavaScript: | context.globalCompositeOperation="source-in"; |
I valori delle proprietà
| Valore | Descrizione | Gioca |
|---|---|---|
| source-over | Predefinito. Consente di visualizzare l'immagine sorgente all'immagine di destinazione su | Gioca " |
| source-atop | Consente di visualizzare l'immagine di origine sulla parte superiore dell'immagine di destinazione. La partedell'immagine sorgenteche èl'immaginedelladestinazione al difuori non è visualizzato | Gioca " |
| source-in | Consente di visualizzare l'immagine sorgente a quella di destinazione. Solo la partedell'immagine fonteche èquella di destinazioneall'interno è mostrata, el'immagine di destinazionesia trasparente | Gioca " |
| source-out | Consente di visualizzare l'immagine di origine fuori dell'immagine di destinazione. Solo la partedell'immagine fonteche èquella di destinazioneesterni è esposta, el'immagine di destinazionesia trasparente | Gioca " |
| destination-over | Consente di visualizzare l'immagine di destinazione dell'immagine sorgente sopra | Gioca " |
| destination-atop | Consente di visualizzare l'immagine di destinazione sulla parte superiore dell'immagine di origine. La partedell'immaginedidestinazioneche ènell'immagine sorgenteesterna non viene mostrato | Gioca " |
| destination-in | Consente di visualizzare l'immagine di destinazione per l'immagine di origine. Solo la partedell'immagine destinazioneche ènell'immagine sorgenteALL'INTERNO è mostrata, el'immagine sorgenteè trasparente | Gioca " |
| destination-out | Consente di visualizzare l'immagine di destinazione fuori dell'immagine di origine. Solo la partedell'immagine destinazioneche ènell'immagine sorgenteesterni è esposta, el'immagine sorgenteè trasparente | Gioca " |
| lighter | Visualizza l'l'immagine di destinazione immagine di origine + | Gioca " |
| copy | Consente di visualizzare l'immagine di origine. L'immagine di destinazione viene ignorato | Gioca " |
| xor | L'immagine di origine è combinato utilizzando un OR esclusivo con l'immagine di destinazione | Gioca " |
Esempio
Tutti i valori di proprietà globalCompositeOperation:
fonte-over:
source-in cima:
fonte-in:
source-out:
meta-over:
meta-cima:
meta-in:
meta-out:
accendino:
copia:
XOR: