質問内容

この質問の背後にある数学は何度も質問されているので、特に私が求めているものではありません。 むしろ、私はこれらの点を決定する方程式を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座標を、互いに45度ずつ広がった8点分与えてくれるはずです。 しかし、これはうまくいきませんし、その理由もわかりません。

これは、私が得た出力です（HTML5 Canvas 要素を使用）。 ポイントは一番内側の赤い円上にあるべきで、その円には

不正解です。

こんな感じです（ただし、これは手動で1点だけ配置した場合です）。

正しい。

どなたか教えてください。 もう何年も三角関数を習っていませんが、他の例（いろいろな言語）を見ても、なぜこれがうまくいかないのかわかりません。

どのように解決するのですか？

更新しました。解決しました

私のコードでは、これらの点はすでに円の中心からの相対的なものなので、それぞれの計算にcenterXとcenterYを追加する必要はなかったのです。 つまり、キャンバスの中心は (300, 175) ですが、すべての点は私が作成した円 (配置する必要のあるストローク ライン) に対して相対的であるため、それらの中心は (0, 0) になっていました。 コードからこれを削除し、読みやすくするためにシータと角度の計算を 2 つの変数に分割したら、出来上がりです。

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

正しい。 <イグ