4Primes Blog

Bu yazımda Size Canvas elementini biraz daha anlatıp,bu element ile neler yapabileceklerimiz konusunda ufkumuzu açmaya çalışacağım.

HTML5 ile Canvas elementi oluşturduğunuzda içine grafik çizilmeye uygun ortam oluşturmuş oluruz. Çizim işini için HTML 5 den faydalanamıyoruz tabiki.Çizim işleri için en uygun dil javascripttir ve bu yazıda vereceğim örneklerde javascript kodları üzerinden anlatmaya çalışacağım.

İlk önce çizim yapacağımız zemini hazırlayalım.Bunun için tanımlayacağımız kod parçası ile bir Canvas elementi tanımlayacağız.

<canvas id=”4primes” width=”300″ height=”300″></canvas>

Bu kod parçası ile 300 pixele 300 pixellik bir alan tanımlamış olduk.Id olarak “4primes” ismini verdik.Bu verdiğimiz Id bizim kullandığımız dil içinde çağırmamız için kullanılacaktır.HTML 5 bize bu kadar hizmet vermektedir.Canvas elementi içinde yapacağımız işlemler için javascript kullanacağız.

<canvas id=”4primes”></canvas>

Yukarıdaki şekilde de Canvas elementini oluşturabiliriz.Yalnız bu kodda genişlik ve yükseklik tanımlanmadığı için default olarak 300 pixele 150 pixel olarak atanır.

Şimdi ise bu oluşturduğumuz Canvas elementine nasıl erişip çağıracağımıza bakalım.Çağırma kısmını da javascript kodu olarak veriyoruz.

var canvas=document.getElementById(“4primes”);

Daha sonra içeriği(context) oluşturmak için şu kodu ekliyoruz.

var ctx = canvas.getContext(’2d’);

Şimdide hepsini bir araya getirip kodumuzu yazarsak;

var canvas=document.GetElementById(‘4primes’);
if canvas(get.Context){
var ctx=canvas.GetContext(’2d’);
//Çizim kodları buraya yazılır.
} else {

//Bir önceki yazımda da paylaştığım gibi her broser HTML 5 Canvas elementine destek //vermiyor o zaman kullanıcıya buradan mesaj gönderebiliriz.”Mesela Broser desteği yoktur”.
 }

Şimdi de çizim konusunda bilgi verelim.Örneklerle de pekiştirelim.

İlk önce Canvas elementimizi çağıralım.Adı 4primes olduğunu unutmayalım.

var c=document.getElementById(“4prime”);

Contexti tanımlayalım.

var cxt=c.getContext(“2d”);

Sizlere anlatmak için aldığım örnekte kırmızı renk kullanılmış.Bunun için kırmızı rengin kodunu kullanarak kırmızıya boyama yapalım.

cxt.fillStyle=”#FF0000″;

Sıra asıl çizim koduna geldi. Cxt.fillRect( ) fonksiyonunu kullancağız ve 4 tane değişken vermemiz gereklidir.İlk veri X koordinatı ikinci veri Y koordinatı son iki verimizde en ve boyudur.

cxt.fillRect(0,0,300 ,150);

Yukarıdaki koduda ekledikten sonra ilk kodumuzu yazmış olduk.Peki ne oluşturduk ?

Bu yapıyı oluşturduktan sonra birazda hazır şekillerden kopup çizgiler üzerinde kodlama yapalım.

var c=document.getElementById(“4prime”);
var cxt=c.getContext(“2d”);

Yukarıdaki yapıyı zaten biliyoruz.4prime’ı çağırıp contextini tanımladım.Eğer çizgi çizeceksek ilk önce bir başlangıç noktamız olmalı.

cxt.moveTo(20,20);

Bu başlangıç noktasını verdikten sonra bitiş noktasını da belirtmemiz lazımki çizgimizi oluşturabilelim.

cxt.lineTo(250,200);

Eklediğimiz sadece bu iki kodla (10,10) noktasından başlayıp (150,50) noktasında sonlanan bir çizgi çizmiş olduk.
Bir de bu kısmı ekleyelim bakalım ne olacak?

cxt.lineTo(10,200);

Çizimlerin gösterilebilmesi için asağıdaki stroke fonksiyonunuda ekliyoruz.

cxt.stroke();

Şimdi Ne yaptığımzı görelim;

Şimdi ise bir de daire çizelim.Rengi kırmızı olsun.

var c=document.getElementById(“4prime”);
var cxt=c.getContext(“2d”);
cxt.fillStyle=”#FF0000″;

