已知两个点，如何用javascript在网页上画一条直线？

JavaScript022

已知两个点，如何用javascript在网页上画一条直线？,第1张

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

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

实现步骤如下：

变量定义：pixelStart： 线的一端屏幕坐标，pixelEnd：线的箭头端屏幕坐标；r：选取多长距离绘制箭头（单位像素，并不是CB对应的箭头的长度，而是红色线段对应的距离）；angle：箭头线（CB或者DB）与AB的夹角。

1) 首先要将AB两点的经纬度坐标转换成屏幕坐标。

2) 然后根据AB两点屏幕坐标以及r长度，计算绿色小绿点的屏幕坐标pixelTem。

3) 然后根据B点、小绿点的屏幕坐标及angle角度，计算出C,D两点的屏幕坐标。

4) 利用map的坐标转换方法，将C,D两点的屏幕坐标转成经纬度表示的坐标。

5) 利用画线方法，绘制CBD多折线。

备注：思路很简单，主要是计算小绿点、C,D的屏幕坐标麻烦。