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

矩形の描画

矩形の描画は簡単です。drawRect関数に位置と大きさを与えてやるだけです。ベクターデータになりますので、一度Shape形式にした後で描画を行います。やってることはJS5 :HTML5対応型javascript講座 » EaselJSで円を描いてみよう！と変わりません。

var stage = new Stage($("canvas")[0]);
var g = new Graphics();
g.beginFill("#888");

//drawRect(x座標,y座標,横幅,縦幅)
g.drawRect(0,0,100,100);

//シェイプオブジェクトに渡す
var s = new Shape(g);
s.x = $(window).width()/2;
s.y = $(window).height()/2;

//ステージにシェイプをセット
stage.addChild(s);

//描画
stage.update();

実行結果

何も意識しない場合、中心点が左上端(left-top)になるという点に注意してください。