在圆上均匀分布点答案

【问题标题】：Evenly distribute points on a circle在圆上均匀分布点
【发布时间】：2017-06-04 19:39:20
【问题描述】：

我需要将点均匀地分布在圆周上，而我已经疯了。结果并不完全是圆形的，而是呈螺旋状的，尤其是在点数较多的情况下。我对此进行了深入研究，但仍然无法弄清楚我会在哪里犯错。

  window.onload = function() {
      var num = 15;

      var angle = (2 * Math.PI)/(num+1); var count = 0;
      var demo = document.getElementById("demo"); 

      function Dot() {
          this.angle = angle * count;
          count++;
          this.x = Math.cos(this.angle) * 200; 
          this.y = Math.sin(this.angle) * 200;
      }

      Dot.prototype.create = function() {
          var dot = document.createElement("div");
          dot.style.top = this.y + 100 + "px";
          dot.style.left = this.x + 200 + "px";
          dot.className = "dot";
          demo.appendChild(dot);
      }

      for (var i = 0; i < num; i++) {
          var d = new Dot();
          d.create(); 
      }
  }

  .dot {
      height: 20px;
      width: 20px;
      border-radius: 50%;
      background: blue;
      position: relative;
      text-align: center;
  }

    <!DOCTYPE html>
    <html>
    <head>
      <title>Metcalfe's Law Demo</title>
      <link rel="stylesheet" href="style.css">
      <script type="text/javascript" src="code.js"></script>
    </head>
        <body>
            <div id="container">
                <div id="demo">
                </div>
            </div>
        </body>
    </html>

【问题讨论】：

标签： javascript geometry trigonometry

【解决方案1】：

主要的错误非常简单——只需将样式 position: relative 更改为 position: absolute：

window.onload = function() {
      var num = 12;

      var angle = (2 * Math.PI)/(num); var count = 0;
      var demo = document.getElementById("demo"); 
      console.log(angle)

      function Dot() {
          this.angle = angle * count;
          count++;
          console.log(this.angle,count)
          this.x = Math.cos(this.angle) * 200; 
          this.y = Math.sin(this.angle) * 200;
      }

      Dot.prototype.create = function() {
          var dot = document.createElement("div");
          dot.style.top = this.y + 200 + "px";
          dot.style.left = this.x + 200 + "px";
          dot.className = "dot";
          demo.appendChild(dot);
      }

      for (var i = 0; i < num; i++) {
          var d = new Dot();
          d.create(); 
      }
  }

.dot {
      height: 20px;
      width: 20px;
      border-radius: 50%;
      background: blue;
      position: absolute;
      text-align: center;
  }

<!DOCTYPE html>
    <html>
    <head>
      <title>Metcalfe's Law Demo</title>
      <link rel="stylesheet" href="style.css">
      <script type="text/javascript" src="code.js"></script>
    </head>
        <body>
            <div id="container">
                <div id="demo">
                </div>
            </div>
        </body>
    </html>

【讨论】：

谢谢，现在可以了。我没有在样式中寻找问题，这很愚蠢。您的其他更正也很重要。