HTML 5 Dersleri – Bölüm 5 – Canvas

HTML 5 Dersleri – Bölüm 5 – Canvas

Canvas elementi bir web sayfası üzerinde çizim yapmak için kullanılır. Javascript ile beraber HTML5 içinde kullanılırak elde edilir çizimler web sayfasında.

Bir canvas bir dikdörtgen alandır ve herbir pikseli kontrol edebilirsiniz.

Canvas elementi, birkaç metoda sahiptir, çizim yolları, kutular, daireler, karakterler ve imaj eklemeleri gibi.

Canvas elementi oluşturmak

HTML5 sayfasına canvas elementini ekleyin. Id’yi, width’i ve height’ini da verin.

<canvas id=”cizimalanim” width=”200″ height=”100″></canvas>  gibi…

Javascript ile çizmek

Canvas elementinin kendi kendine bir çizim gücü yok. Herşey javascriptin kendi içinde gerçekleşmekte;

bu örnekte olduğu gibi. Javascript canvas elementini bulmak için id’yi kullanmakta;

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

Sonra bağlamında nesneyi çizmekte;

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

getContext(“2d”) nesnesi bir HTML5 ile yapılmış nesne ve birçok yolu var çizgiler, kutular, daireler, karakterler ve imajlar veya daha fazlası için.

Sonraki iki adım ise bir kırmızı dikdörtgen çizmek;

cxt.fillStyle="#FF0000";
 cxt.fillRect(0,0,150,75);

Fillstyle yöntemi kırmızı yapar onu ve fillrect yöntemi ise şekilin pozisyonu ve boyutunu belirler.

Koordinatları anlamak

Fillrect yöntemi yukarıda (0,0,150,75) parametrelerine sahip.

Bunun anlamı; 150*75’lik bir dikdörtgen çiz canvas üzerinde, sol üst köşeden başlayan. (0,0)=(sol üst köşe).

Canvas’ın X ve Y koordinatları canvas üzerindeki konum çizimlerini kullanır.

Aşağıdaki dikdörtgenin üzerinde gezindiğinizde koordinatları göreceksiniz:

w3schools.com üzerinde yer alan daha fazla canvas alıştırmasını uygulayabilirsiniz;

Line

Circle

Square

Gradient çizim