Yukarıdaki kısımlara daha önceden de değindik.

cxt.beginPath();
cxt.arc(70,18,15,0,Math.PI*2,true);
cxt.closePath();
cxt.fill();

İlk önce bir path açtık.Sonra ARC fonksiyonunu kullandık.Arc fonksiyonu ilk aldığı iki değer çizilecek çemberin X ve Y koordinatlarıdır.3.parametre ise yarıçapdır.4. ve 5. Parametre ise başlangıç ve bitiş noktalarıdır.Son parametremiz Saat yönünün tersinde çizim yapmak için true olarak seçilmiştir.
ClosePath ile çizimizi bitirdiğimizi belirttik ve fill fonksiyonu ile daha önceden belirttiğimiz kırmızı renge boyadık.

Yazıyı çok fazla uzatmadan gradiant örneğine de değinip bitirmek istiyorum.

Kodlanmasını aşağıda verdim.

var c=document.getElementById(“4prime”);
var cxt=c.getContext(“2d”);

createLinearGradient komutu ile (0 0) başlayıp (175,50)’de sonlanan bir yapı tanımladık.

var grd=cxt.createLinearGradient(0,0,175,50);

Başlangıç ve bitiş renklerimizi belirledik.

grd.addColorStop(0,”#FF0000″);//kırmızı
grd.addColorStop(1,”#00FF00″);//yeşil

Daha sonra bu yapının içini bu renklerle boyadık.

cxt.fillStyle=grd;
cxt.fillRect(0,0,175,50);

HTML 5 Canvas’ın nasıl kullanılması gerektiği ve temel olarak neler yapabileceğimiz konusunda bu yazımda size bilgi vermeye çalıştım.

KAYNAKLAR
http://www.libersite.com/?p=3543
http://www.w3schools.com/html5/tryit.asp?filename=tryhtml5_canvas_gradient
http://www.oktayelipek.com.tr/css3-ile-daire-nasil-cizilir
http://www.html5canvastutorials.com/tutorials/html5-canvas-arcs/
http://www.libersite.com/?p=3543
http://www.openspc2.org/HTML/en/appendix/canvas_param/canvas/createLinearGradient/index.html

Tags: CANVAS, HTML 5

Bu yazıda HTML 5 ve HTML 5 ile gelen Canvas özelliğini sizin için inceleyeceğim.HTML 5, HTML dilinin şu andaki en son sürümüdür. İlk kez 22 Ocak 2008 de duyurulmuştu.

HTML 5 Internet Explorer, Mozilla Firefox ve Opera tarayıcılarının güncel sürümleri tarafından kısmen desteklenmektedir, Google Chrome ve Safari tarayıcılarının güncel sürümleri üzerinde, deneme aşamasında da olsa çok daha iyi bir şekilde çalışmaktadır. Günümüzde kullanılan HTML 4.1 sürümü, CSS desteğiyle ne kadar düzenli ve sağlam bir yapıda kodlarsak kodlayalım, yine de fazladan yazılan kodlar işlevselliği bozmaktadır. Bu yüzden HTML 5 bu ihtiyaçları karşılamak adına geliştirilmeye başlanmıştır.

HTML5 kullanmak aynı zamanda UI (kullanıcı arayüzü) mühendislerinin ve back end (sunucu uygulama) geliştiricilerinin sadece tek codebase kullanımından yararlanabiliyor olmaları demektir. Yapının temelleri aynı kalsa da, her platforma entegre edilmiş back end layerlar ve görüntüler olabilecekti.Bu, birbirine bağlı bir ürün tecrübesinin yaratılmasına yardım eden ürün çizgisinin karşısında, gelişimin yayılma sürecini hızlandırmaktadır.

Audio veya video etiketleri gibi bir çok spesifik yönleriyle birlikte kullanılması gereken HTML 5, sadece bir biçimleme dili olmasından ziyade web aplikasyonları yaratmakta da kullanılabilmektedir. CSS3 ve JS ile birleştirmek çok daha güçlü uyumlu ve sağlam uygulamaları mümkün kılmaktadır. Uygulamalar bu sayede binlerce cihazda bir çok ihtimale uygun şekilde kullanılabilmektedir. Özellikle de iliştirilmiş platformlar ve bağlanmış cihazlarla çok daha güçlü olacaklardır.

Peki HTML 4’den sonra gelen yenilikler nelerdi ?

HTML 5 ile birlikte pek çok yenilik göze çarpıyor. Eklenen bazı yeni etiketlere gözatmak gerekirse;

<canvas>    : Sayfada bir çizim alanı oluşturur. İlgili alana Javascript kullanarak çizim yapılabilir.(Bu etiket üzerine daha da ayrıntılı bilgi vereceğiz )
<audio>: Sayfaya ses oynatıcı bir modül ekler.
<video> : Video oynatıcı bir modül ekler.
<progress> : İşlem süreci göstergesi ekler.
<caption> : Başlık olarak düşünülen metinleri düzenler.
<header> : Sitenin başlık ve açıklama içeriğini alır.
<nav> : Menüleri ve bir takım zaruri işlevleri içine alır.
<footer> : Sitelerin en alt kısmını içine alır.
<section> : Sitelerin ana içerik kısmını içine alır.
<aside> : Ana içerikte ayrı yazılan kısımdır.
<article> : Makale, deneme tarzı yazıları kapsar.
<embed> : Dışarıdan eklenen componentler için kullanılır. (Örn : .swf uzantılı dosyalar)
<details> : Detay bilgisi içerir.
<summary> : Yazının başlığını belirler.
<time> : Tarih, saat verilerini kapsar.
<mark> : Yazı içerisinde özellikle üstünde durulan kelimeleri belirler.
<fig>
<figure>
<hgroup>

HTML 4 teki bazı etiketler ise aynı işlevleri CSS kullanılarak yapılabildiği için kaldırıldı. Bunlara örnek olarak;

<center>
<font>

etiketlerini verebiliriz.

Ayrıca HTML 5 söz dizimi artık *SGML tabanlı değil. Buna sebep olarak SGML nin programcıyı kısıtlıyor olması gösteriliyor.
*SGML:html ve xml’i içeren bir metalanguage olarak tanımlanabilir. SGML metin belgelerini ve diğer veri formlarını çeşitli ortamlarda kullanabilmek amacıyla yapılarını kodlamak için kullanılan kapsamlı bir sistemdir.

HMTL 5 CANVAS

Canvas elementi javascript ile web sayfalarında grafik çizmek için kullanılır. Canvas, her pikselini kontrol edebileceğiniz dikdörtgen bir alan ya da tuval olarak ifade edilebilir

Canvas, dinamik olarak 2D fotolar yapmamızı sağlayan HTML 5 elementidir. Daha önceki sürümlerde bulunmayan canvas, HTML 5 ile web teknolojilerine yeni bir soluk getirmiştir. Canvas’ın çalışma prensipi tam olarak olmasa bile genelde JavaScripte üzerine kuruludur. JavaScript ile birlikte çalıştıkları zaman Kaliteli işler ortaya çıkabilir.

<canvas id="myCanvas" width="200" height="100">
Tarayıcınız Canvas elementini desteklememektedir.
</canvas>

Yukarıdaki kullanım genel kullanım şeklidir
Elementin içine yazdığımız mesaj canvas elementini desteklemeyen tarayıcılar içindir. Eğer kullanılan tarayıcı bu elementi desteklemiyorsa ziyaretçiye bu mesaj gösterilecektir.
Canvas elementi ile çizim yapabilmek için javascript kullanmak gerekmektedir.

<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.fillRect(10,5,180,90);
</script>

var c=document.getElementById("Canvas");

Yukarıdaki javascript kodu ile, kodda id (bizim örneğimizdeki id : Canvas) kullanarak çizimin sayfadaki hangi element için üretildiğini belitmiş oluruz.

var cxt=c.getContext("2d");

Bu kod ile 2 boyutlu bir çizim alanı tanımlamış olduk.

cxt.fillStyle="#FF0000";

fillStyle metodu ile renk tanımlaması yaptık.

cxt.fillRect(10,5,180,90);

Formatı : [.fillRect(x,y,width,height)] Burada x ve y çizimin koordinatlarını, width, height ise çizimin ebatlarını ifade eder.

Genel olarak HTML 5 VE Canvas’ı bu şekilde özetleyebiliriz.

Kaynaklar
http://www.libersite.com/?p=3543
http://www.whosayin.com/y/html-5/
http://www.whosayin.com/y/html-5-ile-html-4-arasindaki-farklar/
http://www.whosayin.com/y/html-5-canvas-ornekleri/
http://tr.wikipedia.org/wiki/HTML5
http://en.wikipedia.org/wiki/Canvas_element

Tags: CANVAS, HTML 5