Contoh
Menggambar persegi panjang dengan menggunakan dua nilai globalCompositeOperation yang berbeda. Persegi panjang merah destination images . Biru persegi panjang adalah source images :
Sumber-over
tujuan-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);
Cobalah sendiri " Dukungan Browser
Angka-angka dalam tabel menentukan versi browser pertama yang sepenuhnya mendukung properti.
| Milik | |||||
|---|---|---|---|---|---|
| globalCompositeOperation | 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Definisi dan Penggunaan
The globalCompositeOperation set properti atau kembali bagaimana sumber (new) gambar yang diambil ke tujuan (existing) gambar.
sumber gambar = gambar Anda akan menempatkan ke kanvas.
image tujuan = gambar yang sudah ditempatkan ke kanvas.
| nilai default: | Sumber-over |
|---|---|
| sintaks JavaScript: | context .globalCompositeOperation="source-in"; |
Nilai properti
| Nilai | Deskripsi | Mainkan |
|---|---|---|
| source-over | Default. Menampilkan gambar sumber di atas gambar tujuan | Mainkan " |
| source-atop | Menampilkan gambar sumber di atas gambar tujuan. Bagian dari source image yang berada di luar destination image tidak ditampilkan | Mainkan " |
| source-in | Menampilkan gambar sumber ke gambar tujuan. Hanya bagian dari source image yang INSIDE yang destination image ditampilkan, dan destination image transparan | Mainkan " |
| source-out | Menampilkan gambar sumber dari gambar tujuan. Hanya bagian dari source image yang LUAR destination image ditampilkan, dan destination image transparan | Mainkan " |
| destination-over | Menampilkan gambar tujuan di atas gambar sumber | Mainkan " |
| destination-atop | Menampilkan gambar tujuan di atas gambar sumber. Bagian dari destination image yang berada di luar source image tidak ditampilkan | Mainkan " |
| destination-in | Menampilkan gambar tujuan untuk gambar sumber. Hanya bagian dari destination image yang INSIDE yang source image yang ditampilkan, dan source image transparan | Mainkan " |
| destination-out | Menampilkan gambar tujuan dari gambar sumber. Hanya bagian dari destination image yang LUAR source image yang ditampilkan, dan source image transparan | Mainkan " |
| lighter | Menampilkan gambar sumber + gambar tujuan | Mainkan " |
| copy | Menampilkan gambar sumber. Gambar tujuan diabaikan | Mainkan " |
| xor | Gambar sumber dikombinasikan dengan menggunakan eksklusif OR dengan gambar tujuan | Mainkan " |
<Canvas Object