HTML kanvas globalCompositeOperation Property
Contoh
Gambar persegi panjang menggunakan dua nilai globalCompositeOperation yang berbeda. Persegi panjang merah adalah gambar tujuan . Persegi panjang biru adalah gambar 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);
Dukungan Peramban
Internet Explorer 9, Firefox, Opera, Chrome, dan Safari mendukung properti globalCompositeOperation.
Definisi dan Penggunaan
Properti globalCompositeOperation menyetel atau mengembalikan cara gambar sumber (baru) digambar ke gambar tujuan (yang sudah ada).
source image = gambar yang akan Anda tempatkan ke kanvas.
gambar tujuan = gambar yang sudah ditempatkan di kanvas.
| Nilai bawaan: | sumber-over |
|---|---|
| Sintaks JavaScript: | konteks .globalCompositeOperation="source-in"; |
Nilai properti
| Value | Description | Play it |
|---|---|---|
| source-over | Default. Displays the source image over the destination image | |
| source-atop | Displays the source image on top of the destination image. The part of the source image that is outside the destination image is not shown | |
| source-in | Displays the source image in to the destination image. Only the part of the source image that is INSIDE the destination image is shown, and the destination image is transparent | |
| source-out | Displays the source image out of the destination image. Only the part of the source image that is OUTSIDE the destination image is shown, and the destination image is transparent | |
| destination-over | Displays the destination image over the source image | |
| destination-atop | Displays the destination image on top of the source image. The part of the destination image that is outside the source image is not shown | |
| destination-in | Displays the destination image in to the source image. Only the part of the destination image that is INSIDE the source image is shown, and the source image is transparent | |
| destination-out | Displays the destination image out of the source image. Only the part of the destination image that is OUTSIDE the source image is shown, and the source image is transparent | |
| lighter | Displays the source image + the destination image | |
| copy | Displays the source image. The destination image is ignored | |
| xor | The source image is combined by using an exclusive OR with the destination image |
Contoh
Semua nilai properti globalCompositeOperation: