Atölye › Dört Bağla › 4/38. adım
Tahtadaki delikler de diskler de daire; sadece renkleri farklı. Boş delik koyu, kırmızı disk kırmızı, sarı disk
sarı. O yüzden tek bir küçük fonksiyon, disc(x, y, color) (disk), hepsini çizecek.
Bu sefer fonksiyonun parantez içinde bilgi alıyor: nereye (x, y) ve hangi renkle (color). Denemek için sol üst
köşedeki deliği çizeceğiz.
```js
function disc(x, y, color) {
ctx.fillStyle = color
ctx.beginPath()
ctx.arc(x, y, CELL / 2 - 6, 0, Math.PI * 2)
ctx.fill()
}
disc(CELL / 2, TOP + CELL / 2, '#0f172a')
```function disc(x, y, color) → parantez içindeki x, y, color parametre: fonksiyonu çağırırken verilen
bilgilerin adları. disc(32, 128, 'red') dersen içeride x 32, y 128, color 'red' olur.ctx.beginPath() → yeni bir şekle başla.ctx.arc(x, y, CELL / 2 - 6, 0, Math.PI * 2) → merkezi (x, y) olan bir daire. Üçüncü sayı yarıçap:
64 / 2 - 6 = 26 (delikler arasında boşluk kalsın diye hücrenin yarısından biraz küçük). Son iki sayı başlangıç ve
bitiş açısı: 0'dan Math.PI * 2'ye, yani tam bir tur (360 derece). Math.PI π sayısı (3.14...).ctx.fill() → şekli boya.CELL / 2 = 32 (ilk sütunun ortası), TOP + CELL / 2 = 128 (ilk satırın ortası).function draw() { satırının üstüne disc fonksiyonunu yaz; altında bir boş satır kalsın.draw içinde mavi dikdörtgenin altına disc(...) satırını yaz.Beceriler: Canvas üzerine çizim, Fonksiyonlar
← Mavi tahta Bütün bir satır →