堀北真希うさぎ
主な作品
制作者の創作キャラクタを用いた作品の一例

ページ案内▼

<canvas>要素の簡単なサンプル。

それでは、実際に簡単なサンプルを描いてみましょう。

<canvas>要素の簡単なサンプル・目次。

<canvas>要素を記述するためのHTML。

<canvas>要素はHTML 5で導入される予定の要素ですので、当然HTML 5を文書型としなければなりません。

そこで、今、以下のようなHTMLを記述するものとします。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="shift_jis">
    <title>&lt;canvas&gt;要素のサンプル</title>
    <!-- IE 6.0以降で必要なライブラリ。 -->
    <!--[if IE]><script type="text/javascript" src="excanvas.js"></script><![endif]-->
    <!-- キャンヴァス操作。 -->
    <script type="text/javascript" src="sample.js"></script>
    </head>

<body>
    <article>
        <h1>&lt;canvas&gt;要素のサンプル。</h1>
        <figure>
            <dd>
                <canvas id="CANVAS1" width="240" height="180">
                    ご覧の環境では&lt;canvas&gt;要素に対応していないようですので、<a type="image/gif" href="Canvas_in_HTML5-1.GIF">表示サンプル(GIF画像)</a>をご覧ください。
                    </canvas>
                </dd>
            </figure>
        </article>
    </body>
</html>

<canvas>要素について。

<canvas>要素が、実際にスクリプトで操作される領域となります。

<canvas>要素には幾つか属性が定義されておりますが、以下の属性を指定しておくと良いでしょう。

id属性
これをもとに、スクリプトは描画対象となるキャンヴァスを見つける事が出来るようになります。
width属性
キャンヴァスの横幅を指定します。省略するとウェブブラウザにより幅が決められますが、不適当な値になる場合もあり得るので指定しておきましょう。
height属性
キャンヴァスの高さを指定します。これも省略しない方が良いでしょう。

<canvas>要素は、キャンヴァスをサポートしていないウェブブラウザ向けの代替コンテンツを内容に持てます。

内容となる代替コンテンツは<canvas>要素の開始・終了タグを取り除いても文法がおかしくならないようなものに限られます。

注意したい事として、<canvas>要素の内容は<canvas>要素を全くサポートしていない場合に限り表示される事です。

この事については、<canvas>要素を使う前に内の<canvas>要素のアクセシビリティ上の問題で解説しましたが、<canvas>要素に対応しているブラウザでJAVAスクリプトを無効にしている場合には、描画もされなければ代替コンテンツも表示されないと言うどうしようもない状況になってしまうのです。

JAVAスクリプトのコード。

一方、JAVAスクリプトは以下のようになります。

/*
    <canvas>要素サンプルコード(1) - 簡単な作画。
*/
domo_onload=window.onload;
window.onload=demo;

function demo() {
    if (domo_onload) domo_onload();

    /* <canvas>要素ノードの取得 */
    var c=document.getElementById('CANVAS1');
    if (!c) return(false);

    /* IEだとこれがないと動作しない場合があります */
    try {
        c=G_vmlCanvasManager.initElement(c);
        }
    catch(e) {}
    /* ノードが取れたか判定 */
    if (!c.getContext) return(false);
    /* 描画用のオブジェクトを取得する */
    var ct=c.getContext('2d');

    /* 画面の色を初期化する */
    var w,h;  /* 先ず、キャンヴァスの幅と高さを得る */
    if (!(w=c.style.pixelWidth)) {
        var s=document.defaultView.getComputedStyle(c, '');
        w=parseInt(s.width);
        h=parseInt(s.height);
        }
    else h=c.style.pixelHeight;

    ct.fillStyle='#ffffee';        /* 地の色をクリーム色に */
    ct.fillRect(0, 0, w, h);
    ct.strokeStyle='#ffdd00';      /* 線の色を山吹色に */
    ct.strokeRect(0, 0, w, h);

    /* 緑で四角を描く */
    ct.strokeStyle='#009900';      /* 線の色を緑に */
    ct.strokeRect(60, 30, 120, 120);

    /* 赤で円周を描く */
    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();                   /* 線で描く */
}

