今更だけど、EaselJSを使ってみる - とりあえず図形を描いてみる編 -

canvasタグを勉強がてら、ちょっと気になってたEaselJSで遊んでみました。

下記サイトにアクセスして、ダウンロードしてきます。

いくつか種類があったけど、今回はちょろっとお勉強に使いたいので、CDN経由で利用しますが、ダウンロードしたい場合はGithub経由でよさそう。

オンラインドキュメントは下記です。

まず、EaselJS自体を読み込みます。bodyタグ内に

<script type="text/javascript" src="http://code.createjs.com/easeljs-0.7.0.min.js"></script>

という具合に読み込んでおきます。多分どこに書いても大丈夫だけど、onload後じゃないと上手く動かないので注意。

canvasタグもここで書いておいて、idもつけておきます。

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

まずは表示するためのステージを用意します。

var stage = new createjs.Stage("easel");

引数に、HTML側で設定したcanvasのidを入れてあげます。

図形描画のためのオブジェクトも用意します。

var shape = new createjs.Shape();

作ったShapeインスタンスの設定もしてあげます。

shape.graphics.beginFill("#000").drawCircle(100, 100, 100);

Shapeインスタンスの中のgraphicsにあるメソッドで色々できるみたいです。

今回は適当に・・・

beginFill( color )で塗りつぶしの色を選択、
drawCircle( x, y, radius )で描画される円の座標やサイズを設定。

という感じに設定してみました。

描画する図形を作ったら、最初に作ったStageインスタンスに図形を追加します。

stage.addChild(shape);

この段階ではStageインスタンスに追加しただけで描画はされていないので、最後に

stage.update();

とすると、canvasに図形が描画されるようになります。

これでとりあえず、図形の描画は問題なくできました。

次は色々試行錯誤したところとか、画像の読み込みとかフィルターとかについてやってみます。

kinalog