HTML canvas globalCompositeOperation özelliği
Tanım ve Kullanım
globalCompositeOperation Bir kaynak (yeni) görseli bir hedef (mevcut) görsel üzerine nasıl çizileceğini belirleyen veya döndüren özellikler.
Kaynak görsel = Çizim yapmayı planladığınız kaynak görseldir.
Hedef görsel = Çizim yapmayı planladığınız hedef görseldir.
Örnek
Örnek 1
Farklı globalCompositeOperation değerleri kullanarak düzgeçleri çizin. Kırmızı düzgeç hedef görseldir. Mavi düzgeç kaynak görseldir:
source-over destination-over
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="kırmızı";
ctx.fillRect(20,20,75,50);
ctx.globalCompositeOperation="source-over";
ctx.fillStyle="mavi";
ctx.fillRect(50,50,75,50);
ctx.fillStyle="kırmızı";
ctx.fillRect(150,20,75,50);
ctx.globalCompositeOperation="destination-over";
ctx.fillStyle="mavi";
ctx.fillRect(180,50,75,50);
Örnek 2
Tüm globalCompositeOperation özellik değerleri:
Sözdizimi
context.globalCompositeOperation="source-in";
Özellik değeri
| Değer | Açıklama |
|---|---|
| source-over | Varsayılan. Hedef görsel üzerinde kaynak görseli gösterir. |
| source-atop | Hedef görsel üzerinde kaynak görseli gösterir. Hedef görsel dışında kalan kaynak görsel kısmı görünmez. |
| source-in | Hedef görsel içinde kaynak görseli gösterir. Yalnızca hedef görsel içindeki kaynak görsel kısmı gösterilir, hedef görsel şeffaftır. |
| source-out | Hedef görsel dışında kaynak görseli gösterir. Yalnızca hedef görsel dışında kaynak görsel kısmı gösterilir, hedef görsel şeffaftır. |
| destination-over | Kaynak görselin üzerinde hedef görseli gösterir. |
| destination-atop | Kaynak görselin üzerinde hedef görseli gösterir. Kaynak görseli dışındaki hedef görseli parçaları gösterilmez. |
| destination-in | Kaynak görseli içinde hedef görseli gösterir. Yalnızca kaynak görseli içindeki hedef görseli parçası gösterilir, kaynak görseli şeffaftır. |
| destination-out | Kaynak görseli dışında hedef görseli gösterir. Yalnızca kaynak görseli dışındaki hedef görseli parçası gösterilir, kaynak görseli şeffaftır. |
| lighter | Kaynak görseli + hedef görseli gösterir. |
| copy | Kaynak görseli gösterir. Hedef görseli göz ardı eder. |
| xor | Kaynak görseli ile hedef görseli XOR işlemi ile birleştirme. |
Teknik Açıklamalar
| Varsayılan Değer: | source-over |
|---|
Tarayıcı Desteği
Tabloda belirtilen rakamlar, bu özelliği tam olarak destekleyen ilk tarayıcı sürümünü göstermektedir.
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Açıklama:Internet Explorer 8 ve daha eski sürümler <canvas> elementini desteklememektedir.
