HTML5 Canvas Nedir ? : <canvas> elementi bir web sayfasında grafik çizmek için kullanılır.
Canvas tuval anlamına gelen HTML5 ile gelen yeni özelliklerden biridir. Canvas’ın nimetlerinden yararlanabilmek için HTML5 destekleyen güncel bir tarayıcı edinmek gerekmektedir.
Canvas elementi oluşturduğunuzda içine grafik çizilmeye uygun ortam oluşturmuş olursunuz bu çizimler yazı, resim ve farklı çizim şekilleri olabilir. Çizim işini başka dillerle yazabilirsiniz fakat web için en uygun dil javascript olacaktır.
Canvas (Tuval) Ne için kullanılır?
HTML5 <canvas> elementi script’ler (genellikle JavaScript) yoluyla grafikler çizmek için kullanılır.
<canvas> grafikler için sadece bir tutucudur (tuval). Gerçekten bir grafik çizmek için script kullanmalısınız.
Canvas yollar, kutular, daireler, yazılar ve resimler eklemek için bir kaç değişik metod kullanır.
Internet Explorer 9+, Firefox, Opera, Chrome, ve Safari <canvas> elementin destekler.
Not: Internet Explorer 8 ve öncesi desteklemez.
Javascriptle oluşturduğumuz canvas’ı id ile ulaşıp tuval’in içine yazmamızı sağlar. Eğer canvas elementini oluştururken width ve height bilgilerini girmezseniz default olarak 300×150′lik bir canvas oluşturacaktır. HTML5 bize bu noktaya kadar destek veriyor bundan sonraki iş javascript te bitiyor. Şimdi temel bir canvas şablon’u çıkarıp bu şablon üzerinden geliştirerek ilerleyelim.
Canvas oluşturmak
Bir canvas bir HTML sayfasındaki dikdörtgen bir alandır ve <canvas> elementi ile belirtilir.
Not: Varsayılan olarak <canvas> elementinin sınırları ve içeriği yoktur.
Biçimlendirme (markup) şu şekildedir:
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"> </canvas>
JavaScript ile Canvas (Tuval) Üzerine Çizim Yapmak
Canvas üzerindeki tüm çizimler JavaScript içinde yapılmalıdır:
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0,0,150,75);
</script>
