それでは、実際に簡単なサンプルを描いてみましょう。
<canvas>要素はHTML 5で導入される予定の要素ですので、当然HTML 5を文書型としなければなりません。
そこで、今、以下のようなHTMLを記述するものとします。
<!DOCTYPE html><html lang="ja"><head><meta charset="shift_jis"><title><canvas>要素のサンプル</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><canvas>要素のサンプル。</h1><figure><dd><canvas id="CANVAS1" width="240" height="180">ご覧の環境では<canvas>要素に対応していないようですので、<a type="image/gif" href="Canvas_in_HTML5-1.GIF">表示サンプル(GIF画像)</a>をご覧ください。</canvas></dd></figure></article></body></html>
<canvas>要素が、実際にスクリプトで操作される領域となります。
<canvas>要素には幾つか属性が定義されておりますが、以下の属性を指定しておくと良いでしょう。
<canvas>要素は、キャンヴァスをサポートしていないウェブブラウザ向けの代替コンテンツを内容に持てます。
内容となる代替コンテンツは<canvas>要素の開始・終了タグを取り除いても文法がおかしくならないようなものに限られます。
注意したい事として、<canvas>要素の内容は<canvas>要素を全くサポートしていない場合に限り表示される事です。
この事については、<canvas>要素を使う前に内の<canvas>要素のアクセシビリティ上の問題で解説しましたが、<canvas>要素に対応しているブラウザで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>要素に対応している環境であれば、実際に表示させているサンプルもご覧頂くと良いでしょう。
スクリプトのコードについて解説します。
具体的な流れとしては、
ですから、この処理で重要なのは、函数 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');
ここでは、以下の処理が行われております。
続いて、CANVAS1 と言うIDを持つ要素ノードを取得します。
ここで注意すべき事として、インターネットエクスプローラでは取得したノードに対して初期化を実行しないとキャンヴァスとして使えない場合がある事です。このため、インターネットエクスプローラであれば、グーグル社のライブラリにある初期化メソッドを実行します。
最後に、キャンヴァスの処理用のオブジェクトを取得します。
これには、取得したキャンヴァスノードに対してgetContext()メソッドを実行します。
現状では '2d' 文脈のみ有効ですので、引数は '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);
<canvas>要素関連のオブジェクトには、任意の色でクリアするメソッドが存在しない(※1)ので、キャンヴァス全体を好みの色の長方形で塗り潰す事で目的を果たす事となります。
そのため、取得したキャンヴァスノードの横幅と高さを算出し、それをもとに長方形を描画します。
ここで注意すべき事として、
strokeStyle プロパティで指定して実際の描画は strokeRect() メソッドを用いるのに対し、fillStyle プロパティで指定して実際の描画は fillRect() メソッドを用いるのに対し、と言う点に気を付けてください。塗り潰すか否かで stroke か fill かが違ってきます。
続いて、緑で四角形を描きます。これは、先ほどと殆ど同じようにやれば良いだけの話です。
参考までに、その部分のコードを示しておきます。
/* 緑で四角を描く */
ct.strokeStyle='#009900'; /* 線の色を緑に */
ct.strokeRect(60, 30, 120, 120);
このように、長方形の場合はたった二行で済みます。
stroke を fill に変更します。次に、赤で円周を描きます。
コードは以下のようになっております。
/* 赤で円周を描く */
ct.beginPath(); /* 描画開始 */
ct.strokeStyle='#ff0000'; /* 線の色を赤に */
ct.arc(120, 90, 70, 0, Math.PI*2, false);
ct.stroke(); /* 線で描く */
今までの四角形の場合は特に必要はなかったのですが、円周の場合には、点から点への移動と言う形で描画を行っていきます(この概念をパスと言います)。
このため、以下のように手続きを行っていきます。
先ず、事前に beginPath() メソッドを実行して点のデータを初期化します。
円周の描画指定を行う前にbeginPath() メソッドを実行して点のデータを初期化しておかないと、
場合があります。
ですから、円周を描くときは必ずその前に beginPath() メソッドで初期化するようにしてください。(※2)
続いて、strokeStyle プロパティで赤色を指定して、arc() メソッドで中心点, 半径, 描画開始角度, 描画終了角度及び描画方向を指定します。
最後に、stroke() メソッドで指定した円周を描画します。長方形の場合と違い、このメソッドを実行しないと何時まで経っても描画されませんので必ず最後に実行してください。
最後に、青で三角形を描きましょう。
コードは以下のようになっている筈です。
/* 青で三角を描く */
ct.beginPath(); /* 描画開始 */
ct.strokeStyle='#0000ff'; /* 線の色を青に */
ct.moveTo(120, 10);
ct.lineTo(200, 150);
ct.lineTo(40, 150);
ct.closePath();
ct.stroke(); /* 線で描く */
}
三角形を描くメソッドは存在しないので、直線を繋いで三角形を描いていく事となりますが、直線も円周同様、点から点への移動と言うパスの概念を用いて描画を行います。
このため、以下のように手続きを行っていきます。
先ず、事前に beginPath() メソッドを実行して点のデータを初期化します。
直線の描画指定を行う前にbeginPath() メソッドを実行して点のデータを初期化しておかないと、
場合があります。
ですから、直線を描くときは必ずその前に beginPath() メソッドで初期化するようにしてください。
そして、描画開始点(上中央)を moveTo() メソッドで指定し、以後開始点から右下への直線と、右下から左下への直線をそれぞれ lineTo() メソッドで描いて行きます。
三角形を描き上げるには三辺で描画開始点(上中央)に戻る訳ですが、最後の一辺は lineTo() メソッドを用いる代わりに closePath() メソッドを用いれば座標指定が省略出来ます。
最後に、stroke() メソッドで指定した直線を描画します。直線も円弧同様、このメソッドを実行しないと何時まで経っても描画されませんので必ず最後に実行してください。
今回のサンプルを総括しますと、<canvas>要素の使い方が見えてくるでしょう。
その上で必要な描画を行います。
円周及び長方形以外の直線からなる図形は、点と点を繋ぐパスの概念で成り立っているので、
続いて色を指定してから、以下の描画指定を行う。
直線からなる図形は以下のステップを実行する：
と言う処理を必要に応じて繰り返します。
今回はプログラムで描画を指定しておりますが、これをデータ化してやれば、Ajaxなどで動的にデータを受け取って描画する事も可能になるでしょう。
2. 4. beginPath() メソッドを実行すべきなのは主に以下の場合となります。
