canvasの使い方 - 独学・低コストなゲームの作り方

canvasの使い方を分かりやすく

canvasを使うとHTMLとjavascriptだけで自由に図形を書けます。HTMLの方には <canvas> タグを置くだけで、図形を書く処理はjavascriptで書きます。具体的な書き方は簡単なので、この記事ではざっくりとおおすじを説明したいと思います。

このグレーの四角形が<canvas>で囲まれた部分で、初期状態では白いですが今はグレーで塗りました。その中に3つの図形を書きました。

これらの図形を書いたとき、javascriptでは、次に何色で書くか、どこから書くか(canvasの一番左上をx=0 y=0 としたときの位置)、書く図形の大きさなどを指定して図形を一つ書き、では次の図形は何色で書くか、線の太さは・・という風に一つずつ書きます。

では、この丸い図形を別の図形にしたいときはどうするかというと、まずは背景色のグレーで塗りつぶして、新しい図形を好きな色で書けばいいのです。


このように、canvasは実際に白い紙に絵の具で絵を描くときのように使うことができます。つまり、この3つの図形に名前を付けといて、名前を頼りに図形に変更を加えたり消したりというようなことをするわけではなく、書いたら書きっぱなしです。

例えば、図形を塗りつぶしたときに、この背景色の後ろには実は別の図形があるのだなとか考える必要はなくて、今見えている状態だけを考えればいいのです。

canvasのコードは簡単

具体的にどう書くか見てみましょう。

var canvas = document.getElementById("canvas1");
if(canvas && canvas.getContext){

var c = canvas.getContext("2d");  //ここまではcanvasを使うための準備です。

c.fillStyle = "gray";	//塗りつぶす色にグレーを選択
c.fillRect(0,0,300,200);  //全体を塗りつぶす

c.fillStyle ="blue";  //塗りつぶす色に青を選択
c.fillRect(40,35,50,90);  //(x,y)=(40,50)の座標から横50px 縦90pxを四角く塗りつぶす。 

c.strokeStyle ="green";	//線の色に緑を選択
c.lineWidth="5";	//線の太さを5にする
c.beginPath();		//下書きを開始
c.moveTo(140,32);	//筆を(x,y)=(140,32)の場所へ持ってくる
c.lineTo(170,80);	//そこから(170,80)へ下書きの線を書く
c.lineTo(110,75);	//さらにそこから(110,75)へ下書きの線を書く
c.closePath();		//始点(140,32)から終点(110,75)へ線を引いて図形を閉じる
c.stroke();		//線を清書する

c.beginPath();		//次の図形にうつる
c.fillStyle="red";	//塗りつぶす色を赤
c.arc(220,120,50,0,2*Math.PI);	//円の下書き
c.fill();			//塗りつぶす清書

}

という風にすごく簡単で直感的なので、もう少しだけ詳しく勉強するとすぐに使えるようになります。

canvasでアニメーション

canvasの使い方がわかれば、サイトやゲーム等に何にでも応用できそうです。たとえば、アニメーションを書くときは

①全体を背景色で塗りつぶして図形を一旦消す
②図形を書く座標(位置)を少し変える
③新しい座標に変わった図形を書く

という処理を繰り返せばいいのです。繰り返し処理をする方法はいくつかあります。指定した秒数ごとに決まった処理を繰り返してくれるようなものがあればシンプルでいいですね。


setInterval(処理,ミリ秒);

これを使うと「処理」を、指定したミリ秒数ごとに繰り返します。「処理」の部分に、図形を書いたり消したりする関数を書くとアニメーションができそうですね。




背景色で全体を塗りつぶして図形を消す文を書かないとこうなります。


Tips

setIntervalは、まず指定した秒数を待ってから最初の処理が始まるので注意です。
処理→ミリ秒→処理→ミリ秒→処理→ミリ秒→・・・ではなく、
ミリ秒→処理→ミリ秒→処理→ミリ秒→処理→・・・です。

初めにまず「処理」をしてほしい時は

func();	
setInterval(func,ミリ秒);

と、最初の処理をしてからsetIntervalを使います。

ゲームの作り方をとりあえずざっくり見る

具体的な方法はさておき、まずはだいたいのところを解説します。

プロフィール

猫ロモーフ
ねころもーふ
Unityでゲームを作っています。
@nekoromorph