Kirli Kirpi Blog

Bize, sektöre ve hayata dair söylemek istediklerimiz var. Peki siz bunları dinlemek ve okumak ister misiniz?

HTML5 Canvas Resim Kesişmeleri
globalCompositeOperation

Canvas üzerine birden fazla grafik (resim ya da şekil) çizdirebilirsiniz ve çizdirdiğiniz grafiklerin kesişen alanları olabilir. Kesişen alanları kontrol etmek için globalCompositeOperation özelliğini anlatacağım.

Önce Belgemizi Oluşturuyoruz

Kırmızı arka planlı, üzerinde siyah bir kare ve yeşil bir daire olan canvas’ımızı oluşturduk.

Değerleri Tanıyalım

context2d.globalCompositeOperation = “source-over” (varsayılan)Bu özellikle ikinci çizdiğimiz grafik (daire), ilk çizdiğimiz grafiğin (kare) üzerine çizilir. Bu özellik varsayılan özelliktir.
context2d.globalCompositeOperation = “source-atop”İlk çizdiğimiz grafikle (kare) birlikte, ikinci çizdiğimiz grafiğin (daire) kesişen alanları canvas üzerine çizilir.
context2d.globalCompositeOperation = “source-in”İki grafiğin kesişen alanları canvas üzerine çizilir. Gözüken grafik ikinci çizdiğimiz grafiktir (daire).
context2d.globalCompositeOperation = “source-out”İkinci çizdiğimiz grafiğin (daire), ilk çizdiğimiz grafikle (kare) kesişmeyen alanları canvas üzerine çizilir. Gözüken grafik ikinci çizdiğimiz grafiktir (daire).
context2d.globalCompositeOperation = “destination-over”İlk çizdiğimiz grafik (kare), ikinci çizdiğimiz grafiğin (daire) üzerine çizilir. Yani ilk çizdiğimiz grafik üstte gözükür.
context2d.globalCompositeOperation = “destination-atop”İkinci çizdiğimiz grafikle (daire) birlikte, ilk çizdiğimiz grafiğin (kare) kesişen alanları canvas üzerine çizilir.
context2d.globalCompositeOperation = “destination-in”İki grafiğin kesişen alanları canvas üzerine çizilir. Gözüken grafik ilk çizdiğimiz grafiktir (kare).
context2d.globalCompositeOperation = “destination-out”İlk çizdiğimiz grafiğin (kare), ikinci çizdiğimiz grafikle (daire) kesişmeyen alanları canvas üzerine çizilir.
context2d.globalCompositeOperation = “lighter” (karenin arka planı mavi kullanıldı)Her iki grafik de canvas üzerine çizilir. Kesişen alanların renkleri saydamlaşır ve üst üste biner.
context2d.globalCompositeOperation = “copy”İlk çizdiğimiz grafik (kare) komple silinir ve ikinci çizdiğimiz grafik (daire) canvas üzerine çizilir.
context2d.globalCompositeOperation = “xor”Her iki grafik de canvas üzerine çizilir, grafiklerin kesiştiği yer saydam olur.

Kaynaklar

http://developer.mozilla.org/samples/canvas-tutorial/6_1_canvas_composite.html
http://www.w3schools.com/tags/canvas_globalcompositeoperation.asp

Paylaşmak istediklerinizi bize gönderin