さて、上記のコードを対応しているウェブブラウザで見ると、以下のようになるでしょう。

<canvas>要素に対応している環境であれば、実際に表示させているサンプルもご覧頂くと良いでしょう。

JAVAスクリプトのコードについての解説。

スクリプトのコードについて解説します。

具体的な流れとしては、

  1. 文書が全て読み込まれたら、函数 demo()を呼び出すようにします。
  2. 函数 demo()では、キャンヴァスのノードを取得して画面をクリアしてから緑の四角形, 赤の円周そして青の三角形を描画します。

ですから、この処理で重要なのは、函数 demo()の処理と言う事になります。

以下順を追って解説しましょう。

1. キャンヴァスの下準備。

キャンヴァスの下準備となる部分は以下の箇所です。

function demo() {
    if (domo_onload) domo_onload();

    /* <canvas>要素ノードの取得 */
    var c=document.getElementById('CANVAS1');
    if (!c) return(false);

    /* IEだとこれがないと動作しない場合があります */
    try {
        c=G_vmlCanvasManager.initElement(c);
        }
    catch(e) {}
    /* ノードが取れたか判定 */
    if (!c.getContext) return(false);
    /* 描画用のオブジェクトを取得する */
    var ct=c.getContext('2d');

ここでは、以下の処理が行われております。

  1. 先ず、初めの行で、本来読み込み後に実行すべきタスクがあればそれを実行してからにします。
  2. 続いて、CANVAS1 と言うIDを持つ要素ノードを取得します。

    ここで注意すべき事として、インターネットエクスプローラでは取得したノードに対して初期化を実行しないとキャンヴァスとして使えない場合がある事です。このため、インターネットエクスプローラであれば、グーグル社のライブラリにある初期化メソッドを実行します。

  3. その上で、正しくノードが取れたかを確認します。キャンヴァスであれば、getContext()メソッドがある筈ですのでそれを確認します。
  4. 最後に、キャンヴァスの処理用のオブジェクトを取得します。

    これには、取得したキャンヴァスノードに対してgetContext()メソッドを実行します。

    現状では '2d' 文脈のみ有効ですので、引数は '2d' とします。

    以後はこのオブジェクトのプロパティやメソッドを用いる事で描画が可能になります。

2. 実際の描画。

続いて、キャンヴァスに描画を行います。

2.1. キャンヴァスのクリア。

先ず、キャンヴァスをクリーム色地にして、山吹色の枠線を付けます。

該当する部分のコードは以下のようになります。

    /* 画面の色を初期化する */
    var w,h;  /* 先ず、キャンヴァスの幅と高さを得る */
    if (!(w=c.style.pixelWidth)) {
        var s=document.defaultView.getComputedStyle(c, '');
        w=parseInt(s.width);
        h=parseInt(s.height);
        }
    else h=c.style.pixelHeight;

    ct.fillStyle='#ffffee';        /* 地の色をクリーム色に */
    ct.fillRect(0, 0, w, h);
    ct.strokeStyle='#ffdd00';      /* 線の色を山吹色に */
    ct.strokeRect(0, 0, w, h);

<canvas>要素関連のオブジェクトには、任意の色でクリアするメソッドが存在しない(※1)ので、キャンヴァス全体を好みの色の長方形で塗り潰す事で目的を果たす事となります。

そのため、取得したキャンヴァスノードの横幅と高さを算出し、それをもとに長方形を描画します。

  1. 先ず、原点(左上の隅)から算出した幅と高さでクリーム色の塗り潰した長方形を描きます。色は fillStyle プロパティで指定し、長方形の表示位置と大きさを fillRect() メソッドで指定します。
  2. 続いて、原点(左上の隅)から算出した幅と高さで山吹色の長方形枠線を描きます。色は strokeStyle プロパティで指定し、長方形の表示位置と大きさを strokeRect() メソッドで指定します。

ここで注意すべき事として、

と言う点に気を付けてください。塗り潰すか否かで stroke か fill かが違ってきます。

2.2. 緑の四角形の描画。

続いて、緑で四角形を描きます。これは、先ほどと殆ど同じようにやれば良いだけの話です。

参考までに、その部分のコードを示しておきます。

    /* 緑で四角を描く */
    ct.strokeStyle='#009900';      /* 線の色を緑に */
    ct.strokeRect(60, 30, 120, 120);

このように、長方形の場合はたった二行で済みます。

2.3. 赤い円周の描画。

次に、赤で円周を描きます。

コードは以下のようになっております。

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

今までの四角形の場合は特に必要はなかったのですが、円周の場合には、点から点への移動と言う形で描画を行っていきます(この概念をパスと言います)。

このため、以下のように手続きを行っていきます。

  1. 先ず、事前に beginPath() メソッドを実行して点のデータを初期化します。

    円周の描画指定を行う前にbeginPath() メソッドを実行して点のデータを初期化しておかないと、

    • それまでに描いた描画の影響を受けて変な線が描かれたり、
    • 逆に今まで描いてきた描画の色まで変わってしまう

    場合があります。

    ですから、円周を描くときは必ずその前に beginPath() メソッドで初期化するようにしてください。(※2)

  2. 続いて、strokeStyle プロパティで赤色を指定して、arc() メソッドで中心点, 半径, 描画開始角度, 描画終了角度及び描画方向を指定します。
  3. 最後に、stroke() メソッドで指定した円周を描画します。長方形の場合と違い、このメソッドを実行しないと何時まで経っても描画されませんので必ず最後に実行してください。
2.4. 青い三角形の描画。

最後に、青で三角形を描きましょう。

コードは以下のようになっている筈です。

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

三角形を描くメソッドは存在しないので、直線を繋いで三角形を描いていく事となりますが、直線も円周同様、点から点への移動と言うパスの概念を用いて描画を行います。

このため、以下のように手続きを行っていきます。

  1. 先ず、事前に beginPath() メソッドを実行して点のデータを初期化します。

    直線の描画指定を行う前にbeginPath() メソッドを実行して点のデータを初期化しておかないと、

    • それまでに描いた描画の影響を受けて変な線が描かれたり、
    • 逆に今まで描いてきた描画の色まで変わってしまう

    場合があります。

    ですから、直線を描くときは必ずその前に beginPath() メソッドで初期化するようにしてください。

  2. 続いて、strokeStyle プロパティで青色を指定します。
  3. そして、描画開始点(上中央)を moveTo() メソッドで指定し、以後開始点から右下への直線と、右下から左下への直線をそれぞれ lineTo() メソッドで描いて行きます。
  4. 三角形を描き上げるには三辺で描画開始点(上中央)に戻る訳ですが、最後の一辺は lineTo() メソッドを用いる代わりに closePath() メソッドを用いれば座標指定が省略出来ます。
  5. 最後に、stroke() メソッドで指定した直線を描画します。直線も円弧同様、このメソッドを実行しないと何時まで経っても描画されませんので必ず最後に実行してください。

まとめ。

今回のサンプルを総括しますと、<canvas>要素の使い方が見えてくるでしょう。

  1. 先ず、下準備として、キャンヴァスとなるノードを取得して、そこから必要なオブジェクトを取得し、初期化します。
  2. その上で必要な描画を行います。

今回はプログラムで描画を指定しておりますが、これをデータ化してやれば、Ajaxなどで動的にデータを受け取って描画する事も可能になるでしょう。

脚注。

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

marguerite.site@gmail.com