FN1203001 - EaselJSで描いた星形を回す - HTML5 : テクニカルノート

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に星形を描く

<script src="easeljs/utils/UID.js"></script>
<script src="easeljs/geom/Matrix2D.js"></script>
<script src="easeljs/display/DisplayObject.js"></script>
<script src="easeljs/display/Container.js"></script>
<script src="easeljs/display/Stage.js"></script>
<script src="easeljs/display/Graphics.js"></script>
<script src="easeljs/display/Shape.js"></script>
<script type="text/javascript">
var stage;
function xInitialize() {
var canvasObject = document.getElementById('myCanvas');
stage = new Stage(canvasObject);
xDraw();
}
function xDraw() {
var myShape = new Shape();
var myGraphics = myShape.graphics;
stage.addChild(myShape);
myShape.x = 50;
myShape.y = 50;
myGraphics.beginStroke("#0000FF");
myGraphics.beginFill("#00FFFF");
// myGraphics.drawCircle(0, 0, 40);
myGraphics.drawPolyStar(0, 0, 40, 5, 0.6, -90);
stage.update(stage);
}
</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に描いた星形を回す

<script src="easeljs/utils/UID.js"></script>
<script src="easeljs/geom/Matrix2D.js"></script>
<script src="easeljs/display/DisplayObject.js"></script>
<script src="easeljs/display/Container.js"></script>
<script src="easeljs/display/Stage.js"></script>
<script src="easeljs/display/Graphics.js"></script>
<script src="easeljs/display/Shape.js"></script>
<script src="easeljs/utils/Ticker.js"></script>
<script type="text/javascript">
var stage;
var myShape;
function xInitialize() {
var canvasObject = document.getElementById('myCanvas');
stage = new Stage(canvasObject);
xDraw();
}
function xDraw() {
myShape = new Shape();
var myGraphics = myShape.graphics;
stage.addChild(myShape);
myShape.x = 50;
myShape.y = 50;
myGraphics.beginStroke(Graphics.getRGB(0, 0, 255));
myGraphics.beginFill(Graphics.getRGB(0, 255, 255));
myGraphics.drawPolyStar(0, 0, 40, 5, 0.6, -90);
stage.update();
Ticker.addListener(window);
}
function tick() {
myShape.rotation += 5;
stage.update();
}
</script>

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

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

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