【連載】第一回HTML5でCanvasアプリを作る入門編 ~canvas関連メソッドリファレンス~

前回ざっくりWEBアプリが来る!という記事を書きました。

というわけで今回はWEBアプリの作り方!特にcanvasを利用したアプリの作り方について書いていこうと思います。かなり内容は入門者向けですので、まだプログラミングを知らないという人でも記事を読みながらプログラミングが出来ると思います。

これも連載形式で書いていこうと思います。

連載が終わる頃にはcanvasでWEBアプリを作れるようになっていることでしょう!

第一回目のテーマは色々やってみようということでcanvas関連メソッドのリファレンスを書いていきます。

参考図書
canvasで出来ること
canvasを使う準備
canvasで良く使うメソッド
まとめ

という流れで書いていきます。

参考図書

参考図書にはこちら。

HTML5 Canvas

作者: Steve Fulton,Jeff Fulton,安藤慶一
出版社/メーカー: オライリージャパン
発売日: 2012/01/21
メディア: 大型本
購入: 1人クリック: 27回
この商品を含むブログ (6件) を見る

「HTML5 Canvas」の動物本。他の動物本に比べて内容が簡単な気がします。主観ですが。
もしCanvasアプリを作りたければ読んでおくことをおすすめします。

canvasで出来ること

ぶっちゃけると大抵のことは出来ます。
画像の描画、マウスイベント、アニメーション、音楽の再生、etc...
これだけあれば大抵のアプリケーションは作れます。
かなり自由度も高いので、Objective-Cよりも楽に作れると思います。
ただし、コンパイラが無いのでデバッグは大変ですが、
楽しくできるので、入門にはかなり適していると思います。

代わりにDOM関連はcanvasとは別部分で分けたほうがいいので、
Twitterクライアント系の物を作るのには向いていません。

canvasを使う準備

ここは入門者向けに書きますので、プログラミングが元々出来る人は飛ばしても構いません。
まずcanvasアプリを作るにあたって必要なものを書きます。

ブラウザ(chrome推奨)
エディタ

以上です。
PHPとかと比較してかなり少ないです。
ちなみにブラウザでchromeが推奨なのはデベロッパーツールがあるからです。
こちらについてはいつか「デベロッパーツールの使い方」と題しまして連載で書きます。

ちなみにあると便利な知識としては

HTML
CSS

です。
ただし、どちらも知らなくてもわかるように書いていきます。

ベースとなるHTMLを書く

というわけでまずはHTMLからですが、次のようなファイルを作成します。
ファイル名 : index.html

<!DOCTYPE HTML>
<html lang="ja-JP">
<head>
	<meta charset="UTF-8">
	<title>canvasApp</title>
</head>
<body  onload="init()">
	<canvas id="first" width="500" height="500"></canvas>
<script type="text/javascript">
var canvas = document.getElementById('first');
var ctx    = canvas.getContext('2d');
</script>
</body>
</html>

これをコピーし、index.htmlという名前で保存します。
準備はこれでOK!

では実際にcanvasの各メソッドの使い方について説明します。

canvasで良く使うメソッド

ラインを引く

canvas上でラインを引く方法について説明します。
使うメソッド

beginPath()
moveTo()
lineTo()
stroke()

続いてコードです。
コードは先程の

var canvas = document.getElementById('first');
var ctx    = canvas.getContext('2d');

に続く形で書いて行きます。

function init(){
	ctx.beginPath();
	ctx.moveTo(0, 0);
	ctx.lineTo(200, 200);
	ctx.stroke();	
}

こちらをコピペします。そこでブラウザで表示すると次のようになります。
f:id:nigohiroki:20130104022218p:plain
コードを説明すると、
ctx.beginPath();
まずパスを初期化。これから線を書きますという宣言のようなもの。
仕様的にはもっと詳しいですが、現段階ではそこまで深堀するものでもありません。
とりあえず書くのだな程度に。
ctx.moveTo(0, 0);
ctx.lineTo(200, 200);
こちらはセットで何をしているのかというと、座標(0, 0)の地点から座標(200, 200)の地点まで線を引きますということ。この時の数字を色々変更してみると色々わかります。
ctx.stroke();
最後に描画します。これがないと表示されません。

書いたラインの色や太さを変更

プロパティを変更し、ラインの色や太さを変更します。
まずは次のようにコードを追加

function init(){
        //追加部分
	ctx.lineWidth = 5;
	ctx.strokeStyle = '#FF0000';
        //追加部分ここまで
	ctx.beginPath();
	ctx.moveTo(0, 0);
	ctx.lineTo(200, 200);
	ctx.stroke();	
}

すると、次のようになります。
f:id:nigohiroki:20130104023309p:plain
ラインの色と太さが変わりました。
ctx.lineWidht = 5
はラインの太さを
ctx.strokeStyle = '#FF0000'
はラインの色を変更します。
どちらも色々値を変更させて試してみましょう!

四角を書く

先程のものを削除して次のように書きます。

function init(){
	ctx.rect(20, 20, 200, 200);
	ctx.stroke();	
}

すると次のようになります。
f:id:nigohiroki:20130104023840p:plain
こちらも説明すると、
ctx.rect(20, 20, 200, 200);
は座標(20, 20)の位置に左上を合わせた、大きさ幅200, 高さ200の四角を書くというコードです。
どちらも同じ数字にしてみたので、数字を変えて、どれがx, yか、どれが幅、高さかを調べて見て下さい。
こちらもラインと同様のプロパティが使え、色や太さを変更できます。

画像を表示

また、先程のものを削除し、次のように書きます。

function init(){
	var img = new Image();
	img.src = "rect.png";
	ctx.drawImage(img, 20, 20, 150, 150);
}

すると次のようになります。
f:id:nigohiroki:20130104024449p:plain
こちらも解説すると、
var img = new Image();
で新規画像のインスタンスを作成します。
img.src = "rect.png";
で画像のパスを指定します。この場合は同じディレクトリ(フォルダ)に入れたファイル名です。
ctx.drawImage(img, 20, 20, 150, 150);
でimgを座標(20, 20)の位置で幅150, 高さ150の大きさで表示させます。