[CreateJS] Graphicsクラスを使って四角や丸を画像なしで描画する

こんにちは、@yoheiMuneです。
CreateJS関連のブログの第4弾、Graphicsクラスの使い方をブログに記載したいと思います。

CreateJSとは

CreateJSとは、HTML5 Canvasを使った描画/アニメーションの実装を強力にサポートしてくれるライブラリです。
このブログでは、筆者がCreateJSを実際に使って学んだ事を中心に、いくつか記事を書いております。

- Canvasアニメーションを実装する時に便利で良く利用しているJSライブラリ、CreateJS

- Bitmapクラスを使って画像の描画を自由自在に

- 色々なFilterを適用して描画する内容を変化させる

- Graphicsクラスを使って四角や丸を画像なしで描画する（今日はここ）

Graphicsクラスとは

Graphicsクラスとは、CreateJS内のEaselJSで定義された機能で、HTML5 Canvasの機能をほぼそのまま利用できるクラスです。
四角形、丸、直線、曲線、グラデーションなどを描画することが可能です。
以下では、それぞれの描画例を紹介しています。

基本的な使い方

まずはGraphicsの使い方を記載します。
Graphicsは、色などを指定して、描画して、ShapeとしてStageに追加します。

// ステージを作成します。
var stage = new createjs.Stage(document.getElementById("canvas1"));

// Graphicsのインスタンスを作成します。
var graphics = new createjs.Graphics();

// 色の指定（線と塗りつぶしとそれぞれ色を指定する）
graphics.beginStroke("#cccccc");
graphics.beginFill("#7aeac8");

// 図形の描画を行う（ここのバリエーションを後述します）
graphics
     .moveTo(80,80)
     .lineTo(240,80)
     .lineTo(240,240)
     .lineTo(80,240)
     .closePath();

// Shapeとして、Stageに追加します。
var shape = new createjs.Shape(graphics);
shape.x = 0;
shape.y = 0;
stage.addChild(shape);

// ステージの更新を行う。
stage.update();

色々な図形を描画する

上記では、パスを使って四角形を描画しました。
Graphicsクラスのメソッドを使うと、簡単に色々と図形を描画できます。

// ステージを作成します。
var stage = new createjs.Stage(document.getElementById("canvas2"));

// 利用する変数
var graphics, shape;

// 円を描く
graphics = new createjs.Graphics();
graphics
     .beginStroke("#cccccc")
     .beginFill("#3817a3")
     //arc ( x , y , radius , startAngle , endAngle , anticlockwise )
     .arc(160, 160, 120, 0, 360, true);
shape = new createjs.Shape(graphics);
stage.addChild(shape);

// 楕円を描く
graphics = new createjs.Graphics();
graphics
     .beginStroke("#cccccc")
     .beginFill("#6045b8")
     //drawEllipse ( x , y , w , h )
     .drawEllipse(10, 380, 300, 200);
shape = new createjs.Shape(graphics);
stage.addChild(shape);

// 角丸四角形を描く
graphics = new createjs.Graphics();
graphics
     .beginStroke("#cccccc")
     .beginFill("#594D80")
     //drawRoundRect ( x , y , w , h , radius )
     .drawRoundRect(80, 720, 160, 160, 20);
shape = new createjs.Shape(graphics);
stage.addChild(shape);

// ステージの更新を行う。
stage.update();

曲線を描画する

Graphicsクラスのメソッドを使うと、2次ベジエ曲線、3次ベジエ曲線を描画することが出来ます。

// ステージを作成します。
var stage = new createjs.Stage(document.getElementById("canvas3"));

// 利用する変数
var graphics, shape;

// 2次ベジエ曲線を描く
graphics = new createjs.Graphics();
graphics
     .beginStroke("#cccccc")
     .beginFill("#a6199e")
     .moveTo(20, 160)
     // quadraticCurveTo ( cpx , cpy , x , y )
     .quadraticCurveTo(160, -60, 300, 160)
     .quadraticCurveTo(160, 40, 20, 160)
     .closePath();

shape = new createjs.Shape(graphics);
stage.addChild(shape);


