JavaScript: canvas に円や円弧を描画する
HTML5 Canvas API を使って、円や円弧を描画します。
円や円弧を描画するには arc() メソッドを使用します。
arc() メソッドの構文は次の通りです。
arc(中心のx座標, 中心のy座標, 半径, 開始角度, 終了角度, 描く方向);
開始角度と終了角度は、右水平方向が「0」となり、時計回り方向に指定します。(下図参照)

単位はラジアンで、ラジアンは「度数÷180×π」 で計算できます。 ラジアンをJavaScriptで計算して求める場合は次にように記述します。
ラジアン = 角度 * Math.PI / 180;
例として半円のラジアンを求める場合は、半円の角度は180ですから、「ラジアン = 180 * Math.PI / 180」 となります。
描く方向は、反時計回りが trueで、時計回りが false です。
例えば、円の中心座標が(100, 100)で、半径が50の円を描く場合は次のようになります。
arc(100, 100, 50, 0, 2 * Math.PI, false);
サンプルコード: 円を描く
HTML・CSS
<canvas id="canvas"></canvas>
<style>
canvas {
border: 1px solid silver;
}
</style>
JavaScript
var canvas = document.getElementById('canvas');
var c = canvas.getContext('2d');
c.strokeStyle = 'red'; // 線の色
// パスの開始
c.beginPath();
c.arc(75, 75, 50, 0, 2 * Math.PI, false);
// 描画
c.stroke();
c.fillStyle = 'green'; // 塗りつぶしの色
// パスの開始
c.beginPath();
c.arc(200, 75, 50, 0, 2 * Math.PI, false);
// 描画
c.fill();
円の枠線を描く場合は stroke() メソッドを使い、円を塗りつぶす場合は fill() メソッドを使います。
円の場合は開始角度、終了角度がそれぞれ「0, 2 * Math.PI」となりますので、特にややこしくはないと思います。
枠線の色を指定する場合は strokeStyle プロパティを使い、 塗りつぶしの色を指定する場合は fillStyle プロパティを使います。
サンプルコード: 円弧を描く その1
HTML・CSS は省略します。
JavaScript
var canvas = document.getElementById('canvas');
var c = canvas.getContext('2d');
// ラジアンを求める
var radianStart = getRadian(0);
var radianEnd = getRadian(90);
c.strokeStyle = 'red'; // 線の色
// パスの開始
c.beginPath();
c.arc(75, 75, 50, radianStart, radianEnd, false);
// 描画
c.stroke();
c.fillStyle = 'green'; // 塗りつぶしの色
// パスの開始
c.beginPath();
c.arc(200, 75, 50, radianStart, radianEnd, false);
// 描画
c.fill();
// ラジアンを返す関数
function getRadian(degree){
return degree * Math.PI / 180;
}
円弧を描画しています。
最初の方でも述べたように、開始角度、終了角度は右水平方向が 0 となります。
単位はラジアンですから、先に角度からラジアンを計算する関数 getRadian を作りました。 引数として角度を渡すと、ラジアンが返ってきます。
今回のサンプルでは開始角度を 0 度、終了角度を 90 度としています。 ですから右水平方向から、下垂直方向へ円弧を描画します。
コードの最初の方で自作の getRadian 関数を使ってラジアンを取得しています。
後は、arc() メソッドを使って円弧を描くだけです。
サンプルコード: 円弧を描く その2
今回のサンプルは、円グラフで見るような円弧を描きます。
前のサンプルは arc() メソッドだけのシンプルな例でしたが、 今回は moveTo()、lineTo()、arc()、closePath() メソッドを使います。
JavaScript
var canvas = document.getElementById('canvas');
var c = canvas.getContext('2d');
// ラジアンを求める
var radianStart = getRadian(270);
var radianEnd = getRadian(50);
c.strokeStyle = 'red'; // 線の色
// パスの開始
c.beginPath();
c.moveTo(75, 75);
c.lineTo(75, 25);
c.arc(75, 75, 50, radianStart, radianEnd, false);
c.closePath();
// 描画
c.stroke();
c.fillStyle = 'green'; // 塗りつぶしの色
// パスの開始
c.beginPath();
c.moveTo(200, 75);
c.lineTo(200, 25);
c.arc(200, 75, 50, radianStart, radianEnd, false);
c.closePath();
// 描画
c.fill();
// ラジアンを返す関数
function getRadian(degree){
return degree * Math.PI / 180;
}
今回のサンプルでは、開始角度が 270、終了角度が 50 となっています。
moveTo() で中心点へ移動し、lineTo() で上方向への線を描き、arc() で円弧を描き、 closePath() でパスを閉じます。
最後に stroke() か fill() で描画すると、上のような円弧が描画できます。