Çizim animasyonu

requestAnimationFrame ile bir canvas animasyon döngüsü kurmayı öğrenirsin.

Animasyon döngüsü

Canvas'ta animasyon, her karede çizimi silip yeniden çizmekle yapılır. requestAnimationFrame tarayıcıya bir sonraki karede bir fonksiyonu çağırmasını söyler.

Tipik bir döngü şöyle çalışır: draw fonksiyonu içinde önce clearRect ile ekran temizlenir, yeni konumda şekil çizilir, konum güncellenir ve requestAnimationFrame(draw) ile bir sonraki kare istenir. Böylece akıcı bir hareket oluşur.

clearRect ile temizleme

Animasyonda her karede ekranı temizlemezsen eski çizimler üst üste birikir; topun bir izi kalır. clearRect(0, 0, canvas.width, canvas.height) tüm tuvali temizler.

Silme işlemi her draw çağrısının başında yapılır. Sonra yeni konumda şekil çizilir ve döngü sürer. Bu temizle ve yeniden çiz deseni canvas animasyonunun temelidir.

Uygulama Hareket eden dikdörtgen

Hareket eden bir dikdörtgen animasyonu yaz. let x = 0 ile başlat. draw adlı bir fonksiyon tanımla: içinde ctx.clearRect(0, 0, canvas.width, canvas.height) ile ekranı temizle, ctx.fillRect(x, 10, 20, 20) ile dikdörtgeni çiz, x += 2 ile ilerlet, son olarak requestAnimationFrame(draw) ile bir sonraki kareyi iste.

Örnek çözümü göster

let x = 0;
function draw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.fillRect(x, 10, 20, 20);
  x += 2;
  requestAnimationFrame(draw);
}
draw();

Kendini test et

Animasyon döngüsünde her karede ne yapılmalıdır?
- Yalnızca yeni şekil ekle
- Ekranı temizle ve yeniden çiz
- Sadece requestAnimationFrame çağır
- Canvas boyutunu değiştir
Cevabı göster

Ekranı temizle ve yeniden çiz — Doğru! Her karede ekran temizlenip yeni konumda yeniden çizilir.

Döngüyü sürdür

function draw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.fillRect(x, 10, 20, 20);
  x += 2;
  ____(draw);
}

Cevabı göster

function draw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.fillRect(x, 10, 20, 20);
  x += 2;
  requestAnimationFrame(draw);
}

Animasyon döngüsünü eşleştir

requestAnimationFrame

sonraki kare
clearRect

ekranı temizle
draw

çizim fonksiyonu
x += 2

ilerlet

Sıradaki ders: Özet - Canvas

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler