Esempio
Disegnare rettangoli utilizzando due diversi valori globalCompositeOperation. Rettangoli rossi sono destination images . Rettangoli blu sono source images :
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 browser
I numeri nella tabella indicano la prima versione del browser che supporta pienamente la proprietà.
| Proprietà | |||||
|---|---|---|---|---|---|
| globalCompositeOperation | 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Definizione e l'utilizzo
Gli insiemi di proprietà globalCompositeOperation o ritorni come una fonte (new) dell'immagine vengono redatto su una destinazione (existing) delle immagini.
Image Source = disegni che si sta per mettere sulla tela.
immagine di destinazione = disegni già messi 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 nel corso | Gioca " |
| source-atop | Consente di visualizzare l'immagine di origine in cima all'immagine di destinazione. La parte source image che è all'esterno destination image non viene mostrata | Gioca " |
| source-in | Consente di visualizzare l'immagine di origine in a quella di destinazione. Solo la parte source image che è l'interno destination image viene mostrata, e l' destination image è trasparente | Gioca " |
| source-out | Consente di visualizzare l'immagine di origine fuori dell'immagine di destinazione. Solo la parte source image che è l'esterno destination image viene mostrata, e l' destination image è 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 parte destination image che è l'esterno source image non viene mostrata | Gioca " |
| destination-in | Consente di visualizzare l'immagine di destinazione per l'immagine di origine. Solo la parte di destination image che è l'interno source image viene mostrata, e l' source image è trasparente | Gioca " |
| destination-out | Consente di visualizzare l'immagine di destinazione fuori dell'immagine di origine. Solo la parte di destination image che è l'esterno source image viene mostrata, e l' source image è 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 sorgente è combinato mediante un OR esclusivo con all'immagine di destinazione | Gioca " |
<Oggetto Tela