一：画直线
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
小球的属性：
不变的属性
需要改变的属性
创建小球：
使小球运动：
三：小球沿路径直线运动
将之前的画直线的方法封装成一个固定起点和终点的类。
html: https://github.com/wangxia34/trajectory/blob/master/trajectory/html_js/drawTrajectory/demo1.html
网友评论