HTML5 Canvas Slider

Tarayıcınız HTML5 canvas tag'ini desteklemiyor.

Basit ve kullanışlı bir HTML5 CANVAS slider örneği

 Bu gün sadece HTML5 canvas ve JavaScript kodlarıyla oluşturulmuş basit bir slider çalışması yaptım. Bu çalışmada slider'da yazdığım JavaScript fonsiyonu ile gösterilen resimler, "resimler" adındaki bir dizi değişkeninde saklanan  adresleri kullanılarak canvas nesnesine aktarılıyor. Resimlerin tarayıcıya teker teker yüklenmesini amaçladım.Bu sayede sayfa daha hızlı açılır ve bandwidthten de tasarruf edili diye umuyorum. Tabii bu konuda haklı olup olmadığımı uygulama gösterecek. Slider'ın kodlarını aşağıda kısaca açıklamaya çalıştım. ayrıca en alttaki Download likinden çalışır bir versiyonunu indirebilirsiniz. Bu slilderı Firefox, İnternet Explorer, Chrome ve Safari'de denedim. Hepsinde sorunsuz çalıştığına göre slider'ın cross browser  olduğunu söyleyebilirim. Sitenizde istediğiniz gibi kullanabilirsiniz. Kullanan arkadaşlar deneyimlerini yorum olarak yazarlarsa sevinirim.

<canvas id="myCanvas" width="400" height="300" style="border:1px solid #c3c3c3;">
Tarayıcınız HTML5 canvas tag'ini desteklemiyor.
</canvas>

<script>
var c=document.getElementById("myCanvas");//c adlı değişkenemyCanvas id'li HTML5 elemanı atanıyor.
var ctx=c.getContext("2d");// HTML5'in 2 boyutlu çizim metodları c değişkenine aktarılıyor ve oluşturulan nesne ctx değişkenine atanıyor

 var resimler= new Array("images/resim1.jpg","images/resim2.jpg","images/resim3.jpg","images/resim4.jpg");// resimlerin konumlarını tutan dizi değişkeni

adim = 0;// bilgisayarın hangi resimde olduğunu anlaması için değerini takip edeceği değişken
var pic = new Image(); // yeni bir Image nesnesi oluşturuluyor
function ciz(){// ciz fonksiyonu tanımlanıyor

pic.src=resimler[adim];//yukarıda oluşturulan değişkenin src paramatresine resimler dizisinden adim değişkeninin değeriyle aynı olan elemanın değeri atanıyor.
pic.addEventListener("load",function(){ctx.drawImage(pic,0,0,c.width,c.height),false});//ilgili resmi canvas'da gösteren fonksiyonu çalıştıran Javascript olay dinleyici

if(adim<resimler.length-1){// adim değişkeninin değerinin resimler dizisinin eleman sayısını geçmesine engel olan kontrol
adim++;
}else{
adim=0;
}
setTimeout("ciz()",3000);// ciz fonksiyonunu her 3 saniyede bir çalıştıran fonksiyon
}
window.addEventListener("load",ciz,false);// pencere yüklendiğinde ciz fonksiyonunu başlatan Javascript olay dinleyicisi
</script>
İsterseniz tüm dosyayı aşağıdaki linkten indirebilirsiniz.

DOWNLOAD

-->