難しいことは置いといて、魅力的なHTMLの機能「Canvas」をイチからザックリと勉強していきましょう！
HTML5 Canvasとは？
Webページを構成するHTMLの機能一つで、HTMLとJavaScriptを用いて、絵やアニメーションを描画することができます。
「HTML5 Canvas」で図やアニメーション描画！ 「HTML5 Canvas」は「Flash」代わりになる？
この記事によるとこの前サポートが終了してしまった「Flash」の代わりとなるべく機能が盛りだくさんということですね！
Adobeの「Animate」（昔はFlash）も今はこの「HTML5 Canvas」の技術をベースにアニメーションが作られています。
さっそく触ってみよう！
準備
HTML
まず準備としてHTMLを作ります。
メモ帳などでいいので、以下のように打ち込んで、「CanvasEx1.html」という拡張子付きのファイル名で保存してください。
CanvasEx1.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Canvas Ex1</title>
</head>
<body>
<div style="position: absolute; top: 50px; left: 50px;">
<canvas id="canvas" width="500" height="500">
Your browser does not support the HTML 5 Canvas.
</canvas>
</div>
</body>
</html>
これで、絵を描くところでいう、画用紙を用意しました！というところまで来ました。
<div style="position: absolute; top: 50px; left: 50px;">
ここでは部分的にCSSで表示する位置をしています。画面左上から少し余白がある状態です。
<canvas id="canvas" width="500" height="500">
Your browser does not support the HTML 5 Canvas.
</canvas>
続いてこの<canvas>タグにid(画用紙の名前)、width（画用紙の幅）、height（画用紙の高さ）を入力します。単位はpx（ピクセル）になっています。
今回は横500px,縦500pxで正方形の描画領域となっています。
<canvas>と</canvas>の間にはブラウザがCanvasを表示するのに対応していないときに表示するテキストを入力します。
JavaScript
次に先ほど作ったHTMLの<body>の中に図形を描け！と指示するためのJavaScriptを書き加えます。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Canvas Ex1</title>
</head>
<body>
<div style="position: absolute; top: 50px; left: 50px;">
<canvas id="canvas" width="500" height="500">
Your browser does not support the HTML 5 Canvas.
</canvas>
</div>
<script>
var theCanvas=document.getElementById("canvas");
var context=theCanvas.getContext("2d");
function drawScreen(){
//ここに図形を描く命令を描く
};
drawScreen();
</script>
</body>
</html>
これで、絵を描くところでいう、ペンを持っていざ描くぞ！というところまで来ました。
var theCanvas=document.getElementById("canvas");
ここで<canvas>タグのidを指定して、<canvas>の要素の情報をJavaScript側のtheCanvasというオブジェクトに渡してあげます。
var context=theCanvas.getContext("2d");
次にcontextという図を描くために使う道具箱のようなものも定義しておきます。
function drawScreen(){
//ここに図形を描く命令を描く
}
drawScreen();
最後に、drawScreen()の中に、図形を描く命令を入れていき、それを実行することによって、いろいろな図形を描くことができるようになります。
これで準備は終わりです！
長方形を描いてみる！
ここで試しにいろいろな長方形を描いてみましょう！
fillRect
単色で塗りつぶされた長方形を描きます。
drawScreen()の中に以下の命令を加えてみましょう。
context.fillStyle="red";
context.fillRect(10,10,100,100);
そして、このHTMLを保存して、chromeなどのブラウザで開いてみましょう。
画面の左上に赤い長方形が表示されていると思います！
context.fillStyle=" 色 "で塗りつぶす色を決めて、
context.fillRect(図形左上のx座標, 図形左上のy座標, 図形の幅, 図形の高さ)で塗りつぶす長方形の位置大きさを決めています。単位はpx（ピクセル）です。
StrokeRect
次に単色の長方形の輪郭を描いてみます。
drawScreen()の中に以下の命令を加えてみましょう。
context.strokeStyle="red";
context.lineWidth=2;
context.strokeRect(120,10,100,100);
書き加えて、ブラウザを再読み込みしてみると、先ほどの長方形の右側に長方形の輪郭が表示されていると思います。
context.strokeStyle=" 色 "で輪郭の色を決めて、
context.lineWidth=線の太さ(px)で輪郭の線の太さをきめ、
context.strokeRect(図形左上のx座標, 図形左上のy座標, 図形の幅, 図形の高さ)で長方形の位置大きさを決めています。
clearRect
次は描画した単色塗りの長方形で任意の場所を切り抜いてみようと思います。
drawScreen()の中に以下の命令を加えてみましょう。
context.fillStyle="red";
context.fillRect(230,10,150,150);
context.clearRect(240,20,100,100);
書き加えて、ブラウザを再読み込みしてみると、先ほどの長方形の右側に単色塗りの長方形の中が切り抜かれた図形が表示されているはずです。
context.clearRect(切り抜き範囲の左上のx座標, 切り抜き範囲の左上のy座標, 切り抜き範囲の幅, 図形の高さ)
今回の全コード
最後に今回の全コードを載せておきます。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Canvas Ex1</title>
</head>
<body>
<div style="position: absolute; top: 50px; left: 50px;">
<canvas id="canvas" width="500" height="500">
Your browser does not support the HTML 5 Canvas.
</canvas>
</div>
<script>
var theCanvas=document.getElementById("canvas");
var context=theCanvas.getContext("2d");
function drawScreen(){
//ここに図形を描く命令を描く
//単色塗りの長方形
context.fillStyle="red";
context.fillRect(10,10,100,100);
//長方形の輪郭
context.strokeStyle="red";
context.lineWidth=2;
context.strokeRect(120,10,100,100);
//切り抜き
context.fillStyle="red";
context.fillRect(230,10,150,150);
context.clearRect(240,20,100,100);
};
drawScreen();
</script>
</body>
</html>次は簡単な絵でも描きながら、他のいろいろな機能に触れていこうかなと思います！
参考資料：スティーブ・フルトン「HTML5 Canvas」,オライリージャパン,2012年1月
 | 価格:3,520円 |
コメント
[…] […]