omachizura

仕事メモ、役に立ったスキルをまとめています。


html5 canvasで円・円弧を描画する

前回 canvasの多角形の描画方法とパスの基本的な考え方 は複雑な多角形を描画する方法を紹介しました。

今回は直線だけでなく、円を描画する方法を紹介します。

円の描画方法

自由自在に曲線を描画するのは複雑な考え方が必要ですが、円(正円)を描画するだけなら1つの関数だけでできます。

円を描画する関数は半円を描画することも想定して、開始角度と終了角度も指定する必要があります。角度はrad(ラジアン)という単位で指定する必要があります。

rad(ラジアン)

高校の数学で習う内容なのですが、忘れてしまった方も多くいると思います。馴染みのある度(°)rad(ラジアン)の対応表は下記のようになります。

対応表
度(°)rad(ラジアン)
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座標, 半径, 開始角度, 終了角度 [, 方向 ] )

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();
  }
});

次回は描画した図形を動かしてアニメーションを表現する方法を紹介します。

canvasのアニメーションの基本的な考え方 に続きます。