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

html5 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座標, 半径, 開始角度, 終了角度 [, 方向 ] )

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

関連記事

  • html5 canvasの多角形の描画方法とパスの基本的な考え方

    多角形を描画するためには、起点となる座標だけでなく、各頂点の座標もすべて指定する必要があります。各頂点の座標を指定し、指定した順番に頂点同士を線でつないでいけば多角形を描画することができます。考え方と...


  • canvasでグラデーションを表現する

    線形グラデーションを使う場合はまずこの関数を使用して、グラデーションのオブジェクトを作成します。グラデーションを描画するという関数ではなく、グラデーションを定義する関数ですので、この関数を実行しただけ...


  • html5 canvasで色の指定と四角形の描画

    今回から実際に図形を描画していく方法を紹介します。最初はおそらく一番シンプルな関数である四角形を描画する関数の使い方を紹介します。図形を描画する関数を呼ぶ前に、スタイルを指定することによって、色をつけ...


  • html5 marginとpaddingで余白を設定する

    htmlで余白の設定をするときは、marginとpaddingのスタイルを使用します。要素と要素の間の余白を設定する場合はmarginを使用します。paddingは要素の内側の余白を設定します。


  • canvasのアニメーションで軌跡・残像・フェードアウトを表現する

    アニメーションを応用し軌跡や残像を残したり。フェードアウトする方法を紹介します。軌跡を残すためにはクリアする処理をなくす必要があります。クリアをしなければ、前回描画した状態に対して追記する形になるため...


  • cssで三角形を表示する方法

    画像を使わずに、cssでスタイルを指定するだけで三角形を表示させる方法を紹介します。三角形を表示させるにはborder(枠線)を使用します。縦と横が重なる部分は、どちらかのスタイル(青か赤)を優先させ...


  • html5 classを使って同じstyleをまとめる

    以下のように、同じスタイルを複数の箇所に記載しているときは、classを使えば同じスタイルを1箇所にまとめることができます。クラスはhtmlのhead部分に記載します。スタイルタグを記載し、その中に先...


  • html5 ブロック要素とインライン要素を理解する

    htmlの要素には大きく分けてブロック要素とインライン要素があります。インライン要素で指定すると、要素ごとの背景色は変更できているのですが、要素と要素の間については色が反映されません。ブロック要素でひ...


  • html5 ボーダーのスタイルで罫線を表示する

    罫線を引いて、より見た目をわかりやすくする方法を紹介します。ボーダーにはスタイル、色、太さなどの項目を設定する必要があります。


  • pタグとh1タグの段落と見出しで読みやすい文章構成を作成する方法

    段落と見出しを表示して、読みやすい文章のレイアウトを表現する方法を紹介します。作文などで文章を書くときは、文の区切りには段落を入れて読みやすくすることがあります。htmlでも段落を意味するタグがありま...