円の上に点を均等に配分する

円の円周上に点を均等に配分する必要があります。私は知的ではありません。結果はまったく円形ではなく、より多くの点を中心に渦巻き状になります。私はそれを精力的に研究しましたが、私はどこでミスを犯す可能性があるのかまだ分かりません。円の上に点を均等に配分する

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: absoluteにスタイルposition: relativeを変更：

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

円の上に点を均等に配分する

答えて

関連する問題