Atribut globalCompositeOperation canvas HTML

Panduan Rujukan HTML5 Canvas

Definisi dan penggunaan

globalCompositeOperation Pengaturan atribut atau pengembalian cara penggambaran imej sumber (baru) ke atas imej sasaran (sudah ada).

Imej sumber = Gambar yang anda bercadang letakkan ke atas kertas lukis.

Imej sasaran = Gambar yang anda letakkan di atas kertas lukis.

Contoh

Contoh 1

Lukis persegi dengan nilai globalCompositeOperation yang berbeza. Persegian merah adalah imej sasaran. Persegian biru adalah imej sumber:

　　　　　source-over 　　　　　　　　　　　　destination-over

Pemalam anda tidak menyokong 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);

Cuba sendiri

Contoh 2

Semua nilai atribut globalCompositeOperation:

Cuba sendiri

Sintaksis

context.globalCompositeOperation="source-in";

Nilai atribut

Nilai Penerangan
source-over Lalai. Paparan imej sumber di atas imej sasaran.
source-atop Paparan imej sumber di atas imej sasaran. Bahagian imej sumber di luar imej sasaran adalah tak tampak.
source-in Paparan imej sumber di dalam imej sasaran. Hanya bahagian imej sumber di dalam imej sasaran yang akan dipaparkan, imej sasaran adalah terang.
source-out Paparan imej sumber di luar imej sasaran. Hanya bahagian imej sumber di luar imej sasaran yang akan dipaparkan, imej sasaran adalah terang.
destination-over Tunjukkan imej tujuan di atas imej sumber.
destination-atop Tunjukkan imej tujuan di atas imej sumber. Bahagian imej tujuan di luar imej sumber tidak akan ditunjukkan.
destination-in Tunjukkan imej tujuan di dalam imej sumber. Hanya bahagian imej tujuan di dalam imej sumber yang akan ditunjukkan, imej sumber adalah transparen.
destination-out Tunjukkan imej tujuan di luar imej sumber. Hanya bahagian imej tujuan di luar imej sumber yang akan ditunjukkan, imej sumber adalah transparen.
lighter Tunjukkan imej sumber + imej tujuan.
copy Tunjukkan imej sumber. Abaikan imej tujuan.
xor Gabungkan imej sumber dengan imej tujuan menggunakan operasi eksklusif.

Perincian Teknik

Nilai Ldefault: source-over

Dukungan Pelayar

Angka dalam tabel menunjukkan versi paling awal pereka paling mendukung sifat ini.

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

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

Panduan Rujukan HTML5 Canvas