Atribut globalCompositeOperation kanvas

Panduan Referensi Canvas

Definisi dan penggunaan

globalCompositeOperation Pengaturan atribut atau pengembalian cara menggambar gambar sumber (baru) ke gambar target (yang sudah ada).

Gambar sumber = Gambar yang Anda rencanakan menempatkan di kanvas.

Gambar target = Gambar yang Anda tempatkan di kanvas.

Contoh

Contoh 1

Menggambar segi empat dengan nilai globalCompositeOperation yang berbeda. Segi empat merah adalah gambar target. Segi empat biru adalah gambar sumber:

　　　　　source-over 　　　　　　　　　　　　destination-over

Browser Anda tidak mendukung tag canvas.

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

Coba sendiri

Contoh 2

Semua nilai atribut globalCompositeOperation:

Coba sendiri

Syarat

context.globalCompositeOperation="source-in";

Nilai atribut

Nilai Deskripsi
source-over Default. Tampilkan gambar sumber di atas gambar tujuan.
source-atop Tampilkan gambar sumber di atas gambar tujuan. Bagian gambar sumber yang berada di luar gambar tujuan tidak akan terlihat.
source-in Tampilkan gambar sumber di dalam gambar tujuan. Hanya bagian gambar sumber di dalam gambar tujuan yang akan ditampilkan, gambar tujuan adalah transparan.
source-out Tampilkan gambar sumber di luar gambar tujuan. Hanya bagian gambar sumber di luar gambar tujuan yang akan ditampilkan, gambar tujuan adalah transparan.
destination-over Tampilkan gambar tujuan di atas gambar sumber.
destination-atop Tampilkan gambar tujuan di atas gambar sumber. Bagian gambar tujuan di luar gambar sumber tidak akan ditampilkan.
destination-in Tampilkan gambar tujuan di dalam gambar sumber. Hanya bagian gambar tujuan di dalam gambar sumber yang akan ditampilkan, gambar sumber adalah transparan.
destination-out Tampilkan gambar tujuan di luar gambar sumber. Hanya bagian gambar tujuan di luar gambar sumber yang akan ditampilkan, gambar sumber adalah transparan.
lebih terang Tampilkan gambar sumber + gambar tujuan.
copy Tampilkan gambar sumber. Ingatkan gambar tujuan.
xor Gabungkan gambar sumber dan tujuan menggunakan operasi eksklusif.

Detil Teknologi

Nilai Default: source-over

Dukungan Browser

Angka di tabel menunjukkan versi browser pertama yang mendukung atribut ini penuh.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 3.6 4.0 10.1

Keterangan:Internet Explorer 8 dan versi sebelumnya tidak mendukung elemen <canvas>.

Panduan Referensi Canvas