構文は以下のとおり。
arc(x, y, radius, startAngle, endAngle, anticlockwise)
x,yが円の中心
radiusは半径
startAngleが開始角度。X軸方向が0度。
endAngleが終了角度。
anticlockwiseは方向(デフォルトは時計回り)
startAngleとendAngleに使う角度は「度」ではなくてラジアン。
度からラジアンに変換するには radians = (Math.PI/180)*degreesとする。
例えば30度なら、Math.PI/180*30で計算できる。
0度~360度までの円を描くには。360度はMath.PI/180*360なので2*Math.PIで表せる。ctx.fillで円の中を塗りつぶす。
ctx.beginPath(); ctx.arc(100, 100, 30, 0, 2*Math.PI); ctx.closePath(); ctx.fill();
塗りつぶさない円を書くにはfillではなくてstrokeを使う。
ctx.beginPath(); ctx.arc(200, 100, 30, 0, 2*Math.PI); ctx.closePath(); ctx.stroke();
ピザのような円弧を書くには
ctx.beginPath(); ctx.moveTo(300,100); //円の中心に筆を持ってくる ctx.arc(300,100,30,0, Math.PI / 180 * 90); //0度~90度まで円弧のパスを描き ctx.closePath(); //クローズする ctx.stroke();