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-
Internet Explorer 9, Firefox, Opera, Chrome și Safari sprijini proprietatea globalCompositeOperation.
Note: Internet Explorer 8 și versiunile anterioare, nu acceptă <canvas> element.
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.
class = „notranslate“ sursă de imagine = desene pe care sunt pe cale de a plasa pe pânză.
destination image = de destination image = 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 » |
Exemplu
Toate valorile de proprietate globalCompositeOperation:
sursă de peste:
sursa-varful:
sursă în:
Sursa-out:
destinație-over:
destinatie-varful:
destinație în:
destinație-out:
mai usoara:
copie:
XOR: