HTML5 canvas derslerimize devam ediyoruz.Bu derste animasyon yapmayı anlatacağım.Bunun için kullanacağımız komutlardan biri
clearRect() .ClearRect belirlediğimiz konumda belirlediğimiz bir alandaki tüm objeleri siler.Genelde tüm canvası silmek için kullanılır.
cizim.clearRect(0,0,canvas.width,canvas.height);
Temel kullanımı bu şekilde 0,0 dan canvas büyüklüğünde alanı temizler.
İndir : http://ustaderslik.com/dosya/HTML5%20Canvas%20Ders-20%20Animasyon%20yapımı.zip
İncele : http://ustaderslik.com/ornek/canvas_animasyon
Canvasta animasyon yapmak için sürekli çalışan bir fonksiyon olması gerek.Bu fonksiyonda en başta sürekli canvastaki her şeyi siliriz.Daha sonra objenin bilgilerini sakladığımız değişkenlerle tekrar çizdiririz.Bu bilgileri değiştirdiğimizde bir sonraki çizimde o yeni verilere göre çizilecektir.
Animasyonun hızını fonksiyonun çağrılma süresine göre değişir.Örneğin
1000/30 yaparsak saniyede 30 defa çağırılır fonksiyon.
1000/60 diyerek 60 defa çağırabiliriz.Bunu kendinize göre ayarlayabilirsiniz.
Genel örnek :
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>UstaDerslik</title>
<script type="text/javascript" src="jquery-1.9.1.js"></script>
<script type="text/javascript">
$(function(){
var canvas = document.getElementById('canvas'),
cizim= canvas.getContext('2d');//canvas bağlantısı
setInterval(function(){ animasyon(); },1000/60);//saniyede 60 defa animasyon functionunu çağırıyoruz.
var kx=0,ky=50;//çizdireceğimiz kutunun ilk x,y si
function animasyon(){
if(kx<900){//kutunun x si 900 den küçük ise
cizim.clearRect(0,0,canvas.width,canvas.height);//canvas boyutlarında canvastaki her şeyi siliyoruz.
cizim.beginPath();
cizim.rect(kx,ky,100,100);
cizim.fillStyle="#d12c69";
cizim.fill();//bir kutu çizdiriyoruz
kx+=5;//kutunun x konumunu 5 pixel artırıyoruz.
}else{
kx=-100;//900 den büyük isede -100 konumuna yolluyoruz.
}
}
})
</script>
<style type="text/css">
canvas{border-bottom:1px solid #ddd;border-top:1px solid #ddd}
</style>
</head>
<body>
<canvas id="canvas" width="900" height="200"></canvas>
</body>
</html>
Görüntüsü :
Yukarıdaki örnekte soldan sağa doğru sürekli hareket eden bir kutu var.Kutu sona geldiğinde tekrar başa sarıyor.
UstaDerslik
