18 Temmuz 2016 Pazartesi
HTML5 CANVAS ZIPLAYAN TOP UYGULAMASI
<!DOCTYPE html>
<html>
<head>
<style>
canvas{
border:1px solid #d3d3d3;
/* background-color: #000;*/
}
</style>
<script>
window.onload = function () {
var c = document.getElementById("mycanvas");
var ctx = c.getContext("2d");
resim=document.getElementById("resim");
pozx=20;
pozy=100;
vx=10;
vy=-10;
gravitiy=2;
function eylem(){
if(pozy>350){
vx*=0.75;
vy*=-0.65;
// ctx.scale(1.11,1); //top yere değerken basık görünmesi için
}
ctx.clearRect(0,0,600,400);/*ctx.clearRect(0,0,canvas.width,canvas.height)*/
ctx.drawImage(resim,0,0,resim.width,resim.height,pozx,pozy,50,50);
vy+=gravitiy;
pozx+=vx;
pozy+=vy;
}
setInterval(eylem,100);
}
</script>
</head>
<body>
<img id="resim" style="display:none" src="top.png"/>
<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