Ç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