HTMLでCanvas領域を作り、JavaScriptで描画する方法/Canvasタグの使い方

paint IT

CanavsはHTML5から導入された新しいタグで、JavaScriptでこの中に描画する下地を作ることが出来ます。

Advertisements

Canvasタグの使い方

単体で仕事をするわけではないので記述はいつもの感じです。divやtableと同じように「場」を設定します。

描画領域の指定
<canvas></canvas>

Canvasはデフォルトでheight:150px、width:300pxのサイズを持ちます。自分でwidthやheigthを設定することももちろん可能です。ここではborderとidだけ設定して、まずは領域を確保します。
代替コンテンツ

ボタンを押すと四角形が描画されます。

現在は大体のブラウザに対応しているはずですが、IE9以前などではCanvasは表示されないようです。代替コンテンツを用意する場合は、Canvasタグの内側に記述すれば、Canvasが表示できない場合のみ表示されます(上のキャンバスにも埋め込んでいます。「代替コンテンツ」がボタンの上に表示されているなら、あなたが今使っているブラウザはCanvas未対応です)。

<canvas id = "testcanvas">(任意で代替コンテンツ)</canvas>

CanvasにJavaScriptで描画する下準備

JavaScriptから描画するには、まず「何に描画するのか」を決める必要があります。そのためにhtml側でIDを指定していますので、これをJS側で取得します。

//JavaScript_canvasを変数「cvs」に代入
var cvs = document.getElementById("testcanvas");

getElementById()はhtmlの中で指定したIDを持つ要素を見つけ出し、その内容に干渉するために要素を変数に代入するメソッドです。このメソッドについて詳しく知りたい方は、下記をご参照ください。

JavaScriptからHTMLやCSSを変更する方法/getElementById()メソッドの使い方
あらかじめHTMLでボタンや画像に任意のID等を付けておいて、それをJavaScriptで読み取ることでJavaScriptとHTML/CSSの橋渡しをすることができます。

さらに、キャンバスを2次元画像として使うのか、3次元画像として使うのか、みたいなのを決めないといけません。Canvasはなんでも描けるわけではなく、描く内容によって下地(描画コンテキスト)を変更する必要があります。
とりあえず2次元で描きたいので、次のように指定します。

2次元画像の下地を設定
要素.getContext(‘2d’);

ややこしいんですが、先ほど取得したCanvasタグを代入した変数に2dの下地をあてがったものにまた別の名前をつけます。

var byouga = cvs.getContext('2d');

こうして完成したbyougaに対してメソッドを用いることで、ようやくキャンバスに変更が及ぼされます。

CanvasにJavaScriptで描画してみる

読み取ったキャンバスに対して描画するには、ここでは次のようなメソッドを使います。

塗りつぶした四角形を描画
fillRect(x,y,w,h);
x=始点(横) y=始点(縦) w=width h=height

Canavsの左上から見て横に何pxか、縦に何pxか、そこから横にどの程度のサイズか、縦にどの程度のサイズかを描画し、四角形の位置とサイズを決定します。

JavaScriptでCanvasに塗り潰した長方形(矩形)を描く・色を変える方法/fillRectメソッド・fillStyleプロパティの使い方
Canvasに長方形・四角形を描く方法として、デフォルトでいくつかのメソッドが用意されています。ここではそのうち一色で塗り潰した四角を描くfillRectメソッドに言及しています。 fillRectメソッドの使い方 Canvas領域の作...

まとめると、今回使用したコードは次のようになります(ここではhtmlの中にJavaScriptを書いてますが、外部ファイルに書く方法が推奨されます)。

<!-- html -->
<canvas id="testcanvas" style="border: solid 1px black;">代替コンテンツ</canvas>
<input type="button" value="実行" onclick="canvasClick();"/>

//JavaScript
<script>
function canvasClick() {
//htmlのcanvas要素をJS側のcvsに代入
var cvs = document.getElementById('testcanvas');
//2dコンテキストを当てはめたcvsをbyougaに代入
var byouga = cvs.getContext('2d');
//byougaに対して四角形(矩形)を描画
byouga.fillRect(30, 20, 50, 30);
}
</script>

Canvasタグの設置と描画の基本については以上です。

HTMLの便利な使い方・タグ逆引きリファレンス
ウェブページ作成言語として常に熱い需要を持つHTML関連のまとめページです。 勉強しながらちょっとずつ増やしていく所存です。
JavaScriptの使い方・メソッド・プロパティまとめ
HTML/CSSとセットでフロントエンドエンジニア三種の神器のひとつ、JavaScript系の記事まとめです。

コメント