Örnek
İki farklı globalCompositeOperation değerleri kullanarak dikdörtgen çizin. Kırmızı dikdörtgenler destination images . Mavi dikdörtgenler source images :
kaynak-over
Hedef-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);
Kendin dene " Tarayıcı Desteği
Internet Explorer 9, Firefox, Opera, Chrome ve Safari globalCompositeOperation özelliğini desteklemez.
Note: Internet Explorer 8 ve önceki sürümlerini desteklemez <canvas> öğesi.
Tanımı ve Kullanımı
Bir kaynak nasıl globalCompositeOperation özelliği, ayarlar veya döner (new) görüntü destinasyon üzerine çizilir (existing) görüntü.
class = "notranslate" kaynak tuval üzerine yerleştirmek üzere olan görüntü = çizimleri.
destination image = zaten tuval üzerine yerleştirilir çizimleri.
| Varsayılan değer: | kaynak-over |
|---|---|
| JavaScript sözdizimi: | context .globalCompositeOperation="source-in"; |
Mülkiyet Değerler
| değer | Açıklama | Oynat |
|---|---|---|
| source-over | Varsayılan. Hedef resmin üzerinde kaynak görüntüyü görüntüler | Oynat " |
| source-atop | Hedef görüntünün üstünde kaynak görüntüsünü görüntüler. Parçası source image dışında destination image gösterilmez | Oynat " |
| source-in | Hedef görüntüye kaynak resim görüntüler. Sadece bir kısmı source image İÇİ olan destination image gösterilir ve destination image şeffaftır | Oynat " |
| source-out | Hedef görüntünün dışına kaynak görüntüsünü görüntüler. Sadece bir kısmı source image dışındaysa destination image gösterilir ve destination image şeffaftır | Oynat " |
| destination-over | Kaynak görüntünün üzerine hedef görüntüsünü görüntüler | Oynat " |
| destination-atop | Kaynak resmin üzerine hedef görüntüsünü görüntüler. Parçası destination image dışında source image gösterilmez | Oynat " |
| destination-in | Kaynak görüntüde hedef görüntüsünü görüntüler. Sadece bir kısmı destination image İÇİ olan source image gösterilir ve source image şeffaftır | Oynat " |
| destination-out | Kaynak resmin dışına hedef görüntüsünü görüntüler. Sadece bir kısmı destination image dışındaysa source image gösterilir ve source image şeffaftır | Oynat " |
| lighter | Kaynak görüntü + hedef görüntüsünü görüntüler | Oynat " |
| copy | Kaynak görüntüyü görüntüler. Hedef görüntü yok sayılır | Oynat " |
| xor | Kaynak resim özel kullanarak VEYA hedef görüntü ile birleştirilir | Oynat " |
Örnek
Tüm globalCompositeOperation özellik değerleri:
Kaynak-over:
kaynak üstünde:
Kaynak Giriş:
Kaynak aşımı:
Hedef-over:
Hedef-üstünde:
Hedef Giriş:
Hedef aşımı:
çakmak:
copy:
xor: