Atölye › Tuğla Kırma › 7/39. adım
Canvas'ta hazır bir "daire boya" komutu yok. Önce şekli tarif ederiz (merkez, yarıçap, tam bir tur), sonra
boyarız. Ayrıca oyun başlarken resetBall()'u bir kez çağıracağız ki top gerçekten var olsun.
Bu adımdan sonra ortada beyaz, yuvarlak bir top göreceksin; henüz kıpırdamıyor.
```js
ctx.fillStyle = '#f8fafc'
ctx.beginPath()
ctx.arc(ball.x, ball.y, BALL_R, 0, Math.PI * 2)
ctx.fill()
resetBall()
```ctx.fillStyle = '#f8fafc' → neredeyse beyaz bir renk.ctx.beginPath() → "yeni bir şekle başlıyorum". Bunu unutursan önceki şekiller de yeniden boyanabilir.ctx.arc(ball.x, ball.y, BALL_R, 0, Math.PI * 2) → merkezi (ball.x, ball.y), yarıçapı BALL_R olan bir
yay çizer. Son iki sayı başlangıç ve bitiş açısı. Açılar radyan ile verilir: 0'dan Math.PI * 2'ye
(2π ≈ 6.28) kadar tam bir tur, yani bir daire.ctx.fill() → tarif edilen şekli boyar.resetBall() → topu ilk kez yerleştirir. Döngü başlamadan önce olmalı; yoksa ilk çizimde ball boş olur ve
ball.x hata verir.draw içinde raketi çizen ctx.fillRect(paddle.x, ...) satırının altına bir boş satır bırak ve topu çizen dört
satırı yaz.requestAnimationFrame(loop) satırının hemen üstüne resetBall() yaz.Beceriler: Canvas üzerine çizim
← Hızı olan bir top Topu yürüt →