http://www.createjs.com/tutorials/Getting%20Started/
createjsに挑戦しようと思い、EaselJSのGetting Startedをやってみました。
赤い円を表示するだけです。
すこし歯ごたえなかったですね・・・
SETTING UP YOUR HTML DOCUMENT
- 今回はjsfiddleを使います。
- Frameworks & Extensionsでcreatjsを指定します。
- HTMLにcanvas要素を作成します。
- 識別のためcanvasにはIDが必須です。
SETTING UP THE STAGE
-
var stage = new createjs.Stage("demoCanvas");でcanvas要素をStageとして取得します。 - StageはDisplay Objectsを保持します。
- Display Objectはスクリーンに描画されるオブジェクトです。
- canvasの指定にはIDを使います。
CREATING A SHAPE
- 赤い円を描くShapeオブジェクトを作成します
- ShpaeオブジェクトはDisplay Objectです
- Shapeはx,yの座標をもちます
- Shapeはgraphicsをもち、これはShapeの形を定義します
- graphicsはメソッドをチェーンすることで形を定義します
- ここでは
.beginFillと.drawCircleを用い赤い円を定義しています - 最後に円をステージに登録しています
UPDATING THE STAGE
- 描画を反映するには
stage.update();を呼ぶ必要があります - 赤い円がキャンバスに表示されます
以上です。
試しにjsfiddleで段階的にコード載せてみましたけど
この例だと最後しか描画がないから、あんま意味なかったですね・・・