Çizim koordinatları
Canvas koordinat sistemini ve orijin noktasını öğrenirsin.
Koordinat sistemi
Canvas, bir piksel ızgarasıdır. Orijin denen (0, 0) noktası sol üst köşededir. x ekseni sağa, y ekseni aşağı doğru büyür.
Bu, matematikteki koordinat sisteminden farklıdır: orada y yukarı artar. Canvas'ta ise y aşağı artar; çünkü ekran koordinatları bu yönde çalışır. Bir nokta belirtirken önce x, sonra y yazılır: (100, 50).
Piksel ızgarası
Her çizim koordinatı piksel cinsindendir. canvas.width ve canvas.height özellikleri tuvalin toplam piksel boyutunu verir. Tüm koordinatlar bu sınırlar içinde kalır.
Sağ alt köşenin koordinatı yaklaşık olarak (canvas.width, canvas.height) değerindedir. Çizim yaparken bu sınırları aşmamaya dikkat et; aksi halde şekil ekranda görünmez ve kaybolur. Koordinatları hesaplarken tuval boyutunu hep göz önünde tut.
Uygulama Alt köşe koordinatı
Canvas'ın sağ alt köşesinin koordinatını yazdır. Genişlik için canvas.width, yükseklik için canvas.height kullan. console.log ile iki değeri aralarında virgül olacak şekilde yazdır.
Örnek çözümü göster
console.log(canvas.width, canvas.height);Kendini test et
-
Canvas koordinat sisteminde orijin (0, 0) nerededir?
- Sağ alt köşede
- Sol alt köşede
- Sol üst köşede
- Sağ üst köşede
Cevabı göster
Sol üst köşede — Doğru! Orijin sol üst köşededir; x sağa, y aşağı büyür.
-
Orijin koordinatı
ctx.moveTo(____);Cevabı göster
ctx.moveTo(0, 0); -
Koordinat sistemini eşleştir
- (0, 0)
- sol üst köşe
- x ekseni
- yatay sağa
- y ekseni
- dikey aşağı
- piksel
- ızgara birimi