堀北真希うさぎ
主な作品
アイドルをモデルにしたオリジナルキャラクタを用いた作品の一例

ページ案内▼

arc()メソッド。

HTML 5で導入される<canvas>要素を操作するために用いるJAVAスクリプトのメソッドのうち、円弧での描画を指定するarc()メソッドについての解説です。

arc()メソッド・目次。

arc()メソッドとは。

arc()メソッドは、指定された円弧の描画を指定するメソッドです。

より正確に言えば、以下のような動作となります。

  1. サブパスが存在している場合は、現在の座標から円弧の描画開始点まで直線を引きます。サブパスがなければ直線は引かれません。
  2. 引数で指定された起点から終点まで円弧を描きます。
  3. 最後に起点と終点を、サブパスに加えます。

arc()メソッドの対応状況。

<canvas>要素をサポートしているウェブブラウザであれば、全てのブラウザが対応しております。

arc()メソッドの引数と戻り値。

arc()メソッドの引数は以下の六つです。

  1. 中心のx座標…キャンヴァスの左端が 0になります。
  2. 中心のy座標…キャンヴァスの上端が 0になります。
  3. 半径
  4. 起点の角度(弧度法)。
  5. 終点の角度(弧度法)。
  6. 反時計廻りなら true, 時計廻りなら false。

特に真円にする場合は、第四引数(起点)を 0, 第五引数(終点)を Math.PI*2 (=2π)とします。

尚、arc()メソッドの戻り値はありません。

arc()メソッドを使う際の注意事項。

定義で述べた通り、既にサブパスがある場合(描画の起点が指定された, 直線が指定された或いは他の円弧が既に描かれている…など)、円弧の描画開始点まで直線が引かれてしまいます。

特に連続して円弧を描く場合には、その度にbeginPath()メソッドで初期化する必要があります。

arc()メソッドの使用例。

赤い円周を描いた後、青で三角形を描きます。

    var c=document.getElementById('CANVAS1');
    /* IEだとこれがないと動作しない場合があります */
    if (document.all && !window.opera) {
        c=G_vmlCanvasManager.initElement(c);
        }
    /* ノードが取れたか判定 */
    if (!c || !c.getContext) {
        return(false);
        }

    var ct=c.getContext('2d');

    /* 赤で円周を描く */
    ct.beginPath();                /* 描画開始 */
    ct.strokeStyle='#ff0000';      /* 線の色を赤に */
    ct.arc(120, 90, 70, 0, Math.PI*2, false);
    ct.stroke();                   /* 線で描く */

    /* 青で三角を描く */
    ct.beginPath();                /* 描画開始 */
    ct.strokeStyle='#0000ff';      /* 線の色を青に */
    ct.moveTo(120, 10);
    ct.lineTo(200, 150);
    ct.lineTo(40, 150);
    ct.closePath();
    ct.stroke();                   /* 線で描く */
}

関連事項。

beginPath()メソッド
描画サブパスを初期化するメソッド
closePath()メソッド
現在の座標から起点まで直線描画を指定するメソッド
lineTo()メソッド
直線描画を指定するメソッド
moveTo()メソッド
新たなサブパスの起点を指定するメソッド

しらぎくのウェブサイト作成入門サイトマップ

marguerite.site@gmail.com