使用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