11-10-2014 Saat: 13:20
Canvas iki boyutlu bir ızgaradır (grid).
Canvas'ın sol üst koordinatları(0,0)'dır.
Ve yukarıdaki fillRect() metodu(0,0,150,75) parametlerine sahipse
Bunun anlamı: "Sol-üst köşeden başla ve 150x75 piksel boyutlarında bir dikdörtgen çiz" demektir.
Koordinat Örneği
Farenizi aşağıdaki dikdörtgenin üzerinde gezdirin ve (x,y) koordinatlarını görün. (x = yatay, y = dikey):
X
Y
Canvas - Yollar (Paths)
Bir Canvas'ın üzerine düz çizgiler çizmek için, aşağıdaki metodları kullanacağız:
moveTo(x,y) Satırın başlama noktasını belirtir
lineTo(x,y) Satırın bitiş noktasını belirtir
Gerçekten çizgi çizmek için, "ink" metodlarından birini, örneğin stroke() komutunu kullanmak zorundayız.
Canvas'ın sol üst koordinatları(0,0)'dır.
Ve yukarıdaki fillRect() metodu(0,0,150,75) parametlerine sahipse
Bunun anlamı: "Sol-üst köşeden başla ve 150x75 piksel boyutlarında bir dikdörtgen çiz" demektir.
Koordinat Örneği
Farenizi aşağıdaki dikdörtgenin üzerinde gezdirin ve (x,y) koordinatlarını görün. (x = yatay, y = dikey):
X
Y
Canvas - Yollar (Paths)
Bir Canvas'ın üzerine düz çizgiler çizmek için, aşağıdaki metodları kullanacağız:
moveTo(x,y) Satırın başlama noktasını belirtir
lineTo(x,y) Satırın bitiş noktasını belirtir
Gerçekten çizgi çizmek için, "ink" metodlarından birini, örneğin stroke() komutunu kullanmak zorundayız.
PHP Kod:
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();