Atölye › Ay'a İniş › 6/31. adım
Araç ileride eğilecek. Eğik bir üçgenin her köşesini trigonometriyle hesaplamak zor olurdu. Canvas bunu bizim
yerimize yapabilir: kâğıdı aracın yerine kaydırır ve aracın açısı kadar çevirir; biz de aracı sanki hiç eğik
değilmiş gibi, (0, 0) etrafında düz çizeriz.
2D oyunlarda dönen hemen her şey böyle çizilir.
```js
function drawLander() {
ctx.save()
ctx.translate(lander.x, lander.y)
ctx.rotate(lander.angle)
ctx.fillStyle = '#e2e8f0'
ctx.beginPath()
ctx.moveTo(0, -12)
ctx.lineTo(9, 8)
ctx.lineTo(-9, 8)
ctx.fill()
ctx.restore()
}
drawLander()
```ctx.save() → şu anki çizim ayarını (konum, açı, renk) hatırla.ctx.translate(lander.x, lander.y) → kâğıdı kaydır: (0, 0) artık aracın ortası.ctx.rotate(lander.angle) → kâğıdı aracın açısı kadar çevir: "yukarı" artık aracın yukarısı. Açı şimdilik 0;
hiç dönmüyor.(0, -12) (ortanın 12 piksel yukarısı), alt köşeleri (9, 8) ve (-9, 8). moveTo/lineTo/fill
zemini çizerken kullandığımız komutlar.ctx.restore() → hatırlanan ayara dön. Bu olmasa sonra çizilen her şey de kaymış ve dönmüş olurdu.drawLander() → draw içinde pistten sonra çağrılır: araç zeminin üstünde görünür.function draw() { satırının üstüne drawLander fonksiyonunu yaz; aralarında bir boş satır kalsın.draw içinde pisti çizen ctx.fillRect(pad.x1, ...) satırının altına bir boş satır bırak ve drawLander() yaz.Beceriler: Canvas üzerine çizim