Canvas Elementi

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.

canvas-1

Ü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.

canvas2

Ö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.

canvas3

Hakkında Ali Demirci

Ben Ali Demirci... 1991 Ankara doğumluyum. Ankara da yaşıyorum. Fırsat buldukça öğrendiklerimi burada paylaşıyorum. Java ile haşır neşirim. Android'den asla vazgeçemem. Öğrenmeye bayılırım. Yeni şeyler öğrendiğimde, geçmişteki projelerimde keşke böyle yapsaydım diye çok üzülmüşümdür. O yüzden öğrenmekten korkmayın. Takıldığınız yerleri mutlaka sorun. Biliyorsam yanıt veririm. Bilmiyorsam yol gösteririm. Teşekkürler :)

Kontrol Et

Regex Nedir? Nasıl Kullanılır?

Regex(Regular Expression) yani düzenli ifadeler, metinlerde aranan bir tümceyi kolayca bulmamızı sağlayan bir çeşit algoritmadır. Yani …