使用js画小球沿直线运动

一:画直线

js: https://github.com/wangxia34/trajectory/blob/master/trajectory/html_js/drawBeeline/demo1.js

html: https://github.com/wangxia34/trajectory/blob/master/trajectory/html_js/drawBeeline/demo1.html

准备属性值:

   本文使用js画直线,运用到css中的一些属性。

直线配置

绘制的步骤:

    在本例中,绘制直接使用鼠标。点击获得起始点,拖动到终点获得结束点,鼠标松开就绘制图形。

获得起始点:

获得结束点:

绘制直线:

二:画运动的小球

    使用了jquery中的animate()方法。

   js: https://github.com/wangxia34/trajectory/blob/master/trajectory/html_js/drawBall/demo2.js

   html: https://github.com/wangxia34/trajectory/blob/master/trajectory/html_js/drawBall/demo2.html

小球的属性:

不变的属性
需要改变的属性

创建小球:

使小球运动:

三:小球沿路径直线运动

    将之前的画直线的方法封装成一个固定起点和终点的类。

js: https://github.com/wangxia34/trajectory/blob/master/trajectory/html_js/drawTrajectory/js/createLine.js

html: https://github.com/wangxia34/trajectory/blob/master/trajectory/html_js/drawTrajectory/demo1.html

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容