Html5 canvas maske kullanımı
Html5 canvas ile bir resim çağırarak o resme dairesel bir maske uygulayacağız.
öncelikle canvasımızı yazalım.
<canvas id="arif" width="400px" height="400px" style="border:1px solid #000">canvas desteklemeyen tarayıcı</canvas>
kenarlık vermek için style tanımladım.
şimdi javascript kodlarımızı yazalım.
var canv=document.getElementById("arif");//canvasımızı tanımlıyoruz
var ctx=canv.getContext("2d");//2d context oluşturuyoruz.
var img=document.createElement("img");//img elementi oluşturuyoruz(create)
img.onload=function(){ //resim yüklendiğinde çalışacak fonksiyon
ctx.save();//ctxin durumunu kaydediyoruz. Daha sonra burdaki haline çevireceğiz.
ctx.beginPath(); //yol başlangıcı tanımlıyoruz
ctx.arc(106, 77, 55, 0, Math.PI * 2, false); //daire çiziyoruz
// Oluşturduğumuz şekle göre kırpma işlemi yapacağız.
ctx.clip();
//imgyi çizdiriyoruz.
ctx.drawImage(img, 0, 0);
// ctxin eski haline çeviriyoruz.
ctx.restore();
};
img.src = "http://i.imgur.com/wswqIxyb.jpg";//img source unu ayarlıyoruz.
açıklamalarını karşılarına yazdım.
Örnek uygulama linki