在圆上均匀分布点

我需要将点均匀地分布在一个圆的圆周上，而我没有智慧。结果并不完全是圆形的，而是螺旋形的，特别是有更多的点数。我对它进行了大力研究，但仍然无法弄清楚我可能犯的错误。在圆上均匀分布点

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>

来源

2017-06-04 Zoe

的主要错误是血腥简单 - 只要变更样式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>

来源

2017-06-04 20:19:40

谢谢你，现在的工作。我没有在风格上寻找这个愚蠢的问题。你的其他更正也是关键。 – Zoe

在圆上均匀分布点

回答

相关问题