Grafik İşlemleri(Canvas)
• Canvas HTML5 ile gelen JavaScript ile üzerinde görseller ve şekiller çizebileceğimiz,animasyonlar oluşturabileceğimiz bir alandır.
• Bu bölümde canvas üzerinde aşağıdaki maddeleri örnek kodlar ile anlatmaya çalışacağız.
- HTML5’ten önceki versiyonlarda veri giriş(input) tipi olarak “text”,”button”,”submit” vb. birkaç veri tipi akla geliyor.
- HTML5’de ise web uygulamalarında ihtiyacımız olan renk,tarih,zaman vb. gibi birçok veri tipi bulunmaktadır.• Yeni gelen veri tiplerini aşağıda listeledik.
• Bu bölümde listediğimiz her bir veri tipini birörnek ile göstereceğiz.
• Şekil Çizimleri
- Çizgi
- Eğriler
- Dörtgen
• Dolgu Tipleri
- Renk Dolgusu
- Gradyan Dolgu
- Görsel Dolgu
• Görseller(İmages)
- Metin İşlemleri
- Dönüşümler(Transformations)
- Gölgelendirme
- Çeşitli Özellikler ve Fonksiyonlar
• Başlamadan önce canvas ile ilgili bilgiler verelim.Öncelikle canvasoluşturan HTML kodunu yazalım.
<canvas id=“ilkCanvas” width=“20” height=“200”></canvas>
- <canvas> etiketi sayesinde 200px genişliğinde 200px boyunda içi boş bir canvas oluşturduk.
- canvas’ın x ve y ekseninin başlangıç noktası (0,0) sol üst köşedir.
- Sağa gittikçe x ekseninin,aşağı gittikçe y ekseninin değeri artar.
- Canvas nesnesinin koordinat sistemini aşağıda görebiliriz.
• canvas üzerinde işlem yapabilmemiz içinJavaScript kullanmamız gerekiyor.
• canvas üzerinde 2 boyutlu ve 3 boyutlu işlemler yapabilmemiz için ilgili bağlam(context-fonksiyonlar ve özellikler sunarak çizimler yapmamızı sağlar.) nesnesinin referansını almamız gerekiyor.Bu bölümde 2 boyutlu çizimler üzerinde çalışacağımızdan aşağıda 2 boyutlu bağlamnesnesini JavaScript’te nasıl aldığımızı görebiliriz.
var canvas=document.getElementById(“ilkCanvas”);var baglam=canvas.getContext(“2d”);
• İlk olarak getElementById fonksiyonuna“ilkCanvas” id’sini vererek canvas nesnesininreferansını aldık.
• Sonrasında ise iki boyutlu işlemler yapabilmek için canvasın getContext fonksiyonuna “2d” parametresini verip bağlam nesnesini aldık.
• Artık bağlam nesnesi ile canvas üzerinde işlemler yapabiliriz.