canvas -小球自由落体运动
最近学习canvas,就使用canvas写一个小球,再有重力作用下的落体运动
html:
<canvas id="canvas" width="600" height="600" >
Sorry!
</canvas>
重点在js:
canvas其实就是在画一直重画,时间间隔很短,一点点的改变小球的位置,看起来就像小球在做运动,
var ctx;
var canvas;
var startx=15;
var starty=15;
canvas = document.getElementById("canvas");
ctx = canvas.getContext("2d");
ctx.translate(50,50);
function a(){
vx=2;vy=0;g=0.2
setInterval(function(){
ctx.clearRect(0,0,600,600)
ctx.beginPath();
ctx.arc(startx, starty, 15, 0, Math.PI * 2, true);//画小球
vy+=g
startx=startx+vx;
starty=starty+vy;
if(starty+30>=600){
starty=570;
vy=vy*(-0.6)
}
ctx.closePath();
ctx.fill();
},10)
}
a();
一直改变小球的圆心,主要就是starty,VY在下落的时候,越来越大,反弹之后,在越来越小,和重力运动很像