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的类.在接下来的学习中,我将自己来建立一个类,用这个类来实验这些效果.


网站栏目:HTML5canvas动画基础自学分享2
转载注明:http://www.hxwzsj.com/article/pihhgj.html

其他资讯

Copyright © 2025 青羊区翔捷宏鑫字牌设计制作工作室(个体工商户) All Rights Reserved 蜀ICP备2025123194号-14
友情链接: LED网站设计方案 定制级高端网站建设 成都网站设计 成都网站设计 app网站建设 教育网站设计方案 网站建设方案 网站制作 外贸网站建设 成都网站建设流程 成都网站制作 网站建设公司 定制网站设计 网站设计制作 成都网站建设 手机网站制作 宜宾网站设计 阿坝网站设计 企业手机网站建设 外贸营销网站建设 成都网站建设 营销网站建设