JS5 :HTML5向けjavascriptフレームワークのチュートリアルサイト

まずは概要から

さて、前回のチュートリアルでEaselJSを動かす環境は出来ました。
EaselJSで開発する環境を整える

次は描画の基本となる材料を揃えて実際に絵を描いてみましょう。EaselJSでお絵かきを行うには少なくとも一つのcanvasタグが必要です。そして、その上にレイヤー状のオブジェクトを重ねていくことで描画を行っていきます。図にすると以下のようなイメージです。

ここに書かれているStageオブジェクトとelementがEaselJSの担当範囲。
とはいえものは試しです。実際に組んでみましょう。

HTML部分

<div id="wrapper">
<canvas></canvas>
</div>​

できました。簡単すぎますね。ここにEaselJSは様々なモノを描いていくわけです。次にCSSでスタイルを整えます。

CSSでcanvasをWindow全体に広げる

ここでは画面全体にcanvas要素が拡がるようにスタイルを設定しています。必ずしも必要な設定ではありませんが、これがあるのとないのとでは結果の見やすさにかなりの差がありますので、参考に記載します。今後のEaselJSのチュートリアルではこのスタイルを使い続けます。

#wrapper{
    height: auto;
    position: fixed;
    z-index: 1;
    width: 100%;
    height:100%;
    min-height:100%;
}

canvas{
    position: fixed;
}​

サイズ調整

さて、いよいよここからjavascriptです。まず最初にcanvasのサイズを指定しています。
jQueryを使用して、canvasのサイズをwrapperエレメントと合わせます。jQueryを使わなくても出来ますが、jQueryは超便利なjsライブラリですので、今から慣れていた方がいいです。

$("canvas").attr({height:$("#wrapper").height()});
$("canvas").attr({width:$("#wrapper").width()});

Stageを作る

canvasエレメントを設置しましたが、EaselJSはどのcanvasエレメントに絵を描くべきなのかをまだ認識していません。どこに絵を描けばいいんですか！

var stage = new Stage($("canvas")[0]);

このcanvasエレメントを使ってください！とstage変数に渡してあげます。$(“canvas”)とした場合、画面上にある全てのcanvasエレメントが取得されますが、今回の例では1個しか存在しないので、1個の配列が返されます。ちなみに[0]でインデックスを与えて、正確なエレメントを渡さないとEaselJSは仕事してくれません。
さて、これで、「紙」は用意できました。次は「筆」が必要です。

円のGraphicを作る

さて、円を作りましょう。円や四角形などの図形はGraphicsオブジェクトが取り扱っています。まずはGraphicsオブジェクトを生成します。

var g = new Graphics();

//g.beginFill(塗の色);
g.beginFill("#888");

//g.drawCircle(X座標,Y座標,円の半径);
g.drawCircle(0,0,100);

//楕円の場合
//g.drawEllipse(0,0,50,100);

さて、次にbeginFill()で指定しているのが塗りの色です。#888で塗っています。そしてその色で、drawCircle()、つまり円を作っています。ここで注意なのは、あくまでも現時点ではStageに円を描いてはいないという事。下書きみたいなもんです。ちなみに正円はdrawCircle()で、楕円はdrawEllipse()を使います。

ベクターデータはShapeへ渡す

次にこの下書きをShapeオブジェクトに渡します。わざわざShapeオブジェクトに渡さないといけないのも面倒ですが、これは理由があります。実はdrawCircleで作成した円は、ベクターデータなのです。EaselJSではベクターデータを表示する為には一度Shapeオブジェクトに格納してやらなければなりません。ちなみにここではShapeの位置を微調整し、画面の中央にくるようにしています。

//Shapeオブジェクトに渡す
var s = new Shape(g);
s.x = $(window).width()/2;
s.y = $(window).height()/2;

描画

まずは一番最初に作ったStageに円データが格納されたShapeオブジェクトを渡します。そして、ステージに描かれているものをを更新する為にstage.update();を実行します。これで、円がめでたく描画されるわけです。

//ステージにシェイプをセット
stage.addChild(s);

//描画！
stage.update();

実行結果

そして以下が実行結果になります。最初はこの描画方法にも慣れが必要ですが、この単純な円がJSグラフィックの第一歩になります。