Canvas globalCompositeOperation-ominaisuus

Canvas-viittomerkistö

Määrittely ja käyttö

globalCompositeOperation Ominaisuusasetukset tai palautus arvo, joka määrittää, miten yksi lähtö (uusi) kuva piirretään kohde (oletuksena olevaan) kuvaan.

Lähtökuva = Sinä aiot asettaa seinälle piirretty kuva.

Kohdekuva = Sinä olet asettanut seinälle piirretty kuva.

Esimerkki

Esimerkki 1

Piirretään eri globalCompositeOperation-arvoilla suorakulmiot. Punainen suorakulmi on kohdekuva. Sininen suorakulmi on lähtökuva：

　　　　　source-over 　　　　　　　　　　　　destination-over

Selaimesi ei tue canvas -tagia.

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);

Kokeile itse

Esimerkki 2

Kaikki globalCompositeOperation -ominaisuuden arvot:

Kokeile itse

syntaksi

context.globalCompositeOperation="source-in";

ominaisuusarvo

arvo kuvaus
source-over Oletus. Näytä alkuperäinen kuva kohdekuvalla.
source-atop Näytä alkuperäinen kuva kohdekuvan yläpuolella. Alkuperäisen kuvan kohdekuvaan sijoittumattomat osat ovat näkymättömiä.
source-in Näytä alkuperäinen kuva kohdekuvassa. Vain kohdekuvan sisäinen alkuperäisen kuvan osa näytetään, kohdekuva on läpinäkyvä.
source-out Näytä alkuperäinen kuva kohdekuvan ulkopuolella. Vain kohdekuvan ulkopuolella oleva alkuperäisen kuvan osa näytetään, kohdekuva on läpinäkyvä.
destination-over Näytä kohdekuva alkuperäisen kuvan yläpuolella.
destination-atop Näytä kohdekuva alkuperäisen kuvan yläpuolella. Alkuperäisen kuvan ulkopuolella oleva kohdekuva ei näy.
destination-in Näytä kohdekuva alkuperäisessä kuvassa. Vain kohdekuvan alkuperäisen kuvan sisäinen osa näytetään, alkuperäinen kuva on läpinäkyvä.
destination-out Näytä kohdekuva alkuperäisen kuvan ulkopuolella. Vain kohdekuvan alkuperäisen kuvan ulkopuolinen osa näytetään, alkuperäinen kuva on läpinäkyvä.
vähemmän kirkkaus Näytä alkuperäinen kuva + kohdekuva.
kopioi Näytä alkuperäinen kuva. Ohita kohdekuva.
xor Käytä XOR-Operaatiota yhdistääksesi lähtö- ja kohdekuva.

Tekninen yksityiskohta

Oletusarvo: source-over

Selaimen tuki

Taulukossa olevat numerot mainitsevat ensimmäisen version, joka tukee tätä ominaisuutta täysin.

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ä.

Canvas-viittomerkistö