Exemplu
Egal dreptunghiurile cu două valori diferite globalCompositeOperation. Dreptunghiuri roșii sunt destination images . Dreptunghiuri albastre sunt source images :
source-over
destinație-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);
Încearcă - l singur » Suport pentru browser-
Numerele din tabel specifica prima versiune de browser care acceptă pe deplin proprietatea.
| Proprietate | |||||
|---|---|---|---|---|---|
| globalCompositeOperation | 4 | 9 | 3.6 | 4 | 10.1 |
Definiție și utilizare
Seturile de proprietate globalCompositeOperation sau returnează modul în care o sursă (new) sunt desenate imagine pe o destinație (existing) imagine.
sursă de imagine = desene sunteți pe cale de a plasa pe pânză.
imaginea de destinație = desenele care sunt deja plasate pe pânză.
| Valoare implicită: | source-over |
|---|---|
| sintaxa JavaScript: | context .globalCompositeOperation="source-in"; |
Valori de proprietate
| Valoare | Descriere | Joaca-l |
|---|---|---|
| source-over | Mod implicit. Afișează imaginea sursă peste imaginea de destinație | Joaca - l » |
| source-atop | Afișează imaginea sursă pe partea de sus a imaginii destinație. Partea din source image , care se află în afara destination image de destination image nu este afișată | Joaca - l » |
| source-in | Afișează imaginea sursă în imaginea destinație. Numai o parte a source image care se află în interiorul destination image de destination image destination image este afișată, iar destination image de destination image este transparentă | Joaca - l » |
| source-out | Afișează imaginea sursă din imaginea de destinație. Numai o parte a source image care este în afara destination image de destination image destination image este afișată, iar destination image de destination image este transparentă | Joaca - l » |
| destination-over | Afișează imaginea de destinație peste imaginea sursă | Joaca - l » |
| destination-atop | Afișează imaginea de destinație în partea de sus a imaginii sursă. Partea din destination image de source image destination image , care se află în afara source image nu este afișată | Joaca - l » |
| destination-in | Afișează imaginea destinație pentru imaginea sursă. Numai partea din destination image de source image source image destination image , care se află în interiorul source image este afișată, iar source image este transparentă | Joaca - l » |
| destination-out | Afișează imaginea de destinație din imaginea sursă. Numai partea din destination image de source image source image destination image , care este în afara source image este afișată, iar source image este transparentă | Joaca - l » |
| lighter | Afișează imaginea sursă + imaginea de destinație | Joaca - l » |
| copy | Afișează imaginea sursă. Imaginea de destinație este ignorată | Joaca - l » |
| xor | Imaginea sursă este combinat prin utilizarea unui exclusivă sau împreună cu imaginea de destinație | Joaca - l » |
<Canvas obiect