我需要在一个圆的圆周上均匀地分布点，而我不知道该怎么做。结果并非完全是圆形的，而是螺旋形的，尤其是在具有大量点的情况下。我已经进行了认真的研究，但仍然不知道该在哪里出错。
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>最佳答案
主要错误是很简单-只需将样式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>