HTML5 Dersleri 5

HTML5 Canvas elementi

HTML5 ile gelen yeniliklerden en önemli olanlarından bir tanesi de canvas elementidir. Bu element sayfamızda belirlediğimiz boyutlarda bir tuval alanı oluşturur...

Bunun içinde tabiki Javascript vazgeçilmezlerimizden olacaktır. Yani html5 çizim için sadece bir alan oluşturur bunun içine javascript gibi dillerle çizim yaparız. Sayfanıza şu şekilde bir HTML kodu yazarsanız HTML5 i destekleyen tarayıcınız sizin için bir tuval alanını belirttiğiniz boyutlarda oluşturmaktadır.

<!—tarayıcınız bu elementi desteklemiyorsa görünecek yazı -->

Tarayıcınız Canvas elementini desteklememektedir.

</canvas>

Javascript ile çizdiğimiz çizimimizi “buBirCanvas” id li elemente aktaracağız. Tıpkı bir javascript kodunun çıktısını bir div elementinin içine basıyormuş gibi.

Örnek olarak şöyle de bir javascriptimiz olsun

var c=document.getElementById("buBirCanvas ");

var ctx=c.getContext("2d");

ctx.fillStyle="#FF00FF";

ctx.fillRect(0,0,100,100);

</script>

Bu javascript kodumuz bizim oluşturmuş olduğumuz “buBirCanvas” elementinin içine 100 x 100 piksel boyutlarında bir kare çizecektir.

Aslında HTML5 ile neler yapılabileceği ufkunuzun genişliğine kalmış. Öyle güzel işler varki insanı şaşırtıyor doğrusu.

Bu konuyla ilgili önerebileceğim bazı siteler:

www.w3schools.com

www.html5canvastutorials.com

Ders Sahibi;
Bilgisayar Dershanesi

Yorum Yapabilmek İçin Üye Girişi Yapmanız Gerekmektedir.

html5 canvas elementi

KATEGORİLER

HTML5 Canvas elementi

HTML5 Dersleri 5

HTML5 Canvas elementi

Yorumlar

ETİKETLER