1

次のコードを使用して、ページ内にある別の要素から最大距離のランダムなポイントを生成しています。

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);開始点から最大距離150で20点を描画します。

問題は、この点のいくつかを接続するために、どのようにある種の弧または線を描くのかということです。

4

1 に答える 1

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);
}

4行。

フィドル： http： //jsfiddle.net/mageek/3aG5H/2/

于 2012-06-14T12:50:49.520 に答える