Makale Geçmişi

Canvas (tuval), HTML5 ile gelen ve web sayfası üzerinde grafikler / çizimler oluşturmamızı sağlayan bir etikettir. Canvas etiketini tarayıcı üzerinde bir resim olarak görürsünüz. Zaten sağ tıkladığınızda da resim seçenekleri kısayol menüsü görüntülenir. Ancak Canvas, img etiketi gibi çoğunlukla statik olarak kullanılan bir etiket değildir. Üzerine dilediğiniz çizimleri yapabilir ve çizimi zamanlayıcı veya üyenin etkileşimine bağlı olarak değiştirerek animasyonlar oluşturabilirsiniz. Zaten oluş amacı da budur. Konuyu basit ve ayrıntılı olarak anlatmaya çalışacağım. Bildiğiniz yerleri atlayabilirsiniz. Ancak yine de gözden kaçabilecek bazı ayrıntılar ve yazılımda yeni iseniz bazı ek bilgi ve ipuçları için tamamını okumanızda fayda olduğunu düşünüyorum. Canvas etiketi şu şekilde tanımlanır: <canvas id="cnTuval" width="200" height="200" style="border:1px solid red"> Tarayıcınız HTML5 desteklemiyor </canvas><br/> <input type="button" value="Çiz" onclick="ciz()" /> Ekran görüntüsü : Görüldüğü gibi etiketin bir kapanışı vardır. Etiket içinde "Tarayıcınız HTML5 desteklemiyor" şeklinde bir mesaj var. Eski tarayıcılar, canvas etiketini tanımadıklarından herhangi bir etiket olarak yorumlayıp içindeki metni gösterirler. Ancak yeni tarayıcılar canvas etiketini tanıdıklarından ve canvas etiketinin içinde bir yazı bulunmayacağından, yazıyı görüntülemezler. Dolayısıyla eski tarayıcılarda bir mesaj görüntülemiş oluruz. Örnekte genişlik ve yükseklik verilmiştir. Bunları vermek zorunlu değildir. Ancak verilmediğinde tarayıcı varsayılan bir genişlik ve yükseklik gösterecek ve bu da bizim çizimlerimizde işimize gelmeyecektir. Bunun için canvas etiketine mutlaka birer genişlik (width) ve yükseklik (height) özelliği veriyoruz. Özellik değerleri piksel cinsindendir. Örnekte kullanılan id özelliği diğer etiketlerde olduğu gibi etiketin tanımlayıcısı / tekil adıdır. Bunu vermemiz gerekiyor, çünkü tuvale çizim yapabilmek için JavaScript ile çizim yapılacak etiketin (tuvalin) referansını (hafızada bulunan nesne haline ulaşabilmek ve onu kullanabilmek için bir değer) alacağız ve referansı alabilmek için de id özelliğini kullanacağız (id'si şu olan etiketin referansını ver). Canvas etiketi beyaz olarak görüntüleneceğinden sınırlarını görebilmeniz için style özelliği ile etrafına 1 piksel kalınlığında düz kırmızı bir kenarlık çizdik. Zorunlu bir kullanım değildir. Örnekteki tuş, üzerinde "Çiz" yazısı olan ve tıklandığında (onclick) ciz isimli bir fonksiyonu çalıştıran bir tuştur. Biz örneklerimizde kendiliğinden veya sayfa yüklendiğinde değil, tuş tıklanarak çizim yapılması yolunu kullanacağız. Yani zorunlu değil ve çizim tuş tıklandığında yapılacak. Hazırlık Canvas üzerine çizim yapabilmek öncelikle aşağıdaki ifadeleri çalıştırmamız gerekiyor. Bunları ciz isimli bir fonksiyonda: <script> function ciz() { var tuval = document.getElementById("cnTuval"); var ctx = tuval.getContext("2d"); // Bundan sonra çizimlerimizi yapabiliriz. } </script> Fonksiyonda kullanılan document nesnesi, HTML belgemizin referansı olan bir nesnedir. Bu referansı kullanarak HTML belgemiz üzerinde bir çok işlem gerçekleştiririz. document nesnesinin bir çok özellik ve yöntemi (fonksiyon) vardır. Bilindiği gibi Nesneye Yönelik Programlamada bir nesnenin özelliklerine ulaşmak / değiştirmek veya yöntemlerini çağırmak için nesne adından sonra bir . işareti koyar ve sonra özellik veya yöntemin adını yazarız. document nesnesinin getElementById yöntemi (id'sine göre elemanı / etiketi getir), id özelliği değeri verilen bir etiketin referansını döndürür. Dönen referansı bir değişkene atar ve bu şekilde bu etikete ulaşabiliriz. Örneğimizde id özelliği değeri cnTuval olan canvas etiketimizin referansını alıyor ve tuval isimli bir değişkene atıyoruz. Bundan sonra bu etiketin (tuvalin / canvas) özellik ve yöntemlerine ulaşabilmek için bu referansı (tuval değişkenini) kullanacağız. Bu referansı şu şekilde kullanabiliz: tuval.width = 300; Bu ifade tuval nesnesinin (id'si ile referansını elde ettiğimiz canvas etiketi) width özelliğini 300 piksele ayarlayacaktır. Dolayısıyla tuvalimizin genişliği 300 piksele çıkacaktır. Fonksiyonun ikinci satırında tuval nesnemizin getContext yöntemini çağırıyoruz. Buradaki context (kapsam), canvas etiketimizin üzerinde görüntülenecek olan resmi çizeceğimiz, asıl çizim nesnesidir. Bu çizim nesnesini daha sonraki yazılarımızda da göreceğiniz gibi dilediğimiz zaman hareket ettirip döndürebileceğiz. Yani kapsam aslında canvas ile aynı yerder / üst üste görülen fakat gerçekte ayrı olan, hareket ettirilebilir bir iç tuvaldir. Çizimlerimizi tuvale değil, context'e / kapsama yaparız. Örneklerimizde de göreceğiniz gibi çizim için örnekteki ctx 'in yöntem ve özelliklerini kullanacağız, tuvalin değil. Context'i anlamak için resim programlarında kullanılan maskeleme tekniğiyle karşılaştırabilirsiniz. Bilindiği gibi maskeleyen ve maskelenen iki resim var. Maskeleyen resmin dolgu olan kısımları bir pencere gibi kullanılıp arka plandaki maskelenen resmin maskeleyenin şekline uygun kısımlarını görüyoruz. Örneğin bir yıldız şekli içinde bir fotoğraf görüntüleyebiliriz. Dilersek maskelenen alttaki resmin yerini değiştirerek farklı yerlerin maske altından görünmesini sağlayabiliyoruz. İşte tuval maskeleyen, context ise maskelenen resme benzer. tuval.getContext("2d") ifadesi, tuvalin (canvas) 2 boyutlu çizim kapsamının referansını döndürür. Biz dönen referansı daha sonra özellik ve yöntemlerini çağırabilmek ctx isimli bir değişkene atıyoruz. 2d'yi görünce hemen bunun üç boyutlu çizim için 3d'si var mı sorusu akla gelebililir. 3d'si yok (yani bu yazının yazıldığı tarihte yoktu). Ancak canvas üzerine 3 boyutlu çizim yapmak için WebGL kullanılabilir ve bunun içinde getContext("webgl") yazılır. İlk çizim Gerekli etiketleri ve fonksiyonumuzdaki hazırlık kodlarını yazdıktan sonra artık çizime başlayabiliriz. İşte ilk çizim. <script> function ciz() { var tuval = document.getElementById("cnTuval"); var ctx = tuval.getContext("2d"); ctx.fillStyle = "blue"; ctx.fillRect(10, 10, 50, 50); } </script> fillStyle özelliği, kapsamın dolgu şeklini bildirmek için kullanılır. Örneğimizde renk adı bildiriyoruz. fillStyle olarak düz renk adı bildirilebileceği gibi sonraki yazılarda göreceğiniz gibi geçişli renklerden oluşan dolgular (degrade / gradient) ve bir resim döneşenerek dolgu oluşturulması da söylenebilir. Bu bildirimden sonra yeni bir fillStyle tanımlayana kadar yapılacak tüm dolgu işlemlerinde bu dolgu stili kullanılacaktır. fillRect (dörtgen doldur) metodu içi dolgulu bir dörtgen çizer. 4 parametre alır. Kullanım şekli şöyledir. fillRect(yatay / x pozisyonu, dikey / y pozisyonu, dörtgenin genişliği, dörtgenin yüksekliği); Verilen koordinatlar (x ve y değerleri) dörtgenin kapsama (context) göre konumudur. Kapsam normalde tuval ile örtüştüğünden burada tuvale göre verilmiş bir ölçü olarak kabul edebilirsiniz. "Çiz" tuşunu tıkladığınızda çıktı şöyle olacaktır. Koordinatlar, matematikte kullanılan koordinat sisteminden farklı kullanılır. x=0, y=0 noktası sol altta değil sol üsttedir. x sağa doğru artar, sola doğru azalır, y ise aşağı doğru artar ve yukarı doğru azalır. Negatif değerler de kullanabilirsiniz. Örneğin çıktısı üzerinde gösterecek olursak koordinat sistemi ve çizim ölçüleri şu şekildedir: Şekil üzerinde son x ve y değerlerinin 199 olarak verildiğine dikkat edin. Tuval üzerinde ilk noktanın x ve y değerleri 0'dır. Burada da bilgisayar programlamada bir çok yerde olduğu gibi saymaya 0'dan başlayacağız. Dolayısıyla 200 piksel genişliğindeki bir şeklin piksel numaraları 0'dan başlar ve 199'da biter (toplam 200 piksel). Kırmızı kenarlığın koordinat eksenlerinin dışında bırakıldığına da dikkat edin. Etiket kenarlıkları etiketin genişliğinden kabul edilmez ve HTML'de etiketin dışına çizilir. Ancak ileride de göreceğiniz gibi Canvas içine yaptığımız çizimlerde durum farklıdır. Dıştaki kırmızı kenarlık yukarıda da belirttiğim gibi tuvalin sınırlarını görebilmemiz içn stil kullanılarak çizildi. Tuval içindeki çizimler ve tuvalin koordinat sistemiyle bir ilgisi yoktur. Dörtgenin yatay ve dikey konumu (x ve y) 10 pikseldir (11. pikseller). Bunları fillRect 'in ilk iki parametresi ile belirledik. Genişliği ve yüsekliği ise 50'şer pikseldir. Bunları da sonraki iki parametre ile belirledik. Bu kadar. Lütfen hata veya eksik görürseniz bildirin. İlgili Makaleler HTML5 ve Flash üzerine HTML5 Canvas etiketi ile çizim  (Bu makale) Canvas etiketine düz çizgilerle çizim yapmak Canvas ile dörtgenler çizmek Canvas ile daire, çember, yay ve dilimler çizmek Canvas ile eğriler çizmek Canvas ile metin görüntüleme Canvas çizgi uçları ve çizgi birleşimleri Canvas çizimlerinde tuval durumunu saklama ve geri yükleme Canvas ile gölge efekti oluşturma Canvas ile tuval üzerine resim çizmek Canvas ile degrade / gradient (geçişli renk) dokuları oluşturma Canvas ile dönüşüm işlemleri 1: Tuvali kaydırma ve döndürme Canvas ile dönüşüm işlemleri 2: Ölçekleme Canvas ile dönüşüm işlemleri 3: Transform ile Dönüşüm Canvas ile resim dokusu oluşturma Canvas Clip Yöntemiyle Maskeleme Canvas globalAlpha Özelliği Canvas globalCompositeOperation Özelliği Canvas İle Piksel İşlemleri

Canvas (tuval), HTML5 ile gelen ve web sayfası üzerinde grafikler / çizimler oluşturmamızı sağlayan bir etikettir. Canvas etiketini tarayıcı üzerinde bir resim olarak görürsünüz. Zaten sağ tıkladığınızda da resim seçenekleri kısayol menüsü görüntülenir. Ancak Canvas, img etiketi gibi çoğunlukla statik olarak kullanılan bir etiket değildir. Üzerine dilediğiniz çizimleri yapabilir ve çizimi zamanlayıcı veya üyenin etkileşimine bağlı olarak değiştirerek animasyonlar oluşturabilirsiniz. Zaten oluş amacı da budur. Konuyu basit ve ayrıntılı olarak anlatmaya çalışacağım. Bildiğiniz yerleri atlayabilirsiniz. Ancak yine de gözden kaçabilecek bazı ayrıntılar ve yazılımda yeni iseniz bazı ek bilgi ve ipuçları için tamamını okumanızda fayda olduğunu düşünüyorum. Canvas etiketi şu şekilde tanımlanır: <canvas id="cnTuval" width="200" height="200" style="border:1px solid red">
Tarayıcınız HTML5 desteklemiyor
</canvas><br/>
<input type="button" value="Çiz" onclick="ciz()" />
Ekran görüntüsü : Görüldüğü gibi etiketin bir kapanışı vardır. Etiket içinde "Tarayıcınız HTML5 desteklemiyor" şeklinde bir mesaj var. Eski tarayıcılar, canvas etiketini tanımadıklarından herhangi bir etiket olarak yorumlayıp içindeki metni gösterirler. Ancak yeni tarayıcılar canvas etiketini tanıdıklarından ve canvas etiketinin içinde bir yazı bulunmayacağından, yazıyı görüntülemezler. Dolayısıyla eski tarayıcılarda bir mesaj görüntülemiş oluruz. Örnekte genişlik ve yükseklik verilmiştir. Bunları vermek zorunlu değildir. Ancak verilmediğinde tarayıcı varsayılan bir genişlik ve yükseklik gösterecek ve bu da bizim çizimlerimizde işimize gelmeyecektir. Bunun için canvas etiketine mutlaka birer genişlik (width) ve yükseklik (height) özelliği veriyoruz. Özellik değerleri piksel cinsindendir. Örnekte kullanılan id özelliği diğer etiketlerde olduğu gibi etiketin tanımlayıcısı / tekil adıdır. Bunu vermemiz gerekiyor, çünkü tuvale çizim yapabilmek için JavaScript ile çizim yapılacak etiketin (tuvalin) referansını (hafızada bulunan nesne haline ulaşabilmek ve onu kullanabilmek için bir değer) alacağız ve referansı alabilmek için de id özelliğini kullanacağız (id'si şu olan etiketin referansını ver). Canvas etiketi beyaz olarak görüntüleneceğinden sınırlarını görebilmeniz için style özelliği ile etrafına 1 piksel kalınlığında düz kırmızı bir kenarlık çizdik. Zorunlu bir kullanım değildir. Örnekteki tuş, üzerinde "Çiz" yazısı olan ve tıklandığında (onclick) ciz isimli bir fonksiyonu çalıştıran bir tuştur. Biz örneklerimizde kendiliğinden veya sayfa yüklendiğinde değil, tuş tıklanarak çizim yapılması yolunu kullanacağız. Yani zorunlu değil ve çizim tuş tıklandığında yapılacak. Hazırlık Canvas üzerine çizim yapabilmek öncelikle aşağıdaki ifadeleri çalıştırmamız gerekiyor. Bunları ciz isimli bir fonksiyonda: <script>

function ciz() {

var tuval = document.getElementById("cnTuval");
var ctx = tuval.getContext("2d");
// Bundan sonra çizimlerimizi yapabiliriz.

}

</script>
Fonksiyonda kullanılan document nesnesi, HTML belgemizin referansı olan bir nesnedir. Bu referansı kullanarak HTML belgemiz üzerinde bir çok işlem gerçekleştiririz. document nesnesinin bir çok özellik ve yöntemi (fonksiyon) vardır. Bilindiği gibi Nesneye Yönelik Programlamada bir nesnenin özelliklerine ulaşmak / değiştirmek veya yöntemlerini çağırmak için nesne adından sonra bir . işareti koyar ve sonra özellik veya yöntemin adını yazarız. document nesnesinin getElementById yöntemi (id'sine göre elemanı / etiketi getir), id özelliği değeri verilen bir etiketin referansını döndürür. Dönen referansı bir değişkene atar ve bu şekilde bu etikete ulaşabiliriz. Örneğimizde id özelliği değeri cnTuval olan canvas etiketimizin referansını alıyor ve tuval isimli bir değişkene atıyoruz. Bundan sonra bu etiketin (tuvalin / canvas) özellik ve yöntemlerine ulaşabilmek için bu referansı (tuval değişkenini) kullanacağız. Bu referansı şu şekilde kullanabiliz: tuval.width = 300; Bu ifade tuval nesnesinin (id'si ile referansını elde ettiğimiz canvas etiketi) width özelliğini 300 piksele ayarlayacaktır. Dolayısıyla tuvalimizin genişliği 300 piksele çıkacaktır. Fonksiyonun ikinci satırında tuval nesnemizin getContext yöntemini çağırıyoruz. Buradaki context (kapsam), canvas etiketimizin üzerinde görüntülenecek olan resmi çizeceğimiz, asıl çizim nesnesidir. Bu çizim nesnesini daha sonraki yazılarımızda da göreceğiniz gibi dilediğimiz zaman hareket ettirip döndürebileceğiz. Yani kapsam aslında canvas ile aynı yerder / üst üste görülen fakat gerçekte ayrı olan, hareket ettirilebilir bir iç tuvaldir. Çizimlerimizi tuvale değil, context'e / kapsama yaparız. Örneklerimizde de göreceğiniz gibi çizim için örnekteki ctx 'in yöntem ve özelliklerini kullanacağız, tuvalin değil. Context'i anlamak için resim programlarında kullanılan maskeleme tekniğiyle karşılaştırabilirsiniz. Bilindiği gibi maskeleyen ve maskelenen iki resim var. Maskeleyen resmin dolgu olan kısımları bir pencere gibi kullanılıp arka plandaki maskelenen resmin maskeleyenin şekline uygun kısımlarını görüyoruz. Örneğin bir yıldız şekli içinde bir fotoğraf görüntüleyebiliriz. Dilersek maskelenen alttaki resmin yerini değiştirerek farklı yerlerin maske altından görünmesini sağlayabiliyoruz. İşte tuval maskeleyen, context ise maskelenen resme benzer. tuval.getContext("2d") ifadesi, tuvalin (canvas) 2 boyutlu çizim kapsamının referansını döndürür. Biz dönen referansı daha sonra özellik ve yöntemlerini çağırabilmek ctx isimli bir değişkene atıyoruz. 2d'yi görünce hemen bunun üç boyutlu çizim için 3d'si var mı sorusu akla gelebililir. 3d'si yok (yani bu yazının yazıldığı tarihte yoktu). Ancak canvas üzerine 3 boyutlu çizim yapmak için WebGL kullanılabilir ve bunun içinde getContext("webgl") yazılır. İlk çizim Gerekli etiketleri ve fonksiyonumuzdaki hazırlık kodlarını yazdıktan sonra artık çizime başlayabiliriz. İşte ilk çizim. <script>

function ciz() {

var tuval = document.getElementById("cnTuval");
var ctx = tuval.getContext("2d");

ctx.fillStyle = "blue";
ctx.fillRect(10, 10, 50, 50);

}

</script>
fillStyle özelliği, kapsamın dolgu şeklini bildirmek için kullanılır. Örneğimizde renk adı bildiriyoruz. fillStyle olarak düz renk adı bildirilebileceği gibi sonraki yazılarda göreceğiniz gibi geçişli renklerden oluşan dolgular (degrade / gradient) ve bir resim döneşenerek dolgu oluşturulması da söylenebilir. Bu bildirimden sonra yeni bir fillStyle tanımlayana kadar yapılacak tüm dolgu işlemlerinde bu dolgu stili kullanılacaktır. fillRect (dörtgen doldur) metodu içi dolgulu bir dörtgen çizer. 4 parametre alır. Kullanım şekli şöyledir. fillRect(yatay / x pozisyonu,
dikey / y pozisyonu,
dörtgenin genişliği,
dörtgenin yüksekliği);
Verilen koordinatlar (x ve y değerleri) dörtgenin kapsama (context) göre konumudur. Kapsam normalde tuval ile örtüştüğünden burada tuvale göre verilmiş bir ölçü olarak kabul edebilirsiniz. "Çiz" tuşunu tıkladığınızda çıktı şöyle olacaktır. Koordinatlar, matematikte kullanılan koordinat sisteminden farklı kullanılır. x=0, y=0 noktası sol altta değil sol üsttedir. x sağa doğru artar, sola doğru azalır, y ise aşağı doğru artar ve yukarı doğru azalır. Negatif değerler de kullanabilirsiniz. Örneğin çıktısı üzerinde gösterecek olursak koordinat sistemi ve çizim ölçüleri şu şekildedir: Şekil üzerinde son x ve y değerlerinin 199 olarak verildiğine dikkat edin. Tuval üzerinde ilk noktanın x ve y değerleri 0'dır. Burada da bilgisayar programlamada bir çok yerde olduğu gibi saymaya 0'dan başlayacağız. Dolayısıyla 200 piksel genişliğindeki bir şeklin piksel numaraları 0'dan başlar ve 199'da biter (toplam 200 piksel). Kırmızı kenarlığın koordinat eksenlerinin dışında bırakıldığına da dikkat edin. Etiket kenarlıkları etiketin genişliğinden kabul edilmez ve HTML'de etiketin dışına çizilir. Ancak ileride de göreceğiniz gibi Canvas içine yaptığımız çizimlerde durum farklıdır. Dıştaki kırmızı kenarlık yukarıda da belirttiğim gibi tuvalin sınırlarını görebilmemiz içn stil kullanılarak çizildi. Tuval içindeki çizimler ve tuvalin koordinat sistemiyle bir ilgisi yoktur. Dörtgenin yatay ve dikey konumu (x ve y) 10 pikseldir (11. pikseller). Bunları fillRect 'in ilk iki parametresi ile belirledik. Genişliği ve yüsekliği ise 50'şer pikseldir. Bunları da sonraki iki parametre ile belirledik. Bu kadar. Lütfen hata veya eksik görürseniz bildirin. İlgili Makaleler HTML5 ve Flash üzerine HTML5 Canvas etiketi ile çizim  (Bu makale) Canvas etiketine düz çizgilerle çizim yapmak Canvas ile dörtgenler çizmek Canvas ile daire, çember, yay ve dilimler çizmek Canvas ile eğriler çizmek Canvas ile metin görüntüleme Canvas çizgi uçları ve çizgi birleşimleri Canvas çizimlerinde tuval durumunu saklama ve geri yükleme Canvas ile gölge efekti oluşturma Canvas ile tuval üzerine resim çizmek Canvas ile degrade / gradient (geçişli renk) dokuları oluşturma Canvas ile dönüşüm işlemleri 1: Tuvali kaydırma ve döndürme Canvas ile dönüşüm işlemleri 2: Ölçekleme Canvas ile dönüşüm işlemleri 3: Transform ile Dönüşüm Canvas ile resim dokusu oluşturma Canvas Clip Yöntemiyle Maskeleme Canvas globalAlpha Özelliği Canvas globalCompositeOperation Özelliği Canvas İle Piksel İşlemleri

Canvas (tuval), HTML5 ile gelen ve web sayfası üzerinde grafikler / çizimler oluşturmamızı sağlayan bir etikettir. Canvas etiketini tarayıcı üzerinde bir resim olarak görürsünüz. Zaten sağ tıkladığınızda da resim seçenekleri kısayol menüsü görüntülenir. Ancak Canvas, img etiketi gibi çoğunlukla statik olarak kullanılan bir etiket değildir. Üzerine dilediğiniz çizimleri yapabilir ve çizimi zamanlayıcı veya üyenin etkileşimine bağlı olarak değiştirerek animasyonlar oluşturabilirsiniz. Zaten oluş amacı da budur. Konuyu basit ve ayrıntılı olarak anlatmaya çalışacağım. Bildiğiniz yerleri atlayabilirsiniz. Ancak yine de gözden kaçabilecek bazı ayrıntılar ve yazılımda yeni iseniz bazı ek bilgi ve ipuçları için tamamını okumanızda fayda olduğunu düşünüyorum. Canvas etiketi şu şekilde tanımlanır: <canvas id="cnTuval" width="200" height="200" style="border:1px solid red"> Tarayıcınız HTML5 desteklemiyor </canvas><br/> <input type="button" value="Çiz" onclick="ciz()" /> Ekran görüntüsü : Görüldüğü gibi etiketin bir kapanışı vardır. Etiket içinde "Tarayıcınız HTML5 desteklemiyor" şeklinde bir mesaj var. Eski tarayıcılar, canvas etiketini tanımadıklarından herhangi bir etiket olarak yorumlayıp içindeki metni gösterirler. Ancak yeni tarayıcılar canvas etiketini tanıdıklarından ve canvas etiketinin içinde bir yazı bulunmayacağından, yazıyı görüntülemezler. Dolayısıyla eski tarayıcılarda bir mesaj görüntülemiş oluruz. Örnekte genişlik ve yükseklik verilmiştir. Bunları vermek zorunlu değildir. Ancak verilmediğinde tarayıcı varsayılan bir genişlik ve yükseklik gösterecek ve bu da bizim çizimlerimizde işimize gelmeyecektir. Bunun için canvas etiketine mutlaka birer genişlik (width) ve yükseklik (height) özelliği veriyoruz. Özellik değerleri piksel cinsindendir. Örnekte kullanılan id özelliği diğer etiketlerde olduğu gibi etiketin tanımlayıcısı / tekil adıdır. Bunu vermemiz gerekiyor, çünkü tuvale çizim yapabilmek için JavaScript ile çizim yapılacak etiketin (tuvalin) referansını (hafızada bulunan nesne haline ulaşabilmek ve onu kullanabilmek için bir değer) alacağız ve referansı alabilmek için de id özelliğini kullanacağız (id'si şu olan etiketin referansını ver). Canvas etiketi beyaz olarak görüntüleneceğinden sınırlarını görebilmeniz için style özelliği ile etrafına 1 piksel kalınlığında düz kırmızı bir kenarlık çizdik. Zorunlu bir kullanım değildir. Örnekteki tuş, üzerinde "Çiz" yazısı olan ve tıklandığında (onclick) ciz isimli bir fonksiyonu çalıştıran bir tuştur. Biz örneklerimizde kendiliğinden veya sayfa yüklendiğinde değil, tuş tıklanarak çizim yapılması yolunu kullanacağız. Yani zorunlu değil ve çizim tuş tıklandığında yapılacak. Hazırlık Canvas üzerine çizim yapabilmek öncelikle aşağıdaki ifadeleri çalıştırmamız gerekiyor. Bunları ciz isimli bir fonksiyonda: <script> function ciz() { var tuval = document.getElementById("cnTuval"); var ctx = tuval.getContext("2d"); // Bundan sonra çizimlerimizi yapabiliriz. } </script> Fonksiyonda kullanılan document nesnesi, HTML belgemizin referansı olan bir nesnedir. Bu referansı kullanarak HTML belgemiz üzerinde bir çok işlem gerçekleştiririz. document nesnesinin bir çok özellik ve yöntemi (fonksiyon) vardır. Bilindiği gibi Nesneye Yönelik Programlamada bir nesnenin özelliklerine ulaşmak / değiştirmek veya yöntemlerini çağırmak için nesne adından sonra bir . işareti koyar ve sonra özellik veya yöntemin adını yazarız. document nesnesinin getElementById yöntemi (id'sine göre elemanı / etiketi getir), id özelliği değeri verilen bir etiketin referansını döndürür. Dönen referansı bir değişkene atar ve bu şekilde bu etikete ulaşabiliriz. Örneğimizde id özelliği değeri cnTuval olan canvas etiketimizin referansını alıyor ve tuval isimli bir değişkene atıyoruz. Bundan sonra bu etiketin (tuvalin / canvas) özellik ve yöntemlerine ulaşabilmek için bu referansı (tuval değişkenini) kullanacağız. Bu referansı şu şekilde kullanabiliz: tuval.width = 300; Bu ifade tuval nesnesinin (id'si ile referansını elde ettiğimiz canvas etiketi) width özelliğini 300 piksele ayarlayacaktır. Dolayısıyla tuvalimizin genişliği 300 piksele çıkacaktır. Fonksiyonun ikinci satırında tuval nesnemizin getContext yöntemini çağırıyoruz. Buradaki context (kapsam), canvas etiketimizin üzerinde görüntülenecek olan resmi çizeceğimiz, asıl çizim nesnesidir. Bu çizim nesnesini daha sonraki yazılarımızda da göreceğiniz gibi dilediğimiz zaman hareket ettirip döndürebileceğiz. Yani kapsam aslında canvas ile aynı yerder / üst üste görülen fakat gerçekte ayrı olan, hareket ettirilebilir bir iç tuvaldir. Çizimlerimizi tuvale değil, context'e / kapsama yaparız. Örneklerimizde de göreceğiniz gibi çizim için örnekteki ctx 'in yöntem ve özelliklerini kullanacağız, tuvalin değil. Context'i anlamak için resim programlarında kullanılan maskeleme tekniğiyle karşılaştırabilirsiniz. Bilindiği gibi maskeleyen ve maskelenen iki resim var. Maskeleyen resmin dolgu olan kısımları bir pencere gibi kullanılıp arka plandaki maskelenen resmin maskeleyenin şekline uygun kısımlarını görüyoruz. Örneğin bir yıldız şekli içinde bir fotoğraf görüntüleyebiliriz. Dilersek maskelenen alttaki resmin yerini değiştirerek farklı yerlerin maske altından görünmesini sağlayabiliyoruz. İşte tuval maskeleyen, context ise maskelenen resme benzer. tuval.getContext("2d") ifadesi, tuvalin (canvas) 2 boyutlu çizim kapsamının referansını döndürür. Biz dönen referansı daha sonra özellik ve yöntemlerini çağırabilmek ctx isimli bir değişkene atıyoruz. 2d'yi görünce hemen bunun üç boyutlu çizim için 3d'si var mı sorusu akla gelebililir. 3d'si yok (yani bu yazının yazıldığı tarihte yoktu). Ancak canvas üzerine 3 boyutlu çizim yapmak için WebGL kullanılabilir ve bunun içinde getContext("webgl") yazılır. İlk çizim Gerekli etiketleri ve fonksiyonumuzdaki hazırlık kodlarını yazdıktan sonra artık çizime başlayabiliriz. İşte ilk çizim. <script> function ciz() { var tuval = document.getElementById("cnTuval"); var ctx = tuval.getContext("2d"); ctx.fillStyle = "blue"; ctx.fillRect(10, 10, 50, 50); } </script> fillStyle özelliği, kapsamın dolgu şeklini bildirmek için kullanılır. Örneğimizde renk adı bildiriyoruz. fillStyle olarak düz renk adı bildirilebileceği gibi sonraki yazılarda göreceğiniz gibi geçişli renklerden oluşan dolgular (degrade / gradient) ve bir resim döneşenerek dolgu oluşturulması da söylenebilir. Bu bildirimden sonra yeni bir fillStyle tanımlayana kadar yapılacak tüm dolgu işlemlerinde bu dolgu stili kullanılacaktır. fillRect (dörtgen doldur) metodu içi dolgulu bir dörtgen çizer. 4 parametre alır. Kullanım şekli şöyledir. fillRect(yatay / x pozisyonu, dikey / y pozisyonu, dörtgenin genişliği, dörtgenin yüksekliği); Verilen koordinatlar (x ve y değerleri) dörtgenin kapsama (context) göre konumudur. Kapsam normalde tuval ile örtüştüğünden burada tuvale göre verilmiş bir ölçü olarak kabul edebilirsiniz. "Çiz" tuşunu tıkladığınızda çıktı şöyle olacaktır. Koordinatlar, matematikte kullanılan koordinat sisteminden farklı kullanılır. x=0, y=0 noktası sol altta değil sol üsttedir. x sağa doğru artar, sola doğru azalır, y ise aşağı doğru artar ve yukarı doğru azalır. Negatif değerler de kullanabilirsiniz. Örneğin çıktısı üzerinde gösterecek olursak koordinat sistemi ve çizim ölçüleri şu şekildedir: Şekil üzerinde son x ve y değerlerinin 199 olarak verildiğine dikkat edin. Tuval üzerinde ilk noktanın x ve y değerleri 0'dır. Burada da bilgisayar programlamada bir çok yerde olduğu gibi saymaya 0'dan başlayacağız. Dolayısıyla 200 piksel genişliğindeki bir şeklin piksel numaraları 0'dan başlar ve 199'da biter (toplam 200 piksel). Kırmızı kenarlığın koordinat eksenlerinin dışında bırakıldığına da dikkat edin. Etiket kenarlıkları etiketin genişliğinden kabul edilmez ve HTML'de etiketin dışına çizilir. Ancak ileride de göreceğiniz gibi Canvas içine yaptığımız çizimlerde durum farklıdır. Dıştaki kırmızı kenarlık yukarıda da belirttiğim gibi tuvalin sınırlarını görebilmemiz içn stil kullanılarak çizildi. Tuval içindeki çizimler ve tuvalin koordinat sistemiyle bir ilgisi yoktur. Dörtgenin yatay ve dikey konumu (x ve y) 10 pikseldir (11. pikseller). Bunları fillRect 'in ilk iki parametresi ile belirledik. Genişliği ve yüsekliği ise 50'şer pikseldir. Bunları da sonraki iki parametre ile belirledik. Bu kadar. Lütfen hata veya eksik görürseniz bildirin. Canvas üzerine çizim ile ilgili diğer makaleler için tıklayın.