HTML5 - Canvas

Canvas

HTML5では新要素としてCanvas要素が追加されました。この要素はグラフィックを描画する領域を示すことができ、実際に描画するにはJavaScriptを用います。Canvasは自由度が高く、横スクロールシューティングゲーム(JS-WARS)や、3D空間を移動するゲーム(3D Walker)などに応用されていたりもします。

右の図をご覧になると分かる通り、Canvas描画されるグラフィックは、左上を(0, 0)とした座標系で描画されます。またこの図自体もCanvas要素を用いて描画されています。

図のソースコードは、下のボタンを押すと表示されます。

// 各変数の定義と値の代入
	var origin_x = 40;  // 原点
	var origin_y = 40;
	var graph_w  = 260; // 各座標軸
	var graph_h  = 260;
	var rect_x   = 100; // 四角形の座標、大きさ
	var rect_y   = 100;
	var rect_w   = 100;
	var rect_h   = 100;

// 座標を囲む灰色の線の描画
	cx.beginPath();
	cx.strokeStyle = 'rgb(178, 178, 178)';
	cx.moveTo(graph_w, origin_y);
	cx.lineTo(graph_w, graph_h);
	cx.lineTo(origin_x, graph_h);
	cx.stroke();
	
// 緑色の四角形の描画
	cx.beginPath();
	cx.rect(rect_x, rect_y, rect_w, rect_h);
	cx.fillStyle = "rgb(100, 230, 100)";
	cx.fill();
	
// 各種スタイルの初期化
	cx.strokeStyle = "rgb(0, 0, 0)";
	cx.fillStyle   = "rgb(0, 0, 0)";
	cx.font        = "bold 15px 'ＭＳ Ｐゴシック'";
	cx.fillText("0", origin_x - 10, origin_y - 3);

// x軸の描画
	cx.beginPath();	
	cx.moveTo(origin_x, origin_y);
	cx.lineTo(graph_w, origin_y);
	cx.lineTo(graph_w - 10, origin_y - 5);
	cx.moveTo(graph_w, origin_y);
	cx.lineTo(graph_w - 10, origin_y + 5);
	cx.fillText("X", graph_w + 5, origin_y);
	cx.stroke()

// y軸の描画
	cx.beginPath();
	cx.moveTo(origin_x, origin_y);
	cx.lineTo(origin_x, graph_h);
	cx.lineTo(origin_x + 5, graph_h - 10);
	cx.moveTo(origin_x, graph_h);
	cx.lineTo(origin_x - 5, graph_h - 10);
	cx.fillText("Y", origin_x - 10, graph_h + 15);
	cx.stroke();

// スタイルの初期化（青色）
	cx.strokeStyle = "rgb(100, 100, 256)";
	cx.fillStyle   = "rgb(100, 100, 256)";

// 四角形のx座標を示す、青い線
	cx.beginPath();
	cx.moveTo(origin_x, rect_y);
	cx.lineTo(rect_x, rect_y);
	cx.lineTo(rect_x - 10, rect_y + 6);
	cx.moveTo(rect_x, rect_y);
	cx.lineTo(rect_x - 10, rect_y - 6);
	cx.fillText("x", (rect_x - origin_x)/2 + origin_x, rect_y + 15);
	cx.stroke();

// 四角形のy座標を示す、青い線
	cx.beginPath();
	cx.moveTo(rect_x, origin_y);
	cx.lineTo(rect_x, rect_y);
	cx.lineTo(rect_x + 5, rect_y - 10);
	cx.moveTo(rect_x, rect_y);
	cx.lineTo(rect_x - 5, rect_y - 10);
	cx.fillText("y", rect_x + 10, (rect_y - origin_y)/2 + origin_y);
	cx.stroke();

// スタイルの初期化（赤色）
	cx.strokeStyle = "rgb(256, 100, 100)";
	cx.fillStyle   = "rgb(256, 100, 100)";

// 緑の四角形の横幅を示す、赤い線
	cx.beginPath();
	cx.moveTo(rect_x, rect_y);
	cx.lineTo(rect_x + rect_w, rect_y);
	cx.lineTo(rect_x + rect_w - 10, rect_y - 5);
	cx.moveTo(rect_x + rect_w, rect_y);
	cx.lineTo(rect_x + rect_w - 10, rect_y + 5);
	cx.fillText("w", rect_w/2 + rect_x, rect_y - 5);
	cx.stroke();

// 緑の四角形の縦幅を示す、赤い線
	cx.beginPath();
	cx.moveTo(rect_x, rect_y);
	cx.lineTo(rect_x, rect_y + rect_h);
	cx.lineTo(rect_x + 5, rect_y + rect_h - 10);
	cx.moveTo(rect_x, rect_y + rect_h);
	cx.lineTo(rect_x - 5, rect_y + rect_h - 10);
	cx.fillText("h", rect_x - 15, rect_h/2 + rect_y);
	cx.stroke();

注意事項

各ページではCanvas要素のDOMオブジェクトの取得及び、描画コンテキストを取得するコードは省略してあります。またonloadでの読み込みも省略してありますので、注意して下さい。JavaScriptに書き込むべきこれらのコードは以下の通りで、ここではcxという変数が描画コンテキストを表わします。

onload = function() {
	  draw();
};

function draw() {
// Canvas要素のDOMオブジェクトの取得
	var canvas = document.getElementById("rect");
// 描画コンテキストの取得
	var cx = canvas.getContext("2d");

// 四角形の描画
	cx.beginPath();
	cx.rect(10, 10, 50, 50);
	cx.stroke();
}

また、これに対してHTMLソースにおけるCanvas要素は以下の通りになります。