HTML5 Canvas の基本

ここでは HTML5 で導入される Canvas について説明します。

以前は Firefox で Canvas が、IE では VML などが使えました。

HTML5 では結局、Canvas に一本化されたということになります。

この記事では Canvas の基本的な使い方を見ていきます。

実際のところは色のグラデーションや、線の接続方法とか丸みといった細かいところも制御可能なのですが、ここでは基本的な操作をみていく、ということです。

HTML5 - Canvas の基本的な利用方法

座標

canvas の座標は左上を原点として、右水平方向に x 軸を、下方向に y 軸をとります。

矩形の描画

strokeRect メソッドを利用することによって矩形 (Rectangle) を描画します。引数は矩形の左上座標と幅と高さを指定します。

上の canvas 要素に矩形を描画したサンプルコードは次の通りです。

var c, ctx, i;
c = document.getElementById('c1');
ctx = c.getContext('2d');

ctx.strokeRect(10,10,150,150);
ctx.strokeRect(20,20,150,150);

パスの描画

線はパス (path) として描きます。

moveTo メソッドで線の始点を指定し、lineTo メソッドで線の終点を指定します。最後に stroke メソッドで実際にキャンバスに描画します。

var c, ctx, i;
c = document.getElementById('c2');
ctx = c.getContext('2d');

for(i=1;i<20;i++){
	ctx.moveTo(i*10, 0);
	ctx.lineTo(i*10, 200);
}

for(i=1;i<20;i++){
	ctx.moveTo(0, i*10);
	ctx.lineTo(200, i*10);
}

ctx.strokeStyle = '#f00'; // Color
ctx.lineWidth = 1;
ctx.stroke();

canvas に文字を書く

文字はフォントを font に属性を指定して、fillText で実際に書く文字と場所を指定して書きます。

実際のところ align やベースラインの指定など細かい制御ができますので、また別のページで細かく書きたいと思います。

上の canvas 要素に文字を書いたサンプルコードは次の通りです。

var c, ctx, i;
c = document.getElementById('c3');
ctx = c.getContext('2d');

ctx.font = 'bold 50px sans-serif';
ctx.fillText('Hello,', 10, 50);
ctx.font = 'italic 50px serif';
ctx.fillText('World!', 20, 100);

画像の描画

drawImage メソッドを使うと img 要素を canvas の特定の位置に描画することが可能です。

このとき、元の画像からサイズを変えて canvas に描画したり、元の画像の一部を表示したりという操作もできます。

上の canvas 要素に img を表示したサンプルコードは次の通りです。

c = document.getElementById('c4');
ctx = c.getContext('2d');

var img;
img = document.createElement('img');
img.setAttribute('src','img/ramen-1.jpg');
img.onload = function(){
	ctx.drawImage(img, 10, 10);
	ctx.drawImage(img, 30, 30);
	ctx.drawImage(img, 50, 50);
}

ちなみに、ここで img の onload イベントで描画するというのは canvas の要求としての必須項目ではありませんが、画像のロード前に drawImage を呼ぶと単に失敗して何も描画されないだけ、ということがあるようなので追加しています。

(注) 写真のラーメンはロサンゼルスの Yamadaya という日系のラーメン屋さんの「とんこつ醤油」です :-)