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() で描画すると、上のような円弧が描画できます。

JavaScript入門