JavaScript
Özet - Canvas
fillRect ve requestAnimationFrame kullanarak zıplayan bir top animasyonu yazarsın.
Özet - Canvas
Bu grupta canvas'ın temellerini öğrendin. getElementById ile öğeyi seçer, getContext('2d') ile çizim bağlamını alırsın.
fillRect dolu dikdörtgen, strokeRect kenarlık, clearRect silme işini yapar. beginPath, moveTo, lineTo ve closePath ile yol çizer, stroke veya fill ile görünür yaparsın. requestAnimationFrame ise akıcı animasyon döngüsünü kurar.
Uygulama Ziplayan top animasyonu
Ziplayan bir top animasyonu yaz. let y = 10 ve let dy = 3 ile başlat. draw fonksiyonunda ekranı ctx.clearRect(0, 0, canvas.width, canvas.height) ile temizle, topu ctx.fillRect(20, y, 20, 20) ile çiz. Top alt kenara değince (y + 20 >= canvas.height) ya da üst kenara değince (y <= 0) dy = -dy ile yön değiştir. Sonra y += dy ile ilerlet ve requestAnimationFrame(draw) ile döngüyü sürdür.
Örnek çözümü göster
let y = 10;
let dy = 3;
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillRect(20, y, 20, 20);
if (y + 20 >= canvas.height || y <= 0) {
dy = -dy;
}
y += dy;
requestAnimationFrame(draw);
}
draw();
Canvas kullanım alanları
Canvas; oyunlar, grafikler, veri görselleştirme ve etkileşimli çizimler için kullanılır. Örneğin bir top zıplatma oyunu, basit bir çizgi grafiği ya da fareyle çizilen bir uygulama mümkündür.
Öğrendiğin temeller şunlar: koordinat sistemi, dikdörtgen ve yol çizimi, animasyon döngüsü. Sonraki adımda bunları birleştirip yeşil dolgulu bir üçgen çizeceksin.
Uygulama Yeşil dolgulu üçgen
Bir üçgen çiz ve içini doldur. ctx.beginPath() ile yolu başlat. ctx.moveTo(50, 10), ctx.lineTo(90, 80) ve ctx.lineTo(10, 80) ile üç köşeyi belirt. ctx.closePath() ile yolu kapat. ctx.fillStyle = 'green' ile dolgu rengini yeşil yap ve ctx.fill() ile içini doldur.
Örnek çözümü göster
ctx.beginPath();
ctx.moveTo(50, 10);
ctx.lineTo(90, 80);
ctx.lineTo(10, 80);
ctx.closePath();
ctx.fillStyle = 'green';
ctx.fill();
Kendini test et
-
Canvas'ta bir bölgeyi silip şeffaf yapan yöntem hangisidir?
- fillRect
- strokeRect
- clearRect
- beginPath
Cevabı göster
clearRect — Doğru! clearRect dikdörtgen bir bölgeyi siler ve şeffaf yapar.
-
Özet eşleştir
- getContext
- bağlam al
- fillRect
- dikdörtgen doldur
- beginPath
- yol başlat
- requestAnimationFrame
- animasyon döngüsü
Sıradaki ders: Proje: Canvas mini oyun
