Ç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

Sıradaki ders: Dikdörtgen çizme

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler