Canvas globalCompositeOperation özelliği

Canvas Referans Kılavuzu

Tanım ve Kullanım

globalCompositeOperation Özellik ayarları veya döndürme, bir kaynak (yeni) resmin hedef (mevcut) resme nasıl çizileceğini döndürür.

Kaynak resim = Panoya yerleştirmeyi planladığınız çizim.

Hedef resim = Panoya yerleştirdiğiniz çizim.

Örnek

Örnek 1

Farklı globalCompositeOperation değerleri ile çizgiyi çiz. Kırmızı çizgi hedef resimdir. Mavi çizgi kaynak resimdir:

　　　　　source-over 　　　　　　　　　　　　destination-over

Tarayıcınız canvas etiketini desteklemiyor.

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);

Kişisel olarak deneyin

Örnek 2

Tüm globalCompositeOperation özellik değerleri:

Kişisel olarak deneyin

Gramer

context.globalCompositeOperation="source-in";

Özellik değeri

Değer Açıklama
source-over Varsayılan. Hedef görüntü üzerinde kaynak görüntüyü göster.
source-atop Hedef görüntü üstünde kaynak görüntüyü göster. Kaynak görüntü hedef görüntü dışında olan kısımları görünmez.
source-in Hedef görüntü içinde kaynak görüntüyü göster. Yalnızca hedef görüntü içindeki kaynak görüntü parçası gösterilir, hedef görüntü şeffaftır.
source-out Hedef görüntü dışında kaynak görüntüyü göster. Yalnızca hedef görüntü dışındaki kaynak görüntü parçası gösterilir, hedef görüntü şeffaftır.
destination-over Kaynak görüntü üzerinde hedef görüntüyü göster.
destination-atop Kaynak görüntü üstünde hedef görüntüyü göster. Kaynak görüntü dışındaki hedef görüntü parçaları gösterilmez.
destination-in Kaynak görüntü içinde hedef görüntüyü göster. Yalnızca kaynak görüntü içindeki hedef görüntü parçası gösterilir, kaynak görüntüsü şeffaftır.
destination-out Kaynak görüntü dışında hedef görüntüyü göster. Yalnızca kaynak görüntü dışındaki hedef görüntü parçası gösterilir, kaynak görüntüsü şeffaftır.
daha hafif Kaynak görüntü + hedef görüntüyü göster.
kopyala Kaynak görüntüyü göster. Hedef görüntüyü göz ardı et.
xor Kaynak ve hedef görüntüleri XOR işlemi ile birleştirme.

Teknik ayrıntılar

Varsayılan değer: source-over

Tarayıcı Desteği

Tablo içindeki numaralar, bu özelliği tam olarak destekleyen ilk tarayıcı sürümünü belirtmektedir.

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.

Canvas Referans Kılavuzu