HTML Canvas Ders_2 Bir Obje Çizmek

JavaScript ile Canvasa Obje Çizimi

Aşağıda bir dökdörtgen çizimi örneği görüyoruz:

<canvas id="kanvasim" width="200" height="100"
style="border:1px solid #000000;">
</canvas>

<script>
var kanvas = document.getElementById("kanvasim");
var kalem = kanvas.getContext("2d");
kalem.fillStyle = "#FF0000";
kalem.fillRect(0,0,150,75);
</script>

Bu kodlar, tarayıcımızda şöyle görünecektir:

Şimdi beraberce bu kodları anlamaya çalışalım...

1- Öncelikle, boş bir canvas elemanı oluşturuyoruz:

<canvas id="myCanvas" width="200" height="100"
style="border:1px solid #000000;">
</canvas>

2- "kanvas" adinda bir javascript değişkeni oluşturuyoruz: var kanvas  

id değerini kullanarak dökümanımızdaki <canvas> elemanına ulaşıyoruz: document.getElementById("kanvasim")

Oluşturduğumuz değişkene bu kanvası yüklüyoruz: 

var kanvas = document.getElementById("kanvasim");

3- Yine javascript kodları ile, <canvas> elemanımıza, iki boyutlu ("2d") çizim yapacak bir çizim aracı oluşturuyoruz: kanvas.getContext("2d")

Bu çizim aracını kalem adını verdiğimiz bir değişkene akatarıyoruz: var kalem = kanvas.getContext("2d");

4- Oluştuduğumuz kalem ile çizim yapıyoruz:

• kalem.fillStyle = "#FF0000"; kodu ile çizeceğimiz şeklin dolgusunu kırmızı ayarlıyoruz. Yani kalemimizi kırmızı kalem yapıyoruz. (fillStyle yapısı, bir CSS rengi, bir desen veya bir gradient (ışık efekti) olarak kullanılabilir. Biz burda kırmız dolgu rengini terçih ettik.) 
• kalem.fillRect(0,0,150,75); kodu ile de, <canvas> elemanımızın içine bir dikdörtgen (Rectangle) çiziyoruz. İlk iki koordinat bir noktanın, son iki koordinat, diğer bir notkanın koordinatlarıdır. Şöyle ki:

(0,0,150,75) sayıları, çizeceğimiz dikdörtgenin sol üst (0,0) ve sağ alt (150,75)  köşelerinin koordinatlarıdır. Bu ölçüler, oluşturduğumuz tuval (canvas)'in genişlik ve yüksekliği baz alınarak verilmiştir. Yani bu koordinatlar, tuvalimizin sol üst köşesi başlangıç noktası kabul edilerek verilmiştir. Dikdörtgenimizin sol üst köşesi (0,0) tuvalimizin sol üste köşesine sıfırlanmıştır. Dikdörtgenimizin sağ alt köşesi ise (150,75) tuvalimizin sol üst köşesinin 150 piksel sağında ve 75 piksel aşağısındadır. 

sonraki ders için tıklayınız