EaselJSのTickerを使ってCanvas上に線を描画する方法

EaselJSとは

EaselJSは、HTML5 Canvas要素を手軽に扱えるようにするJavaScriptライブラリです。ブラウザ上でのゲーム開発やグラフィック描画など、インタラクティブなコンテンツ制作に幅広く活用されています。

Canvasの低レベルなAPIを直接操作するのは煩雑になりがちですが、EaselJSを使えばディスプレイリストやステージの概念を利用して、直感的に図形やアニメーションを実装できます。

Tickerで線を描く基本コード

EaselJSのTickerは、一定間隔（デフォルトでは約60FPS）で「tick」イベントを発行するアニメーションループです。このtickイベント内で座標を少しずつ更新することで、線が徐々に伸びていくアニメーション描画が可能になります。

var myLine = new createjs.Shape();

myLine.graphics.setStrokeStyle(4);
myLine.graphics.beginStroke(color);
myLine.graphics.moveTo(startX, startY);

startY++;

myLine.graphics.lineTo(startX, startY);
myLine.graphics.endStroke();

コードの解説

• new createjs.Shape()：描画対象となるシェイプオブジェクトを生成します。
• setStrokeStyle(4)：線の太さを4ピクセルに設定します。
• beginStroke(color)：指定した色でストローク（線の描画）を開始します。
• moveTo(startX, startY)：ペンを始点座標へ移動します。
• startY++：tickイベントごとにY座標を1ずつ増加させます。
• lineTo(startX, startY)：更新後の座標まで直線を引きます。
• endStroke()：ストロークを終了します。

動かすためのポイント

実際にアニメーションさせるには、createjs.Ticker.addEventListener("tick", stage) のようにTickerイベントにステージを紐づけ、各フレームで stage.update() を呼び出す必要があります。これにより、毎フレームの座標更新が画面に反映され、線がスムーズに伸びていきます。