Atölye › Bilardo › 4/33. adım

Topları çiz

Ne yapıyoruz

balls'taki her topu kendi renginde, kendi yerinde, R yarıçaplı dolu bir daire olarak çizeceğiz. Daire çizmek dikdörtgenden biraz farklı: önce bir yol (path) çizilir, sonra içi doldurulur.

```js
for (const b of balls) {
  ctx.fillStyle = b.color
  ctx.beginPath()
  ctx.arc(b.x, b.y, R, 0, Math.PI * 2)
  ctx.fill()
}
```

Ne işe yarıyor

for (const b of balls) → her top için; o anki topun adı b.
ctx.fillStyle = b.color → topun rengi.
ctx.beginPath() → yeni bir şekil başlat.
ctx.arc(b.x, b.y, R, 0, Math.PI * 2) → merkezi (b.x, b.y), yarıçapı R olan bir yay. Son iki sayı başlangıç ve bitiş açısı (radyan): 0'dan Math.PI * 2'ye, yani tam bir tur: daire.
ctx.fill() → şeklin içini boya.

Sıra sende

draw içinde çuhayı çizen fillRect satırının altına bir boş satır bırak ve döngüyü yaz. Çalıştır: masanın solunda beyaz bir top görmelisin.

Beceriler: Canvas üzerine çizim

← İsteka topu Üçgen →

Tüm adımlar