HTML5 Canvas Ders-20 Animasyon yapımı
UstaDerslik Soru-Cevap Yararlı Araçlar
arama ikon
Diller
Türkçe Türkçe

bilgi UstaDerslik
Bu uyari kutusudur.
Tamam
Anasayfa
İletişim
Üyeler

HTML5 Canvas Ders-20 Animasyon yapımı

profil
cArleone
BEĞEN(1)
BEĞENME(0)
GÖRÜNTÜLENME(3474)
RAPOR ET
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ü :
http://ustaderslik.com/resim/ders/r7fh4y8444s.png

Yukarıdaki örnekte soldan sağa doğru sürekli hareket eden bir kutu var.Kutu sona geldiğinde tekrar başa sarıyor.



Kod
Kalın
Vurgu
Resim
Video
Url
CEVAPLA
Tüm Hakları Saklıdır. ©Arleone 2013-2014 UstaDerslik






Giriş
Şifremi Unuttum...
Şifre Talep
  Kuralları Kabul Ediyorum.
Kaydol