[解決済み】円弧（のSVGパス）を計算する方法）

質問

(200,200)を中心とする半径25の円があるとき、270度から135度までの弧と270度から45度までの弧はどのように描くのでしょうか。

0度とは、X軸上（右側）のこと（3時の位置という意味です） 270度は12時の位置、90度は6時の位置を意味します。

より一般的には、円の一部を構成する円弧の経路は、次のようになります。

x, y, r, d1, d2, direction

意味

center (x,y), radius r, degree_start, degree_end, direction

解決方法は？

wdebeaumさんの素晴らしい回答を発展させて、円弧状のパスを生成する方法を紹介します。

function polarToCartesian(centerX, centerY, radius, angleInDegrees) {
  var angleInRadians = (angleInDegrees-90) * Math.PI / 180.0;

  return {
    x: centerX + (radius * Math.cos(angleInRadians)),
    y: centerY + (radius * Math.sin(angleInRadians))
  };
}

function describeArc(x, y, radius, startAngle, endAngle){

    var start = polarToCartesian(x, y, radius, endAngle);
    var end = polarToCartesian(x, y, radius, startAngle);

    var largeArcFlag = endAngle - startAngle <= 180 ? "0" : "1";

    var d = [
        "M", start.x, start.y, 
        "A", radius, radius, 0, largeArcFlag, 0, end.x, end.y
    ].join(" ");

    return d;       
}

を使用します。

document.getElementById("arc1").setAttribute("d", describeArc(200, 400, 100, 0, 180));

そして、あなたのhtmlの中に

<path id="arc1" fill="none" stroke="#446688" stroke-width="20" />

ライブデモ