手探りでHTML5のcanvasを勉強してみる

photo by svensonsan

まだまだイケてないIE9ですが、その登場によってCSS3などの新しい規格が使えるようになったのは紛れも無い事実です。
というわけで、そろそろHTML5を勉強し始めなければいけないでしょう！
HTML5といえば、FLASHのようにプログラミングによって描画できる機能「canvas」の機能の充実ではないでしょうか(というかHTML5初心者なのでそれしか知らないダケｗ)!?
これはこれからのweb開発にとって必須の技術になることは間違いない！というわけで、ちょっとずつ勉強してみます。

canvasの下準備

まずはHTML上にcanvasタグを書きます。
canvasタグにはIDを振っておくのがよいみたいです。

<canvas id="canvas"></canvas>

次にjavascriptの準備です。
canvasでは、canvasの「コンテキスト」というオブジェクトを使ってcanvas上に描画していきます。
具体的には、コンテキストを取得してからコンテキストのメソッドやプロパティをつかって描画するという感じです。
コンテキストの取得はgetElementByIdを使いますが、jQueryを使うとより便利かもしれません。

<script type="text/javascript">
$(function() {
var canvas = document.getElementById("canvas");
if (!canvas || !canvas.getContext) {return false;}
var ctx = canvas.getContext("2d");//コンテキストを取得
});</script>

これでコンテキストを取得できました！
あとはこれを使って描画していきます。

実は今回の密かな目的はcanvasタグで円形のアニメーションをするメニューを作ること・・・だったりします。
なので、まずは簡単に描画できる円を描いてみることにします。

描画の手順

基本的な(といっても応用はわかりませんがｗ)描画の手順は、
Context.beginPath();
//いろいろ描画処理
Context.closePath();
Context.fill();//塗る
という感じになります。

円を描くメソッドはarcメソッドですので、beginPath()とclosePath();のあいだに書きます。
引数はx座標、y座標、半径、書き始め角度(単位はラジアン)、書き終わり角度(単位はラジアン)、書き順が時計回りかどうか、の順です。
ctx.fillStyleで色を指定すると、その色に塗ることができます。

<script type="text/javascript">

$(function() {
var canvas = document.getElementById("canvas");
if (!canvas || !canvas.getContext) {return false;};
var ctx = canvas.getContext("2d");
var pi360 = Math.PI*2;
ctx.beginPath();
ctx.fillStyle = "red";
ctx.arc(50, 50, 30, 0, pi360,true);
ctx.closePath();
ctx.fill();
});

</script>

↓結果はこちら

google chrome,Firefoxだと見えていると思います。多分・・・

オブジェクト指向っぽく書いてみる

このまま垂れ流しに処理を書いたのではとてもアニメーションなど作れませんので、オブジェクト指向的な書き方に直してみます。
まずは円をオブジェクト化したCircleオブジェクトのコンストラクタを作ってみます。
こんどは別のcanvasに描画しますので、canvas2タグを作ります。

<canvas id="canvas2"></canvas>

最初のコンテキストを取得する手順は同じですが、その後Circleオブジェクトのコンストラクタを作っています。
これはx,y,rという連想配列(プロパティ)を持つだけのオブジェクトです。

これをnew演算子でインスタンスにしてやり、円データのオブジェクトとして扱うことにします。
もちろんx,yは座標、rは半径のデータです。

<script type="text/javascript">
$(function() {
var canvas2 = document.getElementById("canvas2");
if (!canvas2 || !canvas2.getContext ) {return false;}
var ctx2 = canvas2.getContext("2d");//コンテキストを取得

var Circle = function(x,y,r){
this.x=x;
this.y=y;
this.r=r;
}

var circle1 = new Circle(50,50,30);
});</script>

さらに、色データと描画メソッドを追加してみます。

<script type="text/javascript">

$(function() {
var canvas2 = document.getElementById("canvas2");
if (!canvas2 || !canvas2.getContext) {return false;};
var ctx2 = canvas2.getContext("2d");
var pi360 = Math.PI*2;

var Circle = function(x,y,r,fill){
this.x = x;
this.y = y;
this.r = r;
this.fill = fill;
this.render = function(){
ctx2.beginPath();
ctx2.fillStyle = this.fill;
ctx2.arc(this.x, this.y, this.r, 0, pi360,true);
ctx2.closePath();
ctx2.fill();
};
};

var circle = new Circle(50,50,30,"blue");
circle.render();
});

</script>

↓結果はこちら


ちょっと読み辛いですが、本来は上記コードだとnew演算子を忘れたときにわけがわからないことになるので、その辺りを考慮して書きかえたのが下記のコードです。

<script type="text/javascript">
$(function() {
var canvas = document.getElementById("canvas");
if (!canvas || !canvas.getContext) {return false;};
var ctx = canvas.getContext("2d");
var pi360 = Math.PI*2;

function Circle(){
this.initialize.apply(this,arguments);
}

Circle.prototype={
fill:"#000000",
stroke:null,
initialize:function(x,y,r,fill,stroke) {
this.x = x||0;
this.y = y||0;
this.r = r||5;
this.fill = fill||"#000000";
this.stroke = stroke||fill;
},
render:function(){
ctx.beginPath();
ctx.fillStyle = this.fill;
ctx.strokeStyle = this.stroke;
ctx.arc(this.x, this.y, this.r, 0, pi360,true);
ctx.closePath();
ctx.fill();
if(this.fill === this.stroke){}else{ctx.stroke();}
}
};

var circle = new Circle(50,50,30,"black");
circle.render();
});</script>

意味的には上のコードと殆ど同じですので、おまじない的な覚え方で大丈夫です。
これでとりあえず円が描けましたので、次回は動かしてみたいと思います！

参考ページ：http://www.html5.jp/canvas/how2.html
※こちらを参考にさせていただいて、オブジェクト指向の部分だけ加筆したような形になっています。

追記：記述ミスでFirefoxで動かなかった部分を直しました。

記事の話題関連のツイート on twitter