Atölye › OutRun Tarzı Yarış › 4/44. adım
Yol ekranda yamuklardan oluşacak: yakın kenarı geniş ve aşağıda, uzak kenarı dar ve yukarıda. quad (dörtgen)
fonksiyonu böyle bir yamuğu boyayacak.
Denemek için kameranın 1000 ile 3000 birim önündeki bir yol parçasını çizeceğiz. project ilk kez işe yarıyor: iki
kenarın ekrandaki yerini o hesaplıyor.
```js
function quad(color, x1, y1, w1, x2, y2, w2) {
ctx.fillStyle = color
ctx.beginPath()
ctx.moveTo(x1 - w1, y1)
ctx.lineTo(x2 - w2, y2)
ctx.lineTo(x2 + w2, y2)
ctx.lineTo(x1 + w1, y1)
ctx.fill()
}
const near = project(0, -CAMERA_HEIGHT, 1000)
const far = project(0, -CAMERA_HEIGHT, 3000)
quad('#6b7280', near.x, near.y, near.w, far.x, far.y, far.w)
```quad(color, x1, y1, w1, x2, y2, w2) → yakın kenarın ortası (x1, y1) ve yarı genişliği w1; uzak kenarın ortası
(x2, y2) ve yarı genişliği w2.ctx.beginPath() → yeni bir şekle başla.ctx.moveTo(x1 - w1, y1) → kalemi kaldırıp ilk köşeye (yakın kenarın soluna) koy.ctx.lineTo(...) → oradan bir sonraki köşeye çizgi çek. Sırayla: uzak sol, uzak sağ, yakın sağ.ctx.fill() → dört köşenin çevirdiği şeklin içini fillStyle rengiyle boya.near ve far → yolun ortasındaki iki noktanın (1000 ve 3000 birim ileride) ekrandaki yeri. near.x, near.y,
near.w o nesnenin içindeki değerler.quad fonksiyonunu function draw() { satırının üstüne yaz; arada bir boş satır kalsın.draw içinde, zemini boyayan ctx.fillRect(0, H / 2, W, H / 2) satırının altına bir boş satır bırak ve üç deneme
satırını yaz.Beceriler: Canvas üzerine çizim
← Perspektif Parçalardan bir yol →