JS5 :HTML5向けjavascriptフレームワークのチュートリアルサイト

直線の描画

EaselJsの直線の描画はほぼcanvasの仕様に準じたものとなっています。イメージとしては杭を地面に打ち、その杭と杭をロープで結んでいく感じになります。

g.beginStroke(Graphics.getRGB(0,0,0));

//開始地点のサブパス
g.moveTo(-100,0);

//開始地点からここまで線を引く
//lineTo(x座標,y座標);
g.lineTo(-50,50);
g.lineTo(0,-100);
g.lineTo(50,100);
g.lineTo(100,-50);

moveTo()とlineTo()を使っていますが、実際に線をビッと引くのはlineTo()です。moveTo()は直線の出発点となる地点を指定しています。もしこのmoveTo()が無くても一応動きますが、(-100,0)から(-50,50)の直線は描画されず、(-50,50)がこの描画の基点となります。

サンプル

簡単な折れ線グラフであれば、簡単に作れてしまいそうですね。