Atölye › Adam Asmaca › 32/36. adım

Tuşları çiz

Ne yapıyoruz

Şimdi tuşları çiziyoruz. 26 harfin her biri için: keyRect ile yerini bul, açık gri bir kutu çiz, harfini ortasına yaz. 26 kez aynı iş, yani bir döngü.

```js
function draw() {
  // ...

  for (let i = 0; i < LETTERS.length; i++) {
    const letter = LETTERS[i]
    const k = keyRect(i)
    ctx.fillStyle = '#e7e5e4'
    ctx.fillRect(k.x, k.y, KEY_W, KEY_H)
    ctx.fillStyle = '#1f2937'
    ctx.font = 'bold 18px sans-serif'
    ctx.fillText(letter, k.x + KEY_W / 2, k.y + 24)
  }
}
```

Ne işe yarıyor

for (let i = 0; i < LETTERS.length; i++) → i 0'dan 25'e kadar. LETTERS.length 26.
const letter = LETTERS[i] → yazılarda da köşeli parantez çalışır: LETTERS[0] 'A'.
const k = keyRect(i) → tuşun sol üst köşesi: k.x, k.y.
ctx.fillRect(k.x, k.y, KEY_W, KEY_H) → açık gri kutu.
ctx.fillText(letter, k.x + KEY_W / 2, k.y + 24) → harf, tuşun yatay ortasına (k.x + 24) ve üstten 24 piksel aşağı. textAlign yukarıda 'center' yapıldığı için harf tam ortalanır.

Sıra sende

draw fonksiyonunun en sonuna, bitiş mesajı bloğunun }'sinin altına ve draw'u kapatan }'nin üstüne, bir boş satır bırakıp döngüyü yaz. Çalıştır: kelimenin altında A'dan Z'ye üç satırlık bir klavye görmelisin.

Beceriler: Canvas üzerine çizim, Döngüler

← Her tuş nereye Son satırı ortala →

Tüm adımlar