html5 canvasで円・円弧を描画する
html5 canvasで色の指定と四角形の描画は複雑な多角形を描画する方法を紹介しました。
今回は直線だけでなく、円を描画する方法を紹介します。
円の描画方法
自由自在に曲線を描画するのは複雑な考え方が必要ですが、円（正円）を描画するだけなら１つの関数だけでできます。
円を描画する関数は半円を描画することも想定して、開始角度と終了角度も指定する必要があります。角度はrad（ラジアン）という単位で指定する必要があります。
rad（ラジアン）
高校の数学で習う内容なのですが、忘れてしまった方も多くいると思います。馴染みのある度(°)とrad（ラジアン）の対応表は下記のようになります。
| 度(°) | rad（ラジアン） |
|---|---|
| 0° | 0π rad |
| 30° | 1/6π rad |
| 45° | 1/4π rad |
| 60° | 1/3π rad |
| 90° | 1/2π rad |
| 180° | π rad |
| 360° | 2π rad |
JavaScriptでπはMath.PIで取得できます。なので、180°はMath.PI、90°は(1/2)*Math.PIで指定することができます。
わかりづらい場合は、1°が(1/180)*Math.PIなので、X°を指定したい場合は(X/180)*Math.PIとすればよいです。
関数
arc(x座標, y座標, 半径, 開始角度, 終了角度 [, 方向 ] )
html5 canvasで色の指定と四角形の描画で紹介したパスの一部として使用します。
中心の座標と半径さえ指定されれば円は描画することが可能なのですが、用意されている関数はいろいろな引数を指定する必要があります。
この関数では半円を描画することも想定して、開始角度と終了角度も指定する必要があります。
$(function ($) {
var canvas;
var context;
canvas = $('#c1')[0];
if (canvas.getContext){
context = canvas.getContext('2d');
//パスの初期化
context.beginPath();
//中心座標(200,200)、半径100の円弧を、開始角度30度、終了角度180度で、時計回りに作成する
context.arc(200, 200, 100, (30/180)*Math.PI, Math.PI);
//定義したサブパスの線を描画
context.strokeStyle = 'rgb(255, 0, 0)';
context.stroke();
//パスの初期化
context.beginPath();
//中心座標(400,200)、半径100の円弧を、開始角度90度、終了角度270度で、反時計回りに作成する
context.arc(400, 200, 100, (90/180)*Math.PI, (270/180)*Math.PI, true);
//定義したサブパスの線を描画
context.strokeStyle = 'rgb(0, 0, 255)';
context.stroke();
//パスの初期化
context.beginPath();
//中心座標(300,300)、半径100の円弧を、開始角度0度、終了角度360度で、時計回りに作成する
context.arc(300, 300, 100, (0/180)*Math.PI, (360/180)*Math.PI);
//定義したサブパスの線を描画
context.strokeStyle = 'rgb(0, 255, 0)';
context.stroke();
}
});