javascript - 将 DIV 元素放置在圆圈中

Question

我需要将这 5 个元素放在圆圈中。而且我的三角学知识太差，无法提出解决方案。

http://jsbin.com/acOSeTE/1/edit

谁有帮助，请对数学公式进行一些解释，或将我转发到包含有关它的信息的链接。

我不需要 jQuery 解决方案，因为我想了解框架背后的内容。

谢谢。

Answer 1

你几乎肯定需要 CSS 来以这种精度定位 div。

您正在寻找的一般公式是，对于圆上的任何给定弧度位置（一个圆中有 2π 弧度），xandy是：

x = originX + (Math.cos(radians) * radius);
y = originY + (Math.sin(radians) * radius);

示例：Live Copy | 直播源

CSS（我想你可以使用内联样式）：

#target {
  position: absolute;
  border: 1px solid black;
  width: 1px;
  height: 1px;
}

HTML：

<input type="button" id="theButton" value="Start/Stop">
<div id="target"></div>

JavaScript：

(function() {
  var radians, maxRadians, target, radius, originX, originY, inc, timer;

  radius = 50;
  originX = 100;
  originY = 100;

  radians = 0;
  maxRadians = 2 * Math.PI;
  inc = 10 / 360;
  target = document.getElementById("target");
  positionTarget();

  function positionTarget() {
    var x, y;

    x = originX + (Math.cos(radians) * radius);
    y = originY + (Math.sin(radians) * radius);
    console.log(x + "," + y);
    target.style.left = x + "px";
    target.style.top =  y + "px";
    radians += inc;
    if (radians > maxRadians) {
      radians -= maxRadians;
    }
    timer = setTimeout(positionTarget, 30);
  }

  document.getElementById("theButton").onclick = function() {
    if (timer) {
      clearTimeout(timer);
      timer = 0;
    }
    else {
      timer = setTimeout(positionTarget, 30);
    }
  };
})();