Atölye › Ay'a İniş › 2/31. adım
Listeyi tepelere çevirelim. Zemini tek bir dolu şekil olarak çizeceğiz: kalemi sol alt köşeye koy, sırayla bütün noktalardan geçerek çiz, sağ alt köşede bitir ve içini boya. Bir çocuk resmindeki dağ silueti gibi.
```js
function draw() {
ctx.fillStyle = '#020617'
ctx.fillRect(0, 0, canvas.width, canvas.height)
ctx.fillStyle = '#475569'
ctx.beginPath()
ctx.moveTo(0, canvas.height)
ground.forEach((y, i) => ctx.lineTo(i * STEP, y))
ctx.lineTo(canvas.width, canvas.height)
ctx.fill()
}
makeGround()
draw()
```ctx.beginPath() → yeni bir şekle başla.ctx.moveTo(0, canvas.height) → kalemi kaldırıp sol alt köşeye koy.ground.forEach((y, i) => ctx.lineTo(i * STEP, y)) → forEach listedeki her eleman için küçük fonksiyonu
çalıştırır; y elemanın kendisi, i sıra numarası. i. nokta x = i * STEP'te: her noktaya bir çizgi.ctx.lineTo(canvas.width, canvas.height) → son olarak sağ alt köşeye.ctx.fill() → şekli kapatıp içini gri boyar.draw() → resmi bir kez çizer.makeGround() satırının üstüne draw fonksiyonunu yaz; altında bir boş satır kalsın.makeGround() satırının altına draw() yaz.Beceriler: Canvas üzerine çizim
← Rastgele tepeler İniş pisti →