JavaScriptを使用してSVGパスを動的に計算する

Question

ユーザーが入力した角度に応じて円の周囲を描画しようとしています。角度は周囲の補完を決定します：360°は完全な円、180は円の半分などです。

私の問題は、半径、角度、円の中心座標が与えられたとき、どのようにして周縁のパスを動的に計算できますか？

私はおそらく基本的な数学だと知っていますが、これまでに試したことはすべてうまくいかなかったのです。ここで

は私のバイオリンです：https://jsfiddle.net/Hal_9100/L311qq88/ 私の問題は、パスのx、y座標のための右の式を見つけることです：

var x = i * (radius * Math.cos(angle)) + centerX; 
var y = i * (radius * Math.sin(angle)) + centerY; 

私はここにすべて間違って行くのだろうか？

ここに私がしようとしているものの例があります：黒の境界線のみを描画する必要があることに注意してください：赤の点線を使用して、周囲の描画方法ユーザーが指定した値。

Answer 1

はい、問題はあなたの数学です。ここでのxを計算するための正しい方法はあり、yはペア（ないゼロからの半径に、反復は、ゼロから必要な角度にあることに注意してください）座標：

for (var i = 0; i <= angle; i++) { 
     var x = (radius * Math.cos((i-90)*Math.PI/180)) + centerX; 
     var y = (radius * Math.sin((i-90)*Math.PI/180)) + centerY; 

をあなたはこれらの3に置き換えている場合あなたのフィドルが正常に動作しますライン。