サイトトップ

Director Flash 書籍 業務内容 プロフィール

HTML5テクニカルノート

EaselJSで描いた星形を回す

ID: FN1203001 Technique: HTML5 and JavaScript

EaselJSでCanvasに星形を描き、さらにアニメーションで回してみます。EaselJSの基本的な使い方や必要な設定については、「EaselJSで図形を描く」をお読みください。


01 EaselJSで星形を描く
EaselJSライブラリを使わなくても、Canvasに星形は描けます。「<canvas>要素で定めた領域に図形を描く」05「星形を描く」では、まさにそのための関数を定めました。けれど、EaselJSには、すでにGraphics.drawPolyStar()メソッドが備わっています。

Graphicsオブジェクト.drawPolyStar(x座標, y座標, 半径, 頂点数, 谷の深さ, 起点角)

第1および第2引数が中心のxy座標、第3引数は中心から頂点までの半径、そして第4引数が頂点の数になります。第5引数の谷の深さは谷の深さで、0以上1未満の数値で定めます。デフォルト値の0を渡すと谷はなくなり、正多角形になります(図001)。第6引数はデフォルト値0では、星形がx軸の正方向つまり時計の3時の方向を起点に描かれます。y軸の負つまり時計の12時の方向から描くには、-90度を起点の角度とします。

図001■異なる谷の深さで描かれた5頂点の星形

図001左
0.8

図001中央
0.6

図001右
0

前出「EaselJSで図形を描く」のコード002は、Graphics.drawCircle()メソッドでCanvasに円を描きました。このコードのGraphics.drawCircle()メソッドをGraphics.drawPolyStar()メソッドに置換えたのがつぎのコード001です。第23行目のステートメントを書替えて、中心座標(0, 0)の位置に半径40ピクセルで5頂点の星形を描きました(図002)。

コード001■EaselJSでCanvasに星形を描く
  1. <script src="easeljs/utils/UID.js"></script>
  2. <script src="easeljs/geom/Matrix2D.js"></script>
  3. <script src="easeljs/display/DisplayObject.js"></script>
  4. <script src="easeljs/display/Container.js"></script>
  5. <script src="easeljs/display/Stage.js"></script>
  6. <script src="easeljs/display/Graphics.js"></script>
  7. <script src="easeljs/display/Shape.js"></script>
  8. <script type="text/javascript">
  9.   var stage;
  10.   function xInitialize() {
  11.     var canvasObject = document.getElementById('myCanvas');
  12.     stage = new Stage(canvasObject);
  13.     xDraw();
  14.   }
  15.   function xDraw() {
  16.     var myShape = new Shape();
  17.     var myGraphics = myShape.graphics;
  18.     stage.addChild(myShape);
  19.     myShape.x = 50;
  20.     myShape.y = 50;
  21.     myGraphics.beginStroke("#0000FF");
  22.     myGraphics.beginFill("#00FFFF");
  23.     // myGraphics.drawCircle(0, 0, 40);
        myGraphics.drawPolyStar(0, 0, 40, 5, 0.6, -90);
  24.     stage.update(stage);
  25.   }
  26. </script>

図002■Graphics.drawPolyStar()メソッドで描かれた5頂点の星形
図002


02 EaselJSを使ったスクリプトによるアニメーション
EaselJSではTickerクラスが、決まった間隔でTicker.tickイベントを送ります。静的メソッドTicker.addListener()でリスナーオブジェクトを登録すれば、そのオブジェクトに定めたメソッドtickが一定間隔で呼出されます[*1]

Ticker.addListener(リスナーオブジェクト)

前掲コード001にTickerクラスによるアニメーションの仕組みを加え、Canvasに描いた星形を回してみたのが下記のコード002です。まず第8行目でTicker.jsが読込まれます。そして、初期化の関数(xInitialize())内の第27行目にTicker.addListener()メソッドの呼出しを加えました。呼出すtick()関数は、第29行目以降に定めています。この場合、リスナーはwindowオブジェクトとします。

tick()関数では、星形のShapeオブジェクトをDisplayObject.rotationプロパティで回しています(第30行目)。プロパティ値の単位は度数です。なお、この関数からShapeオブジェクトを扱えるよう、変数(myShape)は関数の外で宣言しました(第11行目)。そして、tick()関数の最後には、必ずStage.update()メソッドを呼出します(第31行目)。これで、Canvasに描いた星形が回るアニメーションのできあがりです(図003)。

コード002■EaselJSでCanvasに描いた星形を回す
  1. <script src="easeljs/utils/UID.js"></script>
  2. <script src="easeljs/geom/Matrix2D.js"></script>
  3. <script src="easeljs/display/DisplayObject.js"></script>
  4. <script src="easeljs/display/Container.js"></script>
  5. <script src="easeljs/display/Stage.js"></script>
  6. <script src="easeljs/display/Graphics.js"></script>
  7. <script src="easeljs/display/Shape.js"></script>
  8. <script src="easeljs/utils/Ticker.js"></script>
  9. <script type="text/javascript">
  10.   var stage;
  11.   var myShape;
  12.   function xInitialize() {
  13.     var canvasObject = document.getElementById('myCanvas');
  14.     stage = new Stage(canvasObject);
  15.     xDraw();
  16.   }
  17.   function xDraw() {
  18.     myShape = new Shape();
  19.     var myGraphics = myShape.graphics;
  20.     stage.addChild(myShape);
  21.     myShape.x = 50;
  22.     myShape.y = 50;
  23.     myGraphics.beginStroke(Graphics.getRGB(0, 0, 255));
  24.     myGraphics.beginFill(Graphics.getRGB(0, 255, 255));
  25.     myGraphics.drawPolyStar(0, 0, 40, 5, 0.6, -90);
  26.     stage.update();
  27.     Ticker.addListener(window);
  28.   }
  29.   function tick() {
  30.     myShape.rotation += 5;
  31.     stage.update();
  32.   }
  33. </script>

図003■Canvasに描いた星形が回る
図003左 図003右

[*1] Ticker.tickイベントの間隔は、静的メソッドTicker.getInterval()で調べられ、Ticker.setInterval()を使って変えることもできます。単位はミリ秒です。


作成者: 野中文雄
作成日: 2012年3月9日


Copyright © 2001-2012 Fumio Nonaka.  All rights reserved.