Her Tür Bilginin Adresi Her Tür Bilginin Adresi
Canvas Elementi
HTML5 ile gelen yeniliklerden en önemli olanlarından bir tanesi de Canvas elementidir. Canvas elementi sayfamızda belirlediğimiz boyutlarda bir alan oluşturur.
Bu alanı oluşturduktan sonra tabii ki esas işi JavaScript yapacaktır.. Yani Canvas elementi sadece HTML5 için bir alan oluşturur bunun içine JavaScript, JQuery gibi script dillerle çizim yapabiliriz.
Canvas elementini şöyle tanımlayabiliriz.
Üstteki örnekte eğer tarayıcımız Canvas elementini desteklemiyorsa ekranda desteklemediğine dair mesaj çıkacaktır.
Şimdi ise Canvas kullanarak belirlediğimiz alana çizgi çizmeye çalışalım.
Önceki sayfadaki örneği incelediğimizde öncelikle HTML tarafında id=”myCanvas” olan bir Canvas tanımlıyoruz. Width ile Height belirledikten sonra Canvas’ın içini doldurmak için JavaScript aracılığıyla komutlarımızı yazıyoruz.
Öncelikle var canvas = document.getElementById(“myCanvas”); komutu ile HTML’imizde bulunan yarattığımız myCanvas alanını buluyoruz ve canvas değişkenine atıyoruz.
var context = canvas.getContext(“2d”); bu komut ile canvas’ımız ile işlem yapacağımızdan context değişkenine alanımızı atıyoruz.
context.moveTo(10, 10); komutu ile yaratacağımız doğrunun başlangıç noktalarını belirliyoruz.
context.lineTo(200, 125); komutu ile yaratacağımız doğrunun biteceği noktaları belirliyoruz.
context.lineWidth =2; komutu ile yaratacağımız doğrunun kalınlığını piksel cinsinden belirtiyoruz.
context.strokeStyle = “red”; komutu ile yaratacağımız doğrunun rengini belirliyoruz.
context.stroke(); ve son olarak daha önce belirttiğimiz tüm özellikleri uygulamamıza yarayan stroke komutunu yazarak işlemimizi sonlandırıyoruz.
