JavaScript 円弧の書き方

JavaScriptで円を描く方法を実際の行為に置き換えながら説明してみました。
ほぼこれの内容です。

画用紙の準備

##canvas要素

canvas要素は、JavaScriptという名の鉛筆で、図形などを描くための画用紙のようなイメージです。widthとheightとそれぞれ幅と高さを指定します。
後でJavaScriptで要素を取得するためにidを指定します。

   <canvas id="canvas" width="150" height="200"></canvas>

##getContext
canvas要素をidで取得し、getContextメソッドで書きたい図形が２次元だということを指定します。変数ctxに代入してそれに対して様々なメソッドで円を書いていきます。
※３次元もできるっぽいですが、まだ勉強してません。

   var canvas = document.getElementById("canvas");
   var ctx = canvas.getContext("2d");

鉛筆をもつ

##beginPath
beginPathで鉛筆を持ちます。

   ctx.beginPath();

#書きたい円を想像する
##arcメソッド
書きたい円を想像してその設計図をarcメソッドに書いていきます。

   ctx.arc(75,75,20,0,(Math.PI/180)*90,true)

arc(x軸,y軸,半径,弧が開始する角度,弧が終了する角度,弧の向き)に従って、値を入れていきます。
###x軸,y軸
作成したcanvas要素の左上を原点とし、描きたい円弧の中心をどこにするかを指定する。
width=150,height150のcanvas要素を作成した場あり、x=75,y=75とするとcanvas要素の中心に、円弧の中心を指定できます。

###半径
作成したい円の半径を指定します。そのままですね。
###弧が開始する角度,弧が終了する角度
円の中心を通り水平に線を引いたときの右側の円との接点を0°、円の中心を通り垂直に線を引いたときの下側の円との接点を90°として値を設定します。下記例です。(中心が雑ですみません。)

開始する角度に0、終了する角度に90を指定した場合

開始する角度に90,終了する角度に270を指定した場合

ここでいう角度は、多くの人が想像するであろう60°とか45°とかいう度数法ではなく、弧度法(ラジアン)で指定します。弧度法(ラジアン)のことを知らなくても、(Math.PI/180)*degreesのdegreesに度数法の数字を指定すれば良いです。終了する角度に90を指定したい場合は(Math.PI/180)*90のように。
ちなみに、ラジアン知らなかったのですが下記サイトで理解できました。

###弧の向き
時計回りか、反時計回りかです。真偽値で示します。falseが時計回り、trueが反時計周りで、指定しない場合はfalseとみなされ時計回りに弧が描かれます。

#円弧を描く
strokeメソッドを使って円弧を書きます。ちなみにfillメソッドだと、指定した開始角度と終了角度を結んだ線と円弧で囲まれた部分が黒く塗りつぶされます。

   ctx.stroke()

#完成型コード

   var canvas = document.getElementById("canvas");
      if (canvas.getContext) {
        var ctx = canvas.getContext("2d");
        ctx.beginPath();
        ctx.arc(250,250,100,(Math.PI/180)*90,(Math.PI/180)*270);
        ctx.stroke();        
      }

ブラウザによってはgetContextメソッドが使用できない場合があるらしく、if文いれています。

###おわりに
需要あるかどうかわかりませんが、誰かの役に立てば幸いです。