HTML canvas globalCompositeOperation-ominaisuus
Määritelmä ja käyttö
globalCompositeOperation Aseta tai palauta ominaisuus, joka määrittää, miten lähdekuvaa (uutta) piirretään kohdekuvan (olemassa olevan) päälle.
Lähdekuvan = Sinä aiot asettaa piirustuksen selaimeen.
Kohdekuvan = Sinä olet asettanut piirustuksen selaimeen.
Esimerkki
Esimerkki 1
Rajaa käyrällä eri globalCompositeOperation-arvoilla. Punainen矩nki on kohdekuvan, sininen taustakuva lähdekuvan:
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);
Esimerkki 2
Kaikki globalCompositeOperation-ominaisuuden arvot:
Syntaksi
context.globalCompositeOperation="source-in";
Atribuuttiarvo
| Arvo | Kuvaus |
|---|---|
| source-over | Oletus. Näytä lähdekuvaa kohdekuvassa. |
| source-atop | Näytä lähdekuvaa kohdekuvan yläpuolella. Lähdekuvan kohdekuvan ulkopuolinen osa ei ole näkyvissä. |
| source-in | Näytä lähdekuvaa kohdekuvassa. Näytetään vain lähdekuvan kohdekuvan sisäinen osa, koska kohdekuvan on läpinäkyvä. |
| source-out | Näytä lähdekuvaa kohdekuvan ulkopuolella. Näytetään vain lähdekuvan kohdekuvan ulkopuolinen osa, koska kohdekuvan on läpinäkyvä. |
| destination-over | Näytä kohdekuva lähdekuvan yläpuolella. |
| destination-atop | Näytä kohdekuva lähdekuvan yläpuolella. Lähdekuvan ulkopuolinen kohdekuva ei näy. |
| destination-in | Näytä kohdekuva lähdekuvassa. Vain lähdekuvan sisällä oleva kohdekuva näytetään, lähdekuvassa on läpinäkyvyys. |
| destination-out | Näytä kohdekuva lähdekuvan ulkopuolella. Vain kohdekuvan ulkopuolinen osa näytetään, lähdekuvassa on läpinäkyvyys. |
| lighter | Näytä lähdekuvaa + kohdekuva. |
| copy | Näytä lähdekuvaa. Ignoroi kohdekuva. |
| xor | Käytä XOR-operaatiota yhdistääksesi lähteeseen ja kohdekuvaan. |
Tekninen tarkistus
| Oletusarvo: | source-over |
|---|
Selaimen tuki
Taulukossa olevat numerot viittaavat ensimmäiseen täysin tukevaan selaimen versioon.
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Huomautus:Internet Explorer 8 ja aikaisemmat versiot eivät tue <canvas> -elementtiä.
