使用JavaScript在圆中定位div

我试图将15个

div

元素均匀地放置在一个半径为

150px

的圆中。我正在使用下面的代码，它似乎给出了一个奇怪的偏心椭圆重叠

//保存对div#main元素的全局引用。最初分配它。。。有用的地方：）
var main=document.getElementById（'main'）；
var circleArray=[]；
//根据接近鼠标的距离移动一个圆
var moveCircle=函数（圆，dx，dy）{
};
//查看所有的圆元素，并确定其中是否有任何元素必须移动。
var checkMove=函数（）{
};
var setup=function（）{
对于（变量i=0；i<15；i++）{
//创建元素，将其添加到数组中，并以三角方式指定其坐标。
//然后将其添加到“main”div
var circle=document.createElement（'div'）；
circle.className='圆圈编号'+i；
推（圆）；
circleArray[i].posx=Math.round（（150*Math.cos（i*（2*Math.PI/15）））+'px'；
circleArray[i].posy=Math.round（（150*Math.sin（i*（2*Math.PI/15）））+'px'；
circleArray[i].style.position=“relative”；
circleArray[i].style.top=circleArray[i].posy；
circleArray[i].style.left=circleArray[i].posx；
main.appendChild（circleArray[i]）；
}
};
设置（）；
addEventListener（'load'，function（））{
});
div{
框大小：边框框；
}
主分区{
位置：绝对位置；
左：50%；
最高：50%；
}
分区圆{
位置：绝对位置；
宽度：20px；
高度：20px；
边框：2件纯黑；
边界半径：10px；
-webkit边界半径：10px；
-moz边界半径：10px；
}

将位置设置为“绝对”。这将允许“顶部”和“左侧”从（0，0）定位div。使用“相对”将从通常布置的位置定位div

将圆的中心点从（0，0）更改为其他值，如（250250）


首先，圆上坐标的方程式简单如下：

(x, y) = (r * cos(θ), r * sin(θ))

其中，
r
是圆的半径，
θ
是以弧度表示的角度


您的代码创建偏心椭圆的原因是，当您指定
.top
和
.left
CSS值时，您没有考虑到它实际上会以左上角为参考。我已经修复了你的代码，现在它创建了一个完美的循环

对代码所做的更改：
添加了一个包含所有角度的数组
theta

var theta = [0, Math.PI / 6, Math.PI / 4, Math.PI / 3, Math.PI / 2, 2 * (Math.PI / 3), 3 * (Math.PI / 4), 5 * (Math.PI / 6), Math.PI, 7 * (Math.PI / 6), 5 * (Math.PI / 4), 4 * (Math.PI / 3), 3 * (Math.PI / 2), 5 * (Math.PI / 3), 7 * (Math.PI / 4), 11 * (Math.PI / 6)];

下图显示了我使用的所有角度


添加了一个包含不同颜色的数组
colors

var colors = ['red', 'green', 'purple', 'black', 'orange', 'yellow', 'maroon', 'grey', 'lightblue', 'tomato', 'pink', 'maroon', 'cyan', 'magenta', 'blue', 'chocolate', 'DarkSlateBlue'];


对三角方程进行了更改

circleArray[i].posx = Math.round(radius * (Math.cos(theta[i]))) + 'px';
circleArray[i].posy = Math.round(radius * (Math.sin(theta[i]))) + 'px';


更改了分配
.top
和
.left
的方式

circleArray[i].style.top = ((mainHeight / 2) - parseInt(circleArray[i].posy.slice(0, -2))) + 'px';
circleArray[i].style.left = ((mainHeight / 2) + parseInt(circleArray[i].posx.slice(0, -2))) + 'px';

其中，
mainHeight
是
#main
div
的高度


[1] 16
div
s
演示

var setup=function（）{
var半径=150；
var main=document.getElementById（'main'）；
var mainHeight=parseInt（window.getComputedStyle（main.height.slice（0，-2））；
var theta=[0，Math.PI/6，Math.PI/4，Math.PI/3，Math.PI/2，2*（Math.PI/3），3*（Math.PI/4），5*（Math.PI/6），Math.PI，7*（Math.PI/6），5*（Math.PI/4），4*（Math.PI/3），3*（Math.PI/2），5*（Math.PI/3），7*（Math.PI/4），11*（Math.PI/6）]；
var circleArray=[]；
变量颜色=[“红色”、“绿色”、“紫色”、“黑色”、“橙色”、“黄色”、“栗色”、“灰色”、“浅蓝色”、“番茄色”、“粉色”、“栗色”、“青色”、“洋红”、“蓝色”、“巧克力色”、“深蓝色”]；
对于（变量i=0；i<16；i++）{
var circle=document.createElement（'div'）；
circle.className='圆圈编号'+i；
推（圆）；
circleArray[i].posx=Math.round（半径*（Math.cos（θ[i]））+'px'；
circleArray[i].posy=Math.round（半径*（Math.sin（θ[i]））+'px'；
circleArray[i].style.position=“绝对”；
circleArray[i].style.backgroundColor=colors[i]；
circleArray[i].style.top=（（mainHeight/2）-parseInt（circleArray[i].posy.slice（0，-2））+'px'；
circleArray[i].style.left=（（mainHeight/2）+parseInt（circleArray[i].posx.slice（0，-2））+'px'；
main.appendChild（circleArray[i]）；
}
};
设置（）
div#main{
高度：300px；
宽度：300px；
位置：绝对位置；
保证金：0自动；
转换：翻译（-50%，-50%）；
最高：50%；
左：50%；
}
分区圆{
位置：绝对位置；
宽度：20px；
高度：20px；
边框：2件纯黑；
边界半径：50%；
}
身体{
保证金：0自动；
背景：番木瓜；
}
没有JS的其他方法
chipChocolate.py的anser是相当完整的，但是还有一种方法可以实现你的目标。它更简单，不需要JS

重点是思考“圆”和旋转，而不是依赖于坐标：

您需要嵌套所有图元并对其应用旋转。当它们嵌套时，
n+1
元素将根据其直接父元素的旋转进行旋转。这里有一个：


.circle、.circle div{
宽度：24px；高度：300px；
位置：绝对位置；
左：50%；顶部：50px；
}
.circle:before..circle div:before{
内容：''；
显示：块；
宽度：20px；高度：20px；
边框：2件纯黑；
边界半径：100%；
}
.圆形分区{
顶部：0；左侧：0；
-webkit变换：旋转（24度）；
-ms变换：旋转（24度）；
变换：旋转（24度）；
}
另一个解决方案，基于我见过的其他解决方案的想法



（函数（）{
弧度，半径；
半径=150；
var totalItems=48
var项=0；
函数positionTarget（）
{
变量x，y，角度=0，步长=（2*Math.PI）/totalItems；
变量宽度=$（“#容器”）.width（）/2；
变量高度=$（“#容器”）.height（）/2；
var itemW
circleArray[i].style.top = ((mainHeight / 2) - parseInt(circleArray[i].posy.slice(0, -2))) + 'px';
circleArray[i].style.left = ((mainHeight / 2) + parseInt(circleArray[i].posx.slice(0, -2))) + 'px';