Atölye › Yazı Yağmuru › 3/33. adım

Canvas'ta bir kelime

Ne yapıyoruz

Canvas'a yazı da tıpkı dikdörtgen gibi çizilir: önce kalemi ayarla (yazı tipi, hiza, renk), sonra yaz. İlk kelimemizi yazıyoruz: rocket.

Yazı tipi olarak monospace (eş aralıklı) seçiyoruz: her harf aynı genişlikte, eski daktilolardaki gibi. İleride bir kelimenin yarısını başka renkte çizerken bunun faydasını göreceğiz.

```js
const FONT = 'bold 20px monospace'

ctx.font = FONT
ctx.textAlign = 'left'
ctx.fillStyle = '#cbd5e1'
ctx.fillText('rocket', 40, 120)
```

Ne işe yarıyor

const FONT = 'bold 20px monospace' → yazı tipi: kalın (bold), 20 piksel boyunda, eş aralıklı (monospace).
ctx.font = FONT → kaleme bu yazı tipini ver.
ctx.textAlign = 'left' → yazının başı verdiğimiz x'e gelsin.
ctx.fillStyle = '#cbd5e1' → açık gri.
ctx.fillText('rocket', 40, 120) → yazıyı çizer. Tırnak içindeki yazı, sonra x ve y. Dikkat: y yazının üstü değil, harflerin oturduğu çizgidir (taban çizgisi, baseline); defter çizgisi gibi.

Sıra sende

const GROUND = ... satırının altına FONT satırını yaz.
Dosyanın en sonuna bir boş satır bırak ve dört yazı satırını yaz.
Çalıştır: sol üst tarafta rocket yazısını görmelisin.

Beceriler: Canvas üzerine çizim

← Zemin Çizen bir fonksiyon →

Canvas'ta bir kelime

Ne yapıyoruz

Ne işe yarıyor

Sıra sende

Tüm adımlar