如何连接点？ （点是随机定位的HTML元素）

Question

我正在使用以下代码生成与页面中另一个元素的最大距离的随机点：

function drawPoints (maxdistance, npoints) {
  var start = $('#startingPoint').position();
  var draw = document.getElementById('draw');

  var i = npoints;
  while(i--) {
    var n = document.createElement('div');
    n.style.position = 'absolute';
    n.style.top = ( - (Math.random() * maxdistance) -10 + start.top).toString() + 'px';
    n.style.left = ( - (Math.random() * maxdistance) + 50 + start.left).toString() + 'px';
    n.style.width = '6px';
    n.style.height = '6px';
    n.style.backgroundColor = 'black';
    n.style.borderRadius = '6px';
    draw.appendChild(n);
  }
}

例如，drawPoints(150, 20);将绘制20个点，距离起点的最大距离为150.

问题是，如何绘制某种弧线或线条以连接其中的一些点？

Answer 1

使用画布和其他新功能非常好，但我认为几乎所有东西都可以使用非常简单的内置函数（当然没有jQuery）重新编程。

这是一个用于连接点的跨浏览器功能：

function connectDots(xA,yA,xB,yB)
{
    var a=document.createElement("div");
    var r=180*Math.atan2(yB-yA,xB-xA)/Math.PI;
    a.setAttribute("style","width:"+Math.sqrt(Math.pow(xA-xB,2)+Math.pow(yA-yB,2))+"px;height:1px;position:absolute;background-color:black;top:"+yA+"px;left:"+xA+"px;-moz-transform:rotate("+r+"deg);-moz-transform-origin:0px 0px;-webkit-transform:rotate("+r+"deg);-webkit-transform-origin:0px 0px;transform:rotate("+r+"deg);transform-origin:0px 0px;-ms-transform:rotate("+r+"deg);-ms-transform-origin:0px 0px;");
    document.body.appendChild(a);
}

四行。

小提琴：http://jsfiddle.net/mageek/3aG5H/2/