HTML5のCanvas 2Dを利用して図形を描く
HTML（ハイパー・テキスト・マークアップ言語）の最新の仕様であるHTML5にはCanvasという要素がある。この要素を利用すると、画像ファイルやFlash playerやJavaアプレットなどに頼らず、HTMLとCSSとJavaScriptだけで図形やアニメーションをウェブ・ページ上に描画することができるらしい。
必要なものはHTML5とCSSとJavaScriptに対応しているウェブ・ブラウザである。世界的に普及している主要なウェブ・ブラウザ（Google Chrome, Firefox, Opera, Safariなど）の最新版をインストールしていれば、基本的なことはできるようだ。
下準備
最初に、Canvas要素を埋め込んだHTML文書（.htmlという拡張子を持つテキストファイル）を作成した。HTMLはHTML5の仕様に則って記述した。そのファイルの内容は次のとおり。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Canvasを学ぶ</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <canvas id="canvas_figure" width="250" height="250"> あなたのブラウザはCanvas要素に対応していません。 </canvas> <script type="text/javascript" src="canvas_figure.js"></script> </body> </html>
canvas要素のid属性で指定した名前はJavaScriptのソースコードから参照するために使われるもの。canvas要素のwidthとheightでCanvasの描画範囲の大きさを指定した。widthが幅でheightが高さ。script要素を記述し、そのsrc属性にJavaScriptのソースファイル名を指定した。このファイルにJavaScriptでコードを記述してこのcanvas要素を制御する。
link要素で指定したstyle.cssファイルの中身は次のとおり：
canvas {
border:2px solid black;
}
二次元のグラフィックスを描いてみる
ここでは、HTML Canvas 2D ContextというAPIを利用して2次元のグラフィックスを描画してみる。そのためにまずエディタを起動し、canvas_figure.jsという名前のファイルを作成してhtmlファイルと同じディレクトリに保存した。canvas_figure.jsには次のとおりにJavaScriptのコードを記述した。
var canvas = document.getElementById("canvas_figure");
var context = canvas.getContext("2d");
varは変数の宣言を示す予約語で、canvasやcontextという変数を用意した。=は代入演算子で、右辺を左辺の変数に代入する役目を果たす。;を忘れないこと。ここではdocumentオブジェクトのgetElementById()というメソッドを使って先ほど指定しておいたcanvas_figureというid名を持ったcanvas要素を取得し、それをcanvasという変数に代入した。２行目ではgetContext()メソッドを使ってCanvasRenderingContext2Dオブジェクトを得てcontextという変数に代入した。これでHTML Canvas 2D Context, Level 2のAPIを利用する準備ができた。
矩形と円を描くためのコード。
var canvas = document.getElementById("canvas_figure");
var context = canvas.getContext("2d");
//四角形を描く
context.beginPath(); //パス（軌道）のリセット
context.rect(1, 1, 70, 100); //矩形サブパス
context.lineWidth = '2'; //線幅
context.strokeStyle = 'blue'; //線色
context.stroke(); //描画
//四角形を描いて塗りつぶす
context.beginPath(); //パス（軌道）のリセット
context.rect(120, 1, 100, 70); //矩形サブパス
context.lineWidth = '2'; //線幅
context.strokeStyle = 'black'; //線色
context.stroke(); //描画
context.fillStyle = 'pink'; //塗りつぶし色
context.fill(); //塗りつぶす
//三角形を描いて塗りつぶす
context.beginPath(); //パス（軌道）のリセット
context.moveTo(1, 120); //始点の定義
context.lineTo(1, 190); //対辺を引く
context.lineTo(90, 190); //隣辺を引く
context.lineTo(1, 120); //斜辺を引く
context.closePath(); //パスを閉じる
context.strokeStyle = 'black';
context.stroke();
context.fillStyle = 'green';
context.fill();
//円を描く
context.beginPath();
context.arc(150, 150, 40, 0, Math.PI*2, true); //円のサブパス作成
context.closePath(); //パスを閉じる
context.lineWidth = '2';
context.strokeStyle = 'black';
context.stroke();
context.fillStyle = 'yellow';
context.fill();
この結果はこうなった。
まとめ
- パス（軌道、通り道、進路）
- 図形の見えない下書きのようなもの。この見えない設計図に基づいて図形が実際に描かれる。1つのキャンバスには1つのカレントパスがあり、その中に複数のサブパスを設計できる構造になっている。
- beginPath()
- カレントパスをリセットする。その際、サブパスもすべて消去する。パスを使って2D図形を描くときに最初に使うお決まりのメソッド。見えない下書きが消されるだけなので描画された図形が消えるわけではない。
- rect(x, y, w, h)
- 矩形のサブパスを作成する。引数のxとyで位置を、wで幅を、hで高さをdouble型数値で指定する。座標系は左上端が(0,0)となる。時計回り。サブパスは自動的にふさがれる。
- arc(x, y, r, s, e, b)
- 円弧のサブパスを作成する。引数のxとyで円の中心点の位置を、rで半径を、sで円弧を開始する角度を、eで円弧を終了する角度を、bはオプションで、円弧を時計回りに引くときはfalseを、反時計回りに引くときはtrueを指定する。デフォルトではfalseになる。座標系は左上端が(0,0)となる。
- closePath()
- 開いているパスを明示的にふさぐ。lineToメソッドを使って描いた図形や円弧の場合にはパスは自動的にふさがらないので、ふさぐ必要のあるときはこのメソッドを使う。
- moveTo(x, y)
- 直線のサブパスの始点を座標で指定する。xが縦軸、yが横軸。いずれもdouble型。座標系は左上端が(0,0)となる。
- lineTo(x, y)
- 直線のサブパスを作成する。引数は座標。xが縦軸、yが横軸。いずれもdouble型。座標系は左上端が(0,0)となる。
- lineWidth
- 線分の幅をピクセル値で指定する。
- strokeStyle
- 線分の色を指定する。
- fillStyle
- 塗りつぶす色を指定する。
- stroke()
- 指定されたパスに基づいてその線分を描画する。
- fill()
- 指定されたパスに基づいてその中身を塗りつぶす。
コメント
コメントを投稿