18 Temmuz 2016 Pazartesi
HTML5 CANVAS ATEŞ EFEKTİ YAPMA
<!DOCTYPE html>
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
canvas{
position:absolute;
top:0;
left:0;
margin:0;
padding:0;
border:2px solid #d3d3d3;
/* background-color: #000;*/
}
</style>
<script>
window.onload = function () {
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
h=window.innerHeight;/*windowsun yükseklik değerini alır*/
w=window.innerWidth;/*windowsun genişlik değerini alır*/
canvas.height=h;
canvas.width=w;
//ctx.fillRect(0,0,w,h);
fires=[];
for (var a=0;a<100;a++){
fires.push({"x":w/2-100*Math.random(),"y":h/2,"r":30*Math.random(),"vy":5*Math.random(),"life":100*Math.random()})
}
function eylem(){
ctx.fillStyle="black";//çizilen karenin rengini siyah yaptık
ctx.clearRect(0,0,w,h);
ctx.fillRect(0,0,w,h);/*ekranı tamemen siyahla kapladık windowsun genişliği ve yüksekliği kadar.*/
ctx.globalCompositeOperation="lighter";/*renkleri saydamlaştırıyor üst üste bindiriyor.*/
for(var b=0;b<100;b++){
var renk=ctx.createRadialGradient(fires[b].x,fires[b].y,2,fires[b].x,fires[b].y,fires[b].r)//x1,y1,r1,x2,y2,r2
renk.addColorStop(0,"white");
renk.addColorStop(0.4,"yellow");
renk.addColorStop(0.6,"orange");
renk.addColorStop(1,"red");
ctx.fillStyle=renk;/*topların rengini gradient renklerinden yaptık*/
ctx.beginPath();
ctx.arc(fires[b].x,fires[b].y,fires[b].r,0*Math.PI,2*Math.PI);
ctx.fill();
fires[b].y-=fires[b].vy;
fires[b].r-=0.4;
fires[b].life-=1;
if(fires[b].life<0 || fires[b].r<0 || fires[b].y<100){
fires[b].x=w/2-100*Math.random();
fires[b].y=h/2;
fires[b].r=30*Math.random();
fires[b].life=100*Math.PI;
}
}
}
setInterval(eylem,30);
}
</script>
</head>
<body>
<canvas id="canvas" >
Your browser does not support the HTML5 canvas tag.</canvas>
</body>
</html>
Kaydol:
Kayıt Yorumları (Atom)
Hiç yorum yok:
Yorum Gönder