使用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
【使用js画小球沿直线运动】html: https://github.com/wangxia34/trajectory/blob/master/trajectory/html_js/drawTrajectory/demo1.html
推荐阅读
- 画画吗（）
- 由浅入深理解AOP
- 【译】20个更有效地使用谷歌搜索的技巧
- mybatisplus如何在xml的连表查询中使用queryWrapper
- MybatisPlus|MybatisPlus LambdaQueryWrapper使用int默认值的坑及解决
- MybatisPlus使用queryWrapper如何实现复杂查询
- 画解算法（1.|画解算法：1. 两数之和）
- 漫画初学者如何学习漫画背景的透视画法（这篇教程请收藏好了！）
- 画廊百里若江南
- iOS中的Block