Atölye › XOX › 3/33. adım

İlk ızgara çizgisi

Ne yapıyoruz

Tahta 3×3 hücreden (kutudan) oluşur: 300 piksel ÷ 3 = her hücre 100 piksel. Bu sayıya bir ad veriyoruz: CELL.

Sonra ilk çizgiyi çiziyoruz. Çizgi çizmenin en kolay yolu ince bir dikdörtgen: 4 piksel eninde, tahta boyunda. Bu çizgi birinci ve ikinci sütunun arasında, yani x = 100'de duracak.

```js
const CELL = 100

ctx.fillStyle = '#585b70'
ctx.fillRect(CELL - 2, 0, 4, canvas.height)
```

Ne işe yarıyor

const CELL = 100 → hücre boyuna CELL adını verir. Sayılar tırnaksız yazılır. Artık CELL yazdığın her yerde bilgisayar 100 anlar; bir gün tahtayı büyütmek istersen tek satırı değiştirmen yeter.
ctx.fillStyle = '#585b70' → rengi griye çevirir.
CELL - 2 → - çıkarma demek: 100 − 2 = 98. Çizgi 4 piksel kalın; 2 piksel erken başlarsa tam x = 100'ün ortasına oturur (98'den 102'ye).
0 → yukarıdan başlar. 4, canvas.height → 4 piksel en, tahta boyunda (300) yükseklik.
Bu satırlar arka planın altına yazılır: canvas'ta sonra çizilen, öncekinin üstüne gelir.

Sıra sende

const ctx = ... satırının altına bir boş satır bırakıp const CELL = 100 yaz.
Dosyanın en sonuna, bir boş satırdan sonra iki gri satırı yaz.
Çalıştır: koyu tahtanın ortasına yakın, soldan üçte birlik yerde dikey gri bir çizgi görmelisin.

Beceriler: Canvas üzerine çizim

← Tahtayı boya Döngüyle tekrarla →

İlk ızgara çizgisi

Ne yapıyoruz

Ne işe yarıyor

Sıra sende

Tüm adımlar