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在下落的时候，越来越大，反弹之后，在越来越小，和重力运动很像

转载于:https://www.cnblogs.com/zhaol/p/5713712.html