Top

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;

<script type=”text/javascript”>
var c=document.getElementById(“cizimalanim”);
var cxt=c.getContext(“2d”);
cxt.fillStyle=”#FF0000″;
cxt.fillRect(0,0,150,75);
</script>

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:

X
Y

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

Line

Circle

Square

Gradient çizim

Siz neler düşünüyorsunuz? Yazımızı beğendiyseniz aşağıdaki butonlardan tavsiye edebilirsiniz, paylaşabilirsiniz veya yorumlarınızı sunabilirsiniz. Teşekkürler okuduğunuz için!

Bir önceki yazımız olan HTML 5 Dersleri – Bölüm 4 – Audio başlıklı makalemizde audio, autoplay ve Bölüm hakkında bilgiler verilmektedir. Daha fazla yazımızı görmek için HYTürkyılmaz Dijital pazarlama ve growth hacking blogu anasayfası'yı ziyaret edebilirsiniz. Yazımızı aşağıdaki paylaşım butonlarıyla paylaşarak sevginizi yayınız! Teşekkürler!

Hasan Yasin Türkyılmaz

Sosyolog, dijital stratejist. Dijital medya, reklam ve growth hacking eğitimleri ve hizmetleri sunarım. PC, konsol fark etmez. Oyun oynamayı severim.

Tüm yazıları - Websitesi

Beni takip edin!:
TwitterFacebookLinkedInPinterestGoogle PlusDiggFlickrStumbleUponYouTubeYelpRedditDelicious