Atribut globalCompositeOperation kanvas

Canvas Reference Manual

Definisi dan penggunaan

globalCompositeOperation Pengaturan properti atau pengembalian cara menggambar imej (baru) ke atas imej (sudah ada) sasaran.

Imej sumber = Gambar yang anda rencanakan untuk letakkan di atas kanvas.

Imej sasaran = Gambar yang anda letakkan di atas kanvas.

Contoh

Contoh 1

Gambarkan persegi panjang dengan nilai globalCompositeOperation yang berbeda. Persegi panjang merah adalah imej sasaran. Persegi panjang biru adalah imej 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);

Cuba sendiri

Contoh 2

Semua nilai atribut globalCompositeOperation:

Cuba sendiri

Sintaksis

context.globalCompositeOperation="source-in";

Nilai atribut

Nilai Penerangan
source-over Lalai. Tunjukkan imej sumber di atas imej sasaran.
source-atop Tunjukkan imej sumber di atas imej sasaran. Bahagian imej sumber yang berada di luar imej sasaran adalah tak dapat dilihat.
source-in Tunjukkan imej sumber di dalam imej sasaran. Hanya bahagian imej sumber di dalam imej sasaran yang akan dipaparkan, imej sasaran adalah transperan.
source-out Tunjukkan imej sumber di luar imej sasaran. Hanya bahagian imej sumber di luar imej sasaran yang akan dipaparkan, imej sasaran adalah transperan.
destination-over Tunjukkan imej sasaran di atas imej sumber.
destination-atop Tunjukkan imej sasaran di atas imej sumber. Bahagian imej sasaran di luar imej sumber tidak akan dipaparkan.
destination-in Tunjukkan imej sasaran di dalam imej sumber. Hanya bahagian imej sasaran di dalam imej sumber yang akan dipaparkan, imej sumber adalah transperan.
destination-out Tunjukkan imej sasaran di luar imej sumber. Hanya bahagian imej sasaran di luar imej sumber yang akan dipaparkan, imej sumber adalah transperan.
lebih cerah Tunjukkan imej sumber + imej sasaran.
copy Tunjukkan imej sumber. Nyaikan imej sasaran.
xor Combine the source image with the target image using the XOR operation.

Technical Details

Default Value: source-over

Browser Support

The numbers in the table indicate the first browser version that fully supports this property.

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

Note:Internet Explorer 8 and earlier versions do not support the <canvas> element.

Canvas Reference Manual