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

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

正确：

Answer 2

Javascript中的

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

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

有关详细信息，请参阅Math.cos documentation

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();