Contoh
Menggambar persegi panjang dengan menggunakan dua nilai globalCompositeOperation yang berbeda. Persegi panjang merah adalahgambar tujuan.Biru persegi panjang adalahgambar sumber:
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
Internet Explorer 9, Firefox, Opera, Chrome, dan Safari mendukung properti globalCompositeOperation.
Catatan: Internet Explorer 8 dan versi sebelumnya, tidak mendukung <canvas> elemen.
Definisi dan Penggunaan
The globalCompositeOperation set properti atau kembali bagaimana sumber (baru) gambar yang diambil ke tujuan (yang ada) gambar.
class = "notranslate" sumber gambar = gambar Anda akan menempatkan ke kanvas.
destination image = 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 darigambar sumberyang berada di luargambar tujuantidak ditampilkan | Mainkan " |
| source-in | Menampilkan gambar sumber ke gambar tujuan. Hanya bagian darigambar sumberyang INSIDEgambar tujuanditampilkan, dangambar tujuantransparan | Mainkan " |
| source-out | Menampilkan gambar sumber dari gambar tujuan. Hanya bagian darigambar sumberyang LUARgambar tujuanditampilkan, dangambar tujuantransparan | Mainkan " |
| destination-over | Menampilkan gambar tujuan di atas gambar sumber | Mainkan " |
| destination-atop | Menampilkan gambar tujuan di atas gambar sumber. Bagian darigambar tujuanyang luarsumber gambartidak ditampilkan | Mainkan " |
| destination-in | Menampilkan gambar tujuan untuk gambar sumber. Hanya bagian darigambar tujuanyang INSIDEgambar sumberditampilkan, dansumber gambartransparan | Mainkan " |
| destination-out | Menampilkan gambar tujuan dari gambar sumber. Hanya bagian darigambar tujuanyang LUARgambar sumberditampilkan, dansumber gambartransparan | 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 " |
Contoh
Semua nilai properti globalCompositeOperation:
Sumber-over:
Sumber-atas:
Sumber-in:
Sumber-out:
tujuan-over:
tujuan-atas:
tujuan-in:
tujuan-out:
ringan:
salinan:
xOR: