canvasアニメーションでゲーム制作-1
と言っても点数が出るわけでもなく、戦闘機を動かして、クリックしたら弾が出て敵のタコキャラを消していくって一連の流れを追って作っていきましょう。
まずcanvasですが、お決まりのパターンとして憶えておきます。
1200pxの横幅、800pxの高さのcanvasタグを書きます。
これをJavaScriptで読みにいきます。
これで、このあとはJavaScriptで変数「ctx」にドットシンタックス（ドット「.」で命令をつないでいく文法、JavaScriptやActionScriptでは定番）で書いていくことになります。
で、四角を描く方法は以下の通りです。（ソースをコピペしてcanvas対応ブラウザで見てください）
ポイントは「ctx.fillRect(0,0,300,200);」です。
ctxというキャンバスのスクリプトが書ける場所に「fillRect」という四角形を描く関数を使って書いてます。
（）の中の座標は、横座標の開始点、縦座標の開始点、長方形の横の長さ、長方形の縦の長さ、と、なります。
今回は左上隅に横300px、縦200pxの長方形を描いた訳です。
で、次は四角形ではなく、IllustratorやPhotoshopなどで作ったPNG画像を読み込んで表示してみましょう。
