Atölye › Wordle Tarzı Kelime Tahmini › 20/26. adım

Klavyeyi çiz

Ne yapıyoruz

Listedeki her dikdörtgeni çiziyoruz: gri bir tuş ve üstünde beyaz, büyük harfle yazısı.

```js
ctx.font = 'bold 14px sans-serif'
for (const k of keyRects()) {
  ctx.fillStyle = '#71717a'
  ctx.fillRect(k.x, k.y, k.w, k.h)
  ctx.fillStyle = 'white'
  ctx.fillText(k.label.toUpperCase(), k.x + k.w / 2, k.y + k.h / 2)
}
```

Ne işe yarıyor

for (const k of keyRects()) → for...of döngüsü: listedeki her tuş için bir kez; o anki tuşun adı k.
ctx.fillRect(k.x, k.y, k.w, k.h) → gri tuş.
ctx.fillText(k.label.toUpperCase(), k.x + k.w / 2, k.y + k.h / 2) → yazısı büyük harfle, tuşun tam ortasında.

Sıra sende

draw içinde ızgara döngülerinin altına, mesaj satırlarının (ctx.font = 'bold 16px sans-serif') üstüne, bir boş satır bırakıp klavye satırlarını yaz. Mesajla arada bir boş satır kalsın. Çalıştır: altta üç satırlık bir klavye görmelisin.

Beceriler: Canvas üzerine çizim

← Tuşlar nereye Tuşa dokun →

Tüm adımlar