Canvasに図形を描画する手順
実際にCanvasを使って図形を描画する手順を紹介しましょう。
1．ExplorerCanvasライブラリを読み込む
まず、ブラウザーがIEの場合にもCanvasを使えるようにするため、ExplorerCanvasライブラリを読み込みます。以下のように条件付きコメントの記法を使えば、ブラウザーがIEの場合だけ読み込まれます（HTMLのヘッダー部分に追記します）。
<!--[if IE]><script type="text/javascript" src="excanvas.js"></script><![endif]-->
2．canvas要素を追加する
次に、HTMLのボディ部分、図形を表示したい位置に、canvas要素を追加します。canvas要素は以下のように書きます。
<canvas id="ID" width="幅" height="高さ"></canvas>
widthとheightの属性で、Canvasの幅と高さを指定します。また、後でJavaScriptを使ってcanvas要素を操作するため、要素に任意のID名を割り当てておきます。
3．JavaScriptで描画する
次に、Canvasに描画するためのJavaScriptをHTMLに追加します。以下が基本的な骨組みです。
window.onload = function() {
var canvas = document.getElementById('HTML中のcanvas要素のID');
if (canvas.getContext) {
var context = canvas.getContext('2d');
描画関連のメソッドやプロパティ
}
};
Canvasに描画するには、「コンテキスト」というオブジェクトを取得し、そのオブジェクトのメソッドやプロパティを使います。コンテキストは、要素の「getContext」というメソッドで取得できます（ソースコードの4行目）。また、描画関係には、以下のようなメソッド／プロパティがあります。
●描画関係のメソッド（主なもの）
| メソッド | 内容 |
|---|---|
| beginPath() | パスの開始 |
| closePath() | パスの終了 |
| moveTo(x, y) | 線を引き始める位置を(x, y)に移動する |
| lineTo(x, y) | 線を引く |
| stroke() | パスの描画 |
| fill() | パス内部を塗りつぶす |
| strokeRect(x, y, w, h) | (x, y)を左上とし、幅w／高さhの四角を描く |
| fillRect(x, y, w, h) | (x, y)を左上とし、幅w／高さhの四角を描いて、内部を塗りつぶす |
| arc(x, y, s, e, c) | (x, y)を中心とし、開始角s／終了角eの円弧を描く |
●描画関係の主なプロパティ（主なもの）
| プロパティ | 内容 |
|---|---|
| strokeStyle | 線の色 |
| fillStyle | 塗りつぶしの色 |
| globalAlpha | 透明度 |
| lineWidth | 線の幅 |
次のソースコードは、冒頭で紹介した簡単な折れ線グラフを描くサンプルです。ブラウザーでの実際の表示例は、筆者のWebサイト（http://www.h-fj.com/ascii/canvas/sample1.html）で確認できますので、ページのソースコードも併せて参照してください。
window.onload = function() {
var canvas = document.getElementById('graph');
if (canvas.getContext) {
var ctx = canvas.getContext('2d');
// 折れ線の座標
var points = [ { x : 20, y : 150 },
{ x : 85, y : 100 },
{ x : 150, y : 120 },
{ x : 205, y : 170 },
{ x : 280, y : 110 } ];
// 線の色を黒にする
ctx.strokeStyle = "#000000";
// X軸とY軸を描く
ctx.beginPath();
ctx.moveTo(20, 20);
ctx.lineTo(20, 280);
ctx.lineTo(280, 280);
ctx.stroke();
// 線の色を赤にする
ctx.strokeStyle = "#ff0000";
// 折れ線グラフを描く
ctx.beginPath();
for (i = 0, j = points.length; i < j; i++) {
if (i == 0) {
ctx.moveTo(points[i].x, points[i].y);
}
else {
ctx.lineTo(points[i].x, points[i].y);
}
}
ctx.stroke();
}
};
