HTML Kanvas Koordinatları
Tuval Koordinatları
HTML tuvali iki boyutlu bir ızgaradır.
Tuvalin sol üst köşesinde (0,0) koordinatları bulunur.
Önceki bölümde, şu yöntemin kullanıldığını gördünüz: fillRect(0,0,150,75).
Bunun anlamı: Sol üst köşeden (0,0) başlayın ve 150x75 piksellik bir dikdörtgen çizin.
Koordinatlar Örneği
X ve y koordinatlarını görmek için fareyi aşağıdaki dikdörtgenin üzerine getirin:
Bir çizgi çiz
Bir tuval üzerine düz bir çizgi çizmek için aşağıdaki yöntemleri kullanın:
- moveTo( x,y ) - çizginin başlangıç noktasını tanımlar
- lineTo( x,y ) - satırın bitiş noktasını tanımlar
Çizgiyi gerçekten çizmek için, vuruş() gibi "mürekkep" yöntemlerinden birini kullanmalısınız.
Örnek
(0,0) konumunda bir başlangıç noktası ve (200,100) konumunda bir bitiş noktası tanımlayın. Ardından, çizgiyi gerçekten çizmek için vuruş() yöntemini kullanın:
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.moveTo(0, 0);
ctx.lineTo(200, 100);
ctx.stroke();
Bir Daire çizin
Bir tuval üzerine daire çizmek için aşağıdaki yöntemleri kullanın:
- startPath() - bir yol başlatır
- arc(x,y,r,startangle,endangle) - bir yay/eğri oluşturur. arc() ile bir daire oluşturmak için: Başlangıç açısını 0'a ve bitiş açısını 2*Math.PI'ye ayarlayın. x ve y parametreleri dairenin merkezinin x ve y koordinatlarını tanımlar. r parametresi dairenin yarıçapını tanımlar.
Örnek
arc() yöntemiyle bir daire tanımlayın. Ardından, daireyi gerçekten çizmek için vuruş() yöntemini kullanın:
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.arc(95, 50, 40, 0, 2 * Math.PI);
ctx.stroke();