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

Çizen bir fonksiyon

Ne yapıyoruz

Kelimeler düşecek, yani resim saniyede birçok kez yeniden çizilecek. Bütün çizim satırlarını her seferinde tekrar yazamayız. Onları bir fonksiyonun içine koyup ona draw (çiz) adını veriyoruz.

Fonksiyon bir yemek tarifi gibidir: tarifi bir kez yazarsın, istediğin kadar pişirirsin. Ekran yine aynı görünecek.

```js
function draw() {
  ctx.fillStyle = '#020617'
  ctx.fillRect(0, 0, canvas.width, canvas.height)
  ctx.fillStyle = '#7f1d1d'
  ctx.fillRect(0, GROUND + 4, canvas.width, 3)

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

draw()
```

Ne işe yarıyor

function draw() { → fonksiyon tanımlar: "draw deyince şunları yap". Bu satır tek başına bir şey çizmez, sadece tarifi yazar.
{ ile } arasındaki satırlar fonksiyonun gövdesi; okunaklı olsun diye iki boşluk içeriden yazılır.
Gövde önce gökyüzünü boyar: bu, eski resmi siler.
draw() → fonksiyonu çağırır: tarifi şimdi uygula. Sondaki () "çalıştır" demektir.

Sıra sende

İlk çizim satırının (ctx.fillStyle = '#020617') üstüne function draw() { yaz.
Altındaki bütün çizim satırlarını iki boşluk içeri al (aradaki boş satır kalsın).
En sona kapanan } yaz; bir boş satırdan sonra draw() yaz.
Çalıştır: ekran aynı görünmeli.

Beceriler: Fonksiyonlar

← Canvas'ta bir kelime Kelime listesi →

Çizen bir fonksiyon

Ne yapıyoruz

Ne işe yarıyor

Sıra sende

Tüm adımlar