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> </head> <body> <canvas id="canvas_rectangle" width="250" height="250"> あなたのブラウザはCanvas要素に対応していません。 </canvas> <script type="text/javascript" src="canvas_rectangle.js"></script> </body> </html>
canvas要素のid属性で指定した名前はJavaScriptのソースコードから参照するために使われるもの。canvas要素のwidthとheightでCanvasの描画範囲の大きさを指定した。widthが幅でheightが高さ。script要素を記述し、そのsrc属性にJavaScriptのソースファイル名を指定した。このファイルにJavaScriptでコードを記述してこのcanvas要素を制御する。
2次元のグラフィックスを描いてみる
ここでは、HTML Canvas 2D ContextというAPIを利用して2次元のグラフィックスを描画してみる。そのためにまずエディタを起動し、canvas_rectangle.jsという名前のファイルを作成してhtmlファイルと同じディレクトリに保存した。canvas_rectangle.jsには次のとおりにJavaScriptのコードを記述した。
var canvas = document.getElementById("canvas_rectangle");
var context = canvas.getContext("2d");
varは変数の宣言を示す予約語で、canvasやcontextという変数を用意した。=は代入演算子で、右辺を左辺の変数に代入する役目を果たす。行末の;を忘れないこと。
ここではdocumentオブジェクトのgetElementById()というメソッドを使って先ほど指定しておいたcanvas_rectangleというid名を持ったcanvas要素を取得し、それをcanvasという変数に代入した。２行目ではgetContext()メソッドを使ってCanvasRenderingContext2Dオブジェクトを得てcontextという変数に代入した。これでHTML Canvas 2D Context, Level 2のAPIを利用する準備ができた。
試しに矩形を描画するメソッドであるstrokeRect()とfillRect()を使ってみた。strokeRect()は線だけの矩形、fillRect()は黒く塗りつぶした矩形を描く。canvas_rectangle.jsファイルに次のコードを追加してみた。繰り返し文の一種であるwhile文を使った。
var canvas = document.getElementById("canvas_rectangle");
var context = canvas.getContext("2d");
var x = 0, y = 0;
while(x <= 100) {
context.strokeRect(x, y, 100, 100);
x += 10;
y += 10;
}
context.fillRect(110, 110, 100, 100);
どちらのメソッドの引数も（x軸, y軸, 幅, 高さ）を数値で指定する。座標系は左上端が基点の(0,0)となる。canvas要素の属性に設定した幅と高さの範囲内で座標を指定しないとはみ出てしまうので要注意。
xとyという変数を宣言して共に0を代入し、xとyにそれぞれ10を加算していき、while文でxの値が100以下のあいだそれを繰り返し処理するようにした。while文から抜けだした後はfillRect()で黒塗りの矩形を描画した。
その結果は下のほうになった。
x軸の値だけを変えた場合は次のようなコードになる。
var canvas = document.getElementById("canvas_rectangle");
var context = canvas.getContext("2d");
var x = 0;
while(x <= 100) {
context.strokeRect(x, 0, 100, 100);
x += 10;
}
context.fillRect(110, 0, 100, 100);
その結果は次のようになった。
y軸の値だけを変えた場合は次のようなコードになる。
var canvas = document.getElementById("canvas_rectangle");
var context = canvas.getContext("2d");
var y = 0;
while(y <= 100) {
context.strokeRect(0, y, 100, 100);
y += 10;
}
context.fillRect(110, 0, 100, 100);
その結果は次のようになった。
これらの結果から、x軸は左への移動、y軸は下への移動を表すことが分かった。
まとめ
- strokeRect(x, y, w, h)
- 枠線だけの矩形を描く。xとyは座標。xが横、yが縦。wは矩形の幅、hは矩形の高さ。引数はすべてdouble型。座標系は左上端が(0,0)となる。
- fillRect(x, y, w, h)
- 黒く塗りつぶした矩形を描く。xとyは座標。xが横、yが縦。wは矩形の幅、hは矩形の高さ。引数はすべてdouble型。座標系は左上端が(0,0)となる。
- clearRect(x, y, w, h)
- 矩形を消去する。xとyは座標。xが横、yが縦。wは矩形の幅、hは矩形の高さ。引数はすべてdouble型。座標系は左上端が(0,0)となる。
コメント
コメントを投稿