HTML5における<canvas>タグの使い方

今まで、webサイトで図形を描画するには、PNG、JPEG、GIFなどの画像データかFlashを埋め込むといった方法に限られていました。どれも、データを別に用意する必要があります。

しかし、HTML5で登場した<canvas>タグは、HTMLとJavaScriptでビットマップ画像を描画することができる要素です。今回は、HTML5における<canvas>タグの使い方についてご紹介します。

HTML5における<canvas>タグの使い方

使い方は非常にシンプルで、図形を描画したい場所に<canvas>タグを設置し、設置した<canvas>タグと関連付けてJaaScriptで処理を記述するだけです。

基本的に設置の時は以下のHTMLを記述するだけです。

<canvas id="sample">
</canvas>

widthとheightで図形の大きさを指定することも多いです。その場合の記述例です。

<canvas id="sample" width="" height="">
</canvas>

HTMLだけでは、何も表示されないので、設置したHTMLと関連付けてjavascriptで処理を記述して使用してください。

サンプルで、キャンバスを取得する際のJavaScriptの記述です。getElementByIdメソッドという、因数にid属性値を指定して、好きな要素を抜き出すものを利用します。

var canvas = document.getElementById('sample');

サンプルコードです。今回は、四角形を描画してみています。rectと言うのが四角形のことで、strokeRectで四角形の線を描画する指示を出しています。

<head>
<script>
onload = function() {
    kihon();
    pie();
};
 
function kihon() {
    var cnvs = document.getElementById('sample');
    var ctx = cnvs.getContext('2d');
    ctx.strokeStyle = 'rgb(255,0,255)';
    ctx.strokeRect( 0, 0, 100,100);

}
</script>
</head>
 
<body>
<canvas id="sample" width=“500” height=“500">
</canvas>
</body>

表示サンプルです。

スクリーンショット 2016-06-30 13.35.25

基本的な記述の仕方は上記のようになりますので、カスタマイズして使用してください。


イベント