2017-06-04 141 views
0

我需要將點均勻地分佈在一個圓的圓周上,而我沒有智慧。結果並不完全是圓形的,而是螺旋形的,特別是有更多的點數。我對它進行了大力研究,但仍然無法弄清楚我可能犯的錯誤。在圓上均勻分佈點

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>

回答

2

的主要錯誤是血腥簡單 - 只要變更樣式position: relativeposition: 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>

+0

謝謝你,現在的工作。我沒有在風格上尋找這個愚蠢的問題。你的其他更正也是關鍵。 – Zoe