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

Çizgi çiz

Ne yapıyoruz

Darağacı da çöp adam da düz çizgilerden oluşuyor. Canvas'ta çizgi çizmek dört satır sürüyor; her çizgi için bunları tekrar yazmamak için küçük bir yardımcı fonksiyon yazacağız: line (çizgi).

Sonra onu ilk kez kullanıp darağacının tabanını çizeceğiz: kahverengi, kalın, yatay bir çizgi.

```js
function line(x1, y1, x2, y2) {
  ctx.beginPath()
  ctx.moveTo(x1, y1)
  ctx.lineTo(x2, y2)
  ctx.stroke()
}

function draw() {
  ctx.fillStyle = '#fefce8'
  ctx.fillRect(0, 0, canvas.width, canvas.height)

  // The gallows
  ctx.strokeStyle = '#78350f'
  ctx.lineWidth = 6
  line(40, 270, 220, 270)
```

Ne işe yarıyor

Canvas'ta çizgi bir yoldur (path):
- ctx.beginPath() → yeni bir yol başlat (öncekiyle karışmasın).
- ctx.moveTo(x1, y1) → kalemi kaldırıp başlangıç noktasına götür.
- ctx.lineTo(x2, y2) → oradan bitiş noktasına kadar çiz.
- ctx.stroke() → çizgiyi boya. Bu satır olmadan hiçbir şey görünmez.
function line(x1, y1, x2, y2) → dört parametre: başlangıç (x1, y1) ve bitiş (x2, y2).
ctx.strokeStyle = '#78350f' → çizgi rengi (dolgu için fillStyle, çizgi için strokeStyle). Koyu kahverengi.
ctx.lineWidth = 6 → çizgi kalınlığı: 6 piksel.
line(40, 270, 220, 270) → (40, 270)'ten (220, 270)'e: y ikisinde de 270, yani yatay bir taban.

Sıra sende

function draw() { satırının üstüne line fonksiyonunu yaz; arada bir boş satır kalsın.
draw içinde ctx.fillRect(...) satırının altına bir boş satır bırakıp yorum satırıyla birlikte dört satırı yaz.
Çalıştır: kelimenin üstünde kahverengi, yatay bir çizgi görmelisin.

Beceriler: Canvas üzerine çizim, Fonksiyonlar

← Yanlış harfleri listele Darağacı →

Çizgi çiz

Ne yapıyoruz

Ne işe yarıyor

Sıra sende

Tüm adımlar