【问题标题】：Calculating evenly spaced points on the perimeter of a circle计算圆周上均匀分布的点
【发布时间】：2014-06-17 21:59:37
【问题描述】：

这个问题背后的数学问题已经被问过很多次了，所以这并不是我所追求的。相反，我正在尝试将用于确定这些点的等式编程到 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 元素）。这些点应该位于最里面的红色圆圈上，因为那个有一个

不正确：

当它“应该”看起来像这样（虽然这只有 1 点，手动放置）：

正确：

有人可以帮我吗？我学习 trig 已经有好几年了，但即使查看其他示例（来自各种语言），我也不明白为什么这不起作用。

【问题讨论】：

明显吗？弧度与度数（只是猜测）
感谢 Llama 先生的编辑协助！
我已编辑从问题中删除您的解决方案，因为您将其发布为答案。感谢您在下面分享您的解决方案作为答案！
@Aurora0001 ....当然，如果这很重要，那就去做吧。我的意思是，在这一点上（三年多后），我想它是相关的，哈哈哈

标签： javascript trigonometry

【解决方案1】：

更新：想通了！

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

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

正确：

【讨论】：

数学不错！使用您的数学但在 + centerx +centery 中添加对我有用。谢谢。

【解决方案2】：

cos 和 sin 在 JavaScript 中接受弧度参数，而不是度数。您可以将 theta 计算更改为

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

详情请见Math.cos documentation

【讨论】：

糟糕，感谢您指出这一点。不幸的是，我还缺少其他一些东西，因为它现在将点放置在更远的 1 个环处，刚好越过绿色环（始终与我的第一个屏幕截图中显示的角度相同）。
想通了。画布的中心在点 (300, 175)，但从每个点的角度来看，画布的中心是点 (0, 0)。我不得不把它从计算中剔除，它产生了奇迹。

【解决方案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();

【讨论】：