18 Temmuz 2016 Pazartesi
HTML5 CANVAS KAR YAĞIŞI EFEKTİ YAPTIK GÜZEL UYGULAMA
<!DOCTYPE html>
<html>
<head>
<style>
canvas{
border:1px solid #d3d3d3;
/* background-color: #000;*/
}
</style>
<script>
window.onload = function () {
karlar=[];
for(var a=0;a<1000;a++){
karlar.push({"x":600*Math.random(),"y":400*Math.random(),"vy":1,"r":Math.random()});
//"ad":ramazan, "soyad":aras obje mantıgında yaptık
}
var benimtuval = document.getElementById("mycanvas");
var ctx = benimtuval.getContext("2d");
pen=new Image();
pen.src="pen.png";
resim=new Image();
resim.src="kartanesi.jpg";
function eylem(){
ctx.clearRect(0,0,600,400);
ctx.drawImage(pen,0,0,pen.width,pen.height,0,0,benimtuval.width,benimtuval.height);
ctx.fillStyle="#eee";
ctx.globalAlpha=0.8;
for(var b=0;b<karlar.length;b++){
ctx.beginPath();
ctx.arc(karlar[b].x,karlar[b].y,karlar[b].r,0*Math.PI,2*Math.PI);
ctx.fill();
karlar[b].y+=karlar[b].vy;
karlar[b].x+=0.3-Math.random();
if(karlar[b].y>600){
karlar[b].x=600*Math.random();/*0 ile 600 arasında değer üretir*/
karlar[b].y=-400*Math.random();
karlar[b].r=Math.random();/*0 ile 1 arasında değerler üretir*/
karlar[b].vy=10*Math.random();
}
ctx.globalAlpha=0.5;/*saydamlık veriyoruz yazıya*/
ctx.font="bold 30pt arial";
ctx.fillText("NEW YEARS",150,150);
ctx.globalAlpha=1;
}
}
setInterval(eylem,20);
}
</script>
</head>
<body>
<img src="pen.png" style="display:none" />
<img src="kartanesi.jpg" id="resim" style="display:none" />
<canvas id="mycanvas" width="600" height="400" >
Your browser does not support the HTML5 canvas tag.</canvas>
</body>
</html>
Kaydol:
Kayıt Yorumları (Atom)
Hiç yorum yok:
Yorum Gönder