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.