计算圆周长上的均匀间隔点

Question

这个问题背后的数学已被多次询问,所以这并不是我所追求的.相反,我正在尝试将用于确定这些点的等式编程为JavaScript中的循环,以便我可以在圆周上均匀地显示点.

因此,使用点的X和Y位置的等式:

pointX = r * cos(theta) + centerX 
pointY = r * sin(theta) + centerY

我应该可以用这个来计算它:

var centerX = 300;
var centerY = 175;
var radius = 100;
var numberOfPoints = 8;
var theta = 360/numberOfPoints;

for ( var i = 1; i <= numberOfPoints; i++ ) {

    pointX = ( radius * Math.cos(theta * i) + centerX );
    pointY = ( radius * Math.sin(theta * i) + centerY );
    // Draw point ( pointX , pointY )
}

它应该给我沿周长的x,y坐标8点,相互传播45°.但这不起作用,我不明白为什么.

这是我得到的输出(使用HTML5 Canvas元素).这些点应该位于最里面的红色圆圈上,因为它有一个

不正确:

当它"应该"看起来像这样(虽然只有1点,手动放置):

正确:

有人可以帮帮我吗？自从我使用trig以来已经好几年了,但即使查看其他示例(来自各种语言),我也不明白为什么这不起作用.

Answer 1

更新:想出来!

我不需要在每次计算中添加centerX和centerY,因为在我的代码中,这些点已经相对于圆心.因此,当画布中心位于点(300,175)时,所有点都相对于我创建的圆(它们需要放置的笔划线),因此它们的中心位于(0,0) ).我从代码中删除了这个,并将theta和angle计算分成两个变量以提高可读性,瞧!

totalPoints = 8;

for (var i = 1; i <= totalPoints  ; i++) {
    drawPoint(100, i, totalPoints);
}

function drawPoint(r, currentPoint, totalPoints) {  

    var theta = ((Math.PI*2) / totalPoints);
    var angle = (theta * currentPoint);

    electron.pivot.x = (r * Math.cos(angle));
    electron.pivot.y = (r * Math.sin(angle));

    return electron;
}

正确: