読者です 読者をやめる 読者になる 読者になる

フロントサイドエンジニアという選択肢

HTMLコーダー → ECサイト運営 → システムエンジニア という経歴の著者がフロントサイトエンジニアという職業に今後の活路を見出し、その道に進むために取得した技術を貯めておくブログ

(Javascript)Canvasの基本 円を描画する

canvasで円を描画する場合はarcメソッドを使用して描画する円の形を指定します。fillメソッドで塗りつぶした円を、strokeメソッドで線のみを描画します。

arc(x, y, radius, startAngle, endAngle, notClockwise)

円はarcメソッドのみで設定します。
引数は順に、x、y、半径、開始角度、修了角度、反時計回りにするか、です。
角度は、時計の3時の位置が0度になります。ただし、角度は0~360で表すのではなく0~約6.28度の間で指定します。Π(3.14)が 180度に相当するので、0~360度で考えるには、3.14/180を1度とします。45度の角度を求めたい場合は、(3.14/180)*45となります。
実際の描画は、開始角度から終了角度まで、時計回りで行います。反時計回りで描画するには、notClockwiseの値をtrueにします。

以下のサンプルは、x=50、y=60の位置に、半径25ピクセルで円を描画して、その後下半分を黒く塗りつぶしたものです。

var context = document.getElementById('canvas').getContext('2d');
var degree = Math.PI/180;
// 枠線
context.beginPath();
context.arc(50,60,25,0,degree*360,false);
context.stroke();
// 半円塗りつぶし
context.beginPath();
context.arc(50,60,25,0,degree*180,false);
context.fill();

結果:f:id:jmqys:20150924110815p:plain