HTML 5 Canvas (Grafik Çizim) I

HTML 5 de Canvas kullanımını basit örneklerle göstermeye çalışacağım. Bilindiği gibi HTML 5 yeni geliştirilen bir teknoloji her web tarayıcısı tam olarak desteklemese de özellikle Canvas gibi hemen hemen her tarayıcının desteklediği gelişmiş ve faydalı özelliklerde yok değil.
Öncelikle basitçe Canvas nedir dersek. Web sayfamızda belirlediğimiz bir çizim alanı(canvas) içine grafik çizimler ve hatta animasyonlar yapabilmemizi sağlayan HTML 5 teknolojisidir.

Yavaş yavaş canvas nasıl kullanırız bir göz atalım. Öncelikle ekranda çizim yapacağımız alanın belirlenmesi gerekmekte. Bunu canvas etiketi(tag) ile yaparız.

<canvas width="300" height="225"></canvas>

Yukarıda 300 piksel genişliğinde ve 225 piksel yüksekliğinde çizim alanı tanımlanmıştır. Canvası daha sonraki kullanımda belirleyebilmek için id değerini belirtmekte gerekecektir. Şöyleki;

<canvas id="cizim" width="300" height="225"></canvas>

Yukarıda cizim id'li bir canvas oluşturduk.
Şimdi javascript kodlarımız içinden bu canvası nasıl kullanacağız.
Bunun için şöyle bir koda ihtiyaç var

var cizimcanvas = document.getElementById("cizim");

Yukarıdaki kod sıkça kullandığımız bir DOM nesnesini kullandığımız koddur. cizim idli DOM nesnesi cizimcanvas isimli değişkenimize aktarılır. Bu satırdan sonraki satırlar cizimcanvas isimli değişkeni kullanarak canvas metotlarını çağırabilirler.
Canvas kullanırken öncelikle canvasın içeriğini belirlemeliyiz. Bir canvas 2 boyutlu ve 3 boyutlu içeriklere sahip olabilir. Bunu belirtmek için

var context = canvascizim.getContext("2d");

Yukarıdaki satırdan canvascizim nesnesinden 2 boyutlu (2d) cizim contextini context değişkenine aktardık. Şimdi context değişkenine 2 boyutlu context metotlarını geçebiliriz.
Örneğin bir dörtgen çizmek için;

context.fillRect(50, 25, 150, 100);

Örneğimizi görelim


Peki tarayıcı canvas metodunu destekliyormu nasıl anlayabiliriz? Eğer canvas nesnesinin getContext metodu varsa canvas destekleniyordur. O zaman kodumuzu şöyle genişletebiliriz.

if(canvascizim.getContext) {
var context = canvascizim.getContext("2d");
context.fillRect(50, 25, 150, 100);
} else
{
//Canvas yok uyar
alert('Canvas desteklenmiyor');
}

Dörtgenlerden devam edelim. Biraz önce içi dolu dörtgeni fillRect kullanarak çizmiştik peki içi boş dörtgen çizmek istersek! Bunuda strokeRect metodu ile yapabiliriz. Yukarıdaki örneğe göre;

context.strokeRect(50,50,50,50);

Dörtgen alanların parametreleri üst köşe nokta ve genişlik, yükseklik olarak girilmektedir. Yani yukarıdaki komut 50,50 noktasından 50 genişliğinde ve 50 yüksekliğinde bir kare çizecektir.

Bir dörtgen bölgeyi tamamen temizlemek için clearRect metodu kullanılabilir.

context.clearRect(45,45,75,50);

Kodun son hali

var canvascizim = document.getElementById("cizim2");
var context = canvascizim.getContext("2d");
context.fillRect(50, 25, 150, 100);
context.clearRect(45,45,75,50);
context.strokeRect(50,50,50,50);

Bu bölümde Canvasa giriş yaptık ve dörtgen fonksiyonlarına göz attık. Diğer çizim metotlarına ilerleyen makalelerde deyineceğim.