使用js画小球沿直线运动

JavaScript09

使用js画小球沿直线运动,第1张

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

可以呀,只要他们俩之间画很多的小点就是一条直线啦,哈哈,用循环就可以啦,至于点的位置嘛,只要有初中的数学就可以搞定,我就不说了,颜色和粗度只要设置小点的style就可以啦,至于小点嘛可不能用英文里的句号(.),哪样会产生编差,因为他不在正中,而在底部,可以用(●),虽然大了点,但可以变小,也可以自已成为画一个图,哈哈,,,,,,,,,

考虑在y=kx+b的点(1,k+b),点(-1,-k+b)

我们知道点(1,k+b),点(-1,k-b)在y‘ = mx‘+n上

于是 k+b= m+n;k-b=-m+n

两式相加,2k=2n,所以n=k