HTML5 Canvas arc（）とlineTo（）で円の周りにタブを描く

Question

キャンバスに描いた円があります。私はこの円を囲むタブのようなオブジェクトを、両端に一定の角度で描かれた線で接続された2つの円弧を使用して描きたいと思います。残念ながら、lineTo（）メソッドはx & y座標しか受け入れないので、私はそれらの用語で描画したいところを翻訳することができなければなりません。

私はポイント4から1に行く、最初の弧を描くことができますが、私は1のx、y座標を取得する方法がわからない、またどのようなxとyを把握する方法座標が2である必要があります。私が2になったら、円を2から3（または3から2）にするために半径を大きくする必要がありますが、次にx、y座標を4にする方法を知る必要があります。 lineTo（）を呼び出してxとyの4を渡します。これはおそらくMath.sin（）とMath.cos（）を含む単純な幾何学や三角法だと思いますが、それを理解するのには少し時間がかかります。

Answer 1

私はHTML5 Roulette Wheelのようなものを使用しました。

これにより、好きなタブが表示され、タブ間の間隔で再生できます。

lineToは必要ありません。各タブの塗りと線を使用してその効果を作成できます。