HTML5canvas动画基础自学分享2

2.canvas模拟重力

公司专注于为企业提供网站设计制作、成都网站制作、微信公众号开发、商城开发，微信小程序定制开发，软件按需定制设计等一站式互联网企业服务。凭借多年丰富的经验，我们会仔细了解各客户的需求而做出多方面的分析、设计、整合，为客户设计出具风格及创意性的商业解决方案，创新互联建站更提供一系列网站制作和网站推广的服务。

上一章中,知道了怎么在canvas中画图,知道了球是怎么运动起来的.那么就来模拟一下球在重力下的运动.思路有2个.

1.设球的初始位置是: x0,y0.时间是t.那么用公式  S = x0 + v0 * t +0.5 * a * t *t;

就是路程 = 初速度*时间 + 1/2*加速度*时间的平方.

我们可以得到客户端的时间,没一帧都用初始点来计算.

2.我们可以算出每一帧的速度,然后进行移动.

来看看下面的代码:

>
your browser is not support canvas.

这个是用时间来改变的.其实我们可以用向量.自己定义一个向量类,用向量就能实验了.这个时候,小球就能进行自由下落了.我们可以给他的初速度用拖动来控制.例如这样:

your browser is not support canvas.

这样就小球就能用鼠标进行初始度的开始了.可是现在我们没有实现什么类啊,没有用到JS的类.在接下来的学习中,我将自己来建立一个类,用这个类来实验这些效果.