计算圆周上均匀分布的点

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 )
}

我希望能够获得8个点在圆周上的x，y坐标，彼此间隔45度。但是这不起作用，我不明白为什么。

这是我得到的输出结果（使用HTML5 Canvas元素）。这些点应该位于最内层的红色圆圈上，因为那个圆有一个

错误:

当它“应该”看起来像这样（虽然这只是手动放置一个点）：

正确:

可以有人帮我吗？自从我学三角函数以来已经过去了好多年，但即使查看其他例子（来自各种语言），我也看不出为什么这不起作用。

- SalarianEngineer

---

明显吗？弧度与角度（只是猜测） - Spiked3

感谢您的编辑帮助，Llama先生！ - SalarianEngineer

我已经编辑了问题，将您的解决方案从中移除，因为您将其作为答案发布了。感谢您在下面分享您的解决方案！ - Aurora0001

@Aurora0001 ....如果这很重要，那就去做吧。我是说，现在已经过去三年了，我想这还是有关联的，哈哈哈。 - SalarianEngineer

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;
}

正确：

- SalarianEngineer

---

很棒的数学！使用你的数学公式并加上 centerx 和 centery 后对我有用。谢谢。 - edencorbin

Answer 2

cos和sin在Javascript中接受以弧度为单位的参数，而不是角度。你可以将你的theta计算改为：

var theta = (Math.PI*2)/numberOfPoints;

详情请参阅Math.cos文档

- Emmett Butler

---

哎呀，感谢你指出了这个问题。不幸的是，我肯定还有其他遗漏，因为现在它把点放在更远的一个圆环之外，恰好超过绿色圆环（与我第一张截图中显示的角度相同）。 - SalarianEngineer

搞定了。画布的中心点位于(300, 175)，但从每个点的角度来看，画布的中心点是(0, 0)。我必须将其从计算中剔除，这样就奏效了。 - SalarianEngineer

Answer 3

@Emmett J. Butler的解决方案应该可行。以下是一个完整的工作示例

// canvas and mousedown related variables
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var $canvas = $("#canvas");
var canvasOffset = $canvas.offset();
var offsetX = canvasOffset.left;
var offsetY = canvasOffset.top;
var scrollX = $canvas.scrollLeft();
var scrollY = $canvas.scrollTop();

// save canvas size to vars b/ they're used often
var canvasWidth = canvas.width;
var canvasHeight = canvas.height;


var centerX = 150;
var centerY = 175;
var radius = 100;
var numberOfPoints = 8;
var theta = 2.0*Math.PI/numberOfPoints;

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

    pointX = ( radius * Math.cos(theta * i) + centerX );
    pointY = ( radius * Math.sin(theta * i) + centerY );
    ctx.fillStyle = "Red";
    ctx.fillRect(pointX-5,pointY-5,10,10);

    ctx.fillStyle = "Green";
}
ctx.stroke();

- Salix alba