Canvas (Tuval) Koordinatları
Öncelikle, oluşturduğumuz html tuval (canvas) elemanını, iki boyutlu bir ızgara gibi düşünmeliyiz. (Birbirine paralel, yatay ve dikey çizgiler çizilmiş bir kağıt gibi hayal edebiliriz. Hatta paralel iki çizgi arasındaki mesafeyi de 1 piksel olarak düşünmek iyi olacaktır. İşte bu paralel çizgilerin kesişim noktalarını koordinat olarak kullanacağız.)
Tuvalin sol üst köşesini başlangıç noktası olarak kabul edeceğiz. Bu köşenin, sağa ve aşağıya giderken başlangıç yani sıfıra sıfır (0,0) noktası olacağını düşünmeliyiz.
Tuvalde; bir noktanın koordinatını, iki değer ile vereceğiz: (x,y). Bunların ilki (x), başlangıç noktasına göre kaç pixel sağda ikincisi ise (y) kaç pixel aşağıda olduğunu belirtmektedir. Mesela (20,145) noktası, başlangıç noktasından 20 pixel sağda, 145 pixel aşağıdadır.
Bir Çizgi Çizmek
Düz bir çizgi çizmek için aşağıdaki iki metodu kullanırız:
style="border:1px solid #000000;">
</canvas>
Oluşturduğumuz tuval (<canvas>) elamanı; genişliği 200 pixel, yüksekliği 100 pixel olan şöyle bir dikdörtgendir:
Bir çizgi çizmek istersek, kullanmamız gereken başka bir metot da "ink" metodu olarak bilinen metotlardan birisi olan stroke() metotudur.
Yukarıdaki tuvale bir köşegen çizmek istiyoruz. Önce bir başlangıç notkası tanımlamalıyız (0,0), sonra bir bitiş noktası tanımlamalıyız (200,100) ve en son stroke() metodu ile de çizgiyi çizmeliyiz:
<script>
var kanvasim = document.getElementById("myCanvas");
var cizim = kanvasim.getContext("2d");
cizim.moveTo(0,0);
cizim.lineTo(200,100);
cizim.stroke();
</script>
Tarayıcımız bu kodları şöyle gösterecektir:
var kanvasim = document.getElementById("myCanvas");
var cizim = kanvasim.getContext("2d");
cizim.beginPath();
cizim.arc(95,50,40,0,2*Math.PI);
cizim.stroke();
- moveTo(x,y) : Çizginin başlangıç noktasıdır.
- lineTo(x,y) : Çizginin bitiş noktasıdır.
style="border:1px solid #000000;">
</canvas>
Oluşturduğumuz tuval (<canvas>) elamanı; genişliği 200 pixel, yüksekliği 100 pixel olan şöyle bir dikdörtgendir:
Şimdi bu tuvalin sol üst köşesi bizimim için (0,0) yani başlangıç noktası olacaktır.
Bir çizgi çizmek istersek, kullanmamız gereken başka bir metot da "ink" metodu olarak bilinen metotlardan birisi olan stroke() metotudur.
Yukarıdaki tuvale bir köşegen çizmek istiyoruz. Önce bir başlangıç notkası tanımlamalıyız (0,0), sonra bir bitiş noktası tanımlamalıyız (200,100) ve en son stroke() metodu ile de çizgiyi çizmeliyiz:
<script>
var kanvasim = document.getElementById("myCanvas");
var cizim = kanvasim.getContext("2d");
cizim.moveTo(0,0);
cizim.lineTo(200,100);
cizim.stroke();
</script>
Tarayıcımız bu kodları şöyle gösterecektir:
Bir Daire Çizmek
Bir tuvale, bir daire çizmek için beginPath() ve arc(x,y,r,start,stop) metotları kullanılır ve yine stroke() metodu ile çizilir. Aşağıdaki kodlar, yukarıda belirttiğimiz <canvas> elemanına tam bir daire çizecektir:var kanvasim = document.getElementById("myCanvas");
var cizim = kanvasim.getContext("2d");
cizim.beginPath();
cizim.arc(95,50,40,0,2*Math.PI);
cizim.stroke();
Tarayıcımız bu kodları şöyle gösterecektirrr:
arc(x,y,r,start,stop) metodundaki x ve y; dairenin merkezinin koordinatlarıdır ve r ise dairenin yarıçap uzunluğudur. start ve stop değerleri ise dairenin ne kadarının çizileceğini belirler.
