Yeni teknoloji HTML5 ile alakalı bahsetmek istediğim bir başka başlık ise, Canvas. Genel itibariyle özetlemek gerekirse, sayfa üzerinde resim kullanmadan görseller oluşturabileceğimiz, grafikler ve geçişler hazırlayabileceğimiz detaylı bir konu.
Basit işlemler için hem zamandan hemde belirli sunucu limitlerinden tasarruf etmek için hayat kurtarır nitelikte özellikleri bulunan bu etiketimizin, kimi özelliklerini kullanmak ve artırmak için dış kütüphanelere ihtiyaç duyduğunu söyleyebilirim. Bu anlatımımda, stabil bir HTML sayfa üzerinde kütüphane gerektirmeden basit JavaScript işlemleri ile neler yapabileceğimizi göstermek istiyorum.
Konunun detaylı anlatımıyla alakalı internette birden fazla yabancı kaynak mevcut, yavaş yavaş Türkçe içerikli sitelerimizde de HTML5 ile alakalı yazılar yazılmaya başlanıyor, anlatımlar paylaşılıyor. Kısacası geçte olsa bu teknolojiyi benimsiyoruz.
Canvas etiketi, bize adeta bir tuval gibi çalışma alanı sunar. Üzerinde JavaScript kodlarımızla birlikte geometrik şekiller oluşturabileceğimiz, renk geçişleri sağlayabileceğimiz şekilde görüntüler oluşturmamıza imkan verir. Kullanımı ve default tanımlamaları ise bilinmesi gereken detaylar arasında.
1) Canvas henüz tüm tarayıcılar tarafından desteklenmemektedir.
2) Default olarak tanımlandığında, ekranda (eğer arkaplanı veya kenar çizgileri belirlenirse) dikdörtgen bir alan oluşturur.
3) Erişilebilir bir isim, yükseklik ve genişlik değerleriyle birlikte kullanımı rahat ve pratiktir.
4) JavaScript ile birlikte 2 boyutlu çizim ve çevrimiçi çalışma alanı imkanı sunar.
5) Koordinat verilerini ulaşılabilir şekilde sunar, piksel piksel detaylı ürünler ortaya çıkartabilirsiniz.
Genel olarak bilinmesi gereken şeyler bu şekilde, örneklerle daha iyi anlaşılacağını umuyorum. Ekrana tuvalimizi oluşturup dikdörtgen bir görüntü oluşturmak istiyoruz.
Bunu yaparken kullanmamız gereken kodlar şu şekilde;
<canvas height=”250″ width=”150″ id=”Canvas”></canvas>
Yukarıdaki kodumuz, bize bir Canvas çalışma alanı oluşturmakta, “Canvas” ismiyle, 150×250 şeklinde bir çalışma alanı oluşturduk. Burada önemli olan nokta, “id=” karşılığını sayfada başka bir Canvas veya farklı bir elementte kullanmamış olmamızdır.
Çünkü birazdan JS kodlarımızla bu yapımıza müdahale edeceğiz. Oluşturmuş olduğumuz 2 boyutlu çalışma alanımızı ise aşağıdaki kodlarla düzenliyoruz.
var c=document.getElementById(LokufCanvas”);
var ctx=c.getContext(“2d”);
ctx.fillStyle=”#FF0000″;
ctx.fillRect(0,0,100,50);
var ctx=c.getContext(“2d”);
ctx.fillStyle=”#FF0000″;
ctx.fillRect(0,0,100,50);
Yukarıdaki kodlarımızı herhangi bir JS dosyasına yazıp sayfamıza çekebiliriz, veya direkt olarak JavaScript etiketleri arasına alış çalıştırabiliriz. İlk satırımızda Canvas yapımızda kullandığımız elementimizin ismini girdik. Sonrasında ise çizmek istediğimiz dikdörtgenin rengini ve boyutlarını belirledik.
Katı görünümlerle birlikte, birçok aktif kütüphanenin yardımıyla eğik ve bükümlü çizimler gerçekleştirmek mümkün. Ama geometrik cisimlere destek sağlayabilen kimi tarayıcıların farklı sürümleri, dış kütüphanelerden çekilen teknolojileri desteklememektedir.
Tam destek bulamasa da ileride gerçekten sağlam adımlarla ilerleyecek olan HTML5’in can damarlarından birisi olan Canvas’ın kullanımına ufak bir giriş yapmış olduk. İleride ise Canvas ile alakalı, dış kütüphaneler kullanarak neler yapılacağından detaylı olarak bahsedeceğim.
