Ö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
Tablodaki rakamlar tam özelliğini destekleyen ilk tarayıcı sürümü belirtin.
| özellik | |||||
|---|---|---|---|---|---|
| globalCompositeOperation | 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
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ü.
Kaynak görüntü = çizimler tuval üzerine yerleştirmek üzere.
Hedef görüntü = 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 " |
<Tuval Nesne