// 3次ベジエ曲線を描く
graphics = new createjs.Graphics();
graphics
     .beginStroke("#cccccc")
     .beginFill("#a6199e")
     .moveTo(20, 480)
     // bezierCurveTo ( cp1x , cp1y , cp2x , cp2y , x , y )
     .bezierCurveTo(160, 60, 160, 640, 300, 480)
     .bezierCurveTo(240, 640, 40, 640, 20, 480)
     .closePath();

shape = new createjs.Shape(graphics);
stage.addChild(shape);

// ステージの更新を行う。
stage.update();

グラデーション（線形）を描画する

グラデーション（線形）は、以下のように実装することで表現することが可能です。

// ステージを作成します。
var stage = new createjs.Stage(document.getElementById("canvas4"));

// 利用する変数
var graphics, shape;

// グラデーション（線形）を描画する。
// 塗りつぶす場合は以下。
// beginLinearGradientFill ( colors , ratios , x0 , y0 , x1 , y1 )
// Strokeの場合は以下。
// beginLinearGradientStroke ( colors , ratios , x0 , y0 , x1 , y1 )
graphics = new createjs.Graphics();
graphics
     .beginLinearGradientFill(["#ffff00", "#00ffff"], [0, 1], 0, 0, 0, 320)
     .drawRect(0, 0, 320, 320);

shape = new createjs.Shape(graphics);
stage.addChild(shape);


// ステージの更新を行う。
stage.update();

グラデーション（線形）を描画する

グラデーション（円形）は、以下のように実装することで表現することが可能です。

// ステージを作成します。
var stage = new createjs.Stage(document.getElementById("canvas5"));

// 利用する変数
var graphics, shape;

// グラデーション（円形）を描画する。
// 塗りつぶす場合は以下。
// beginRadialGradientFill ( colors , ratios , x0 , y0 , r0 , x1 , y1 , r1 )
// Strokeの場合は以下。
// beginRadialGradientStroke ( colors , ratios , x0 , y0 , r0 , x1 , y1 , r1 )
graphics = new createjs.Graphics();
graphics
     .beginRadialGradientFill(["#ff00ff", "#00ffff"], [0, 1], 160, 160, 0, 160, 160, 320)
     .drawRect(0, 0, 320, 320);
shape = new createjs.Shape(graphics);
stage.addChild(shape);

// ステージの更新を行う。
stage.update();

画像を描画する

BitmapクラスではなくGraphicsクラスでも、画像を描画する事が可能です。
Graphicsクラスを使う場合には、画像と描画物を一緒に扱う事が出来て便利な場合も多いです。

// 画像を取得します。
var star = window.yoheim.assets["star"];

// ステージを作成します。
var stage = new createjs.Stage(document.getElementById("canvas6"));

// 利用する変数
var graphics, shape;

// グラデーションの上に、画像を描画します。
graphics = new createjs.Graphics();
graphics
     .beginFill("#ffffff")
     .beginBitmapFill(star, "no-repeat")
     .drawRect(0, 0, 320, 320);
shape = new createjs.Shape(graphics);
stage.addChild(shape);

// ステージの更新を行う。
stage.update();

Protectedメソッドの利用

GraphicsのProtectedメソッドを用いると、短いメソッド名で描画することが出来ます。
使っていいのかは別問題として、慣れるとこれ楽で良いかも。
以下は、一つ上の画像を描画する処理をProtectedメソッドで記述した例となります。

// 利用する変数
var graphics, shape;

// protectedメソッドを使うと省略した関数名で描画することが出来ます。
graphics = new createjs.Graphics();
graphics
     .f("#ffffff")
     .bf(star, "no-repeat")
     .dr(0, 0, 320, 320);
shape = new createjs.Shape(graphics);
stage.addChild(shape);

参考資料

Graphicsクラスのリファレンスは以下から参照できます。更に詳しい情報は、以下にてご確認ください。
- http://www.createjs.com/Docs/EaselJS/Graphics.html

最後に

Graphicsクラスを使えるようになると、画像を使わなくてもあんメーションさせる素材を作ることはできたりと、便利な感じです。
今回紹介しきれなかった機能もありますので、ぜひ上記のリファレンスをご覧頂ければと思います。

今後もCreateJSの使い方をブログに書いていきたいと思いますので、どうぞ宜しくお願いします。
最後までご覧頂きましてありがとうございました。