Html5 Canvas Yağmur Efekti Verme
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 Yağmur Efekti Verme

profil
cArleone
BEĞEN(1)
BEĞENME(0)
GÖRÜNTÜLENME(2921)
RAPOR ET
Bu dersimiz de html5 ile yağmur efekti vermeyi göreceğiz.Bunun için rainyday.js yi kullanacağız.Yağmur efektini seçtiğimiz bir resimin üzerine uyguluyoruz.Örneği incelerseniz daha iyi anlarsanız.

İncele : http://ustaderslik.com/ornek/html5-yagmur/

İndir : http://ustaderslik.com/dosya/html5-yagmur.rar

Öncelikle js yi ekleyip ardından sayfaya bir img tagı ekliyoruz.Daha sonra temel bir kalıbımız var,bu kalıp ile plugini uyguluyoruz.
script type="text/javascript">
function yagmur() {
var resim = document.getElementById("alan-1");
resim.onload = function() {
var efekt = new RainyDay({
image:this,
blur:20
});
efekt.rain([ [1, 5, 1] ], 10);
};
resim.crossOrigin="anonymous";
resim.src="resim.jpg";
}

yagmur();
</script>

Kodları açıklayacak olursak.Alanı seçip ardından resim adresini belirtiyoruz.efekt. rain([ [1, 5, 1] ], 10); kısmında ise ayar yapıyoruz.İlk alan yagmur damlasının minimum küçüklüğü.İkincisi maxsimum büyüklüğü.Yağmur damla miktarı.En sondaki ise milisaniye cinsinden süresidir.1000 yazarsak,her saniye 1 damla oluşur.Blur kısmından ise bulanıklığı değiştirebilirsiniz veya 0 vererek kaldırabiliriz.

Parametreler ile oynarak istediğiniz şekil de ayarlayabilirsiniz.

Genel örnek :
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>UstaDerslik</title>
<script type="text/javascript" src="rainyday.min.js"></script>
<style type="text/css">
*{margin:0;padding:0;}
body{height:100%;}
.alan{width:100%;height:100%;float:left;}
</style>
</head>
<body>

<img src="" class="alan" id="alan-1" />

<script type="text/javascript">
function yagmur() {
var resim = document.getElementById("alan-1");
resim.onload = function() {
var efekt = new RainyDay({
image:this,
blur:20
});
efekt.rain([ [1, 5, 1] ], 10);
};
resim.crossOrigin="anonymous";
resim.src="resim.jpg";
}

yagmur();
</script>

</body>
</html>

Görüntüsü :
http://ustaderslik.com/resim/ders/232df05t2we0.png




nmsoylu
nmsoylu 2 Yıl Önce Cevaplandı
Çok güzel bir library. Teşekkürler.



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