Atribut globalCompositeOperation kanvas HTML

Panduan referensi HTML5 Canvas

Definisi dan penggunaan

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

Gambar sumber = Gambar yang Anda rencanakan menempatkan di atas kanvas.

Gambar target = Gambar yang Anda tempatkan di atas kanvas.

Contoh

Contoh 1

Gambarkan segitiga dengan nilai globalCompositeOperation yang berbeda. Segitiga merah adalah gambar target. Segitiga 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 target.
source-atop Tampilkan gambar sumber di atas gambar target. Bagian gambar sumber di luar gambar target tidak akan terlihat.
source-in Tampilkan gambar sumber di dalam gambar target. Hanya bagian gambar sumber di dalam gambar target yang akan ditampilkan, gambar target adalah transparan.
source-out Tampilkan gambar sumber di luar gambar target. Hanya bagian gambar sumber di luar gambar target yang akan ditampilkan, gambar target 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.
lighter Tampilkan gambar sumber + gambar tujuan.
copy Tampilkan gambar sumber. Ingatkan gambar tujuan.
xor Gabungkan gambar sumber dan tujuan dengan operasi eksklusif

Detil teknis

Nilai default: source-over

Dukungan browser

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

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 HTML5 Canvas