ファーストって///ってなるけどSVGばっかでこっちは全然いじってなかった。
けどええかげんやっとく。
JSでいごかすときのいじりかた。

ちなみに
SVG と Canvas: どちらを選ぶか (Windows)
https://msdn.microsoft.com/ja-jp/library/Gg193983(v=VS.85).aspx#Non_Starters

要素が多い場合はcanvas
描画領域が大きい場合はsvg
とのこと。へぇ

概要

ステージ（canvas要素）をhtml内に用意して→それを変数に登録しとく→オブジェクトを用意して→描画してくれ！って命令する→ステージに表示される

canvasにかんするメモ書き

ブレンド使いたいとき（乗算モードでの描画とか使いたいとき）はステージに対して設定をする
[html]
var context = canvas.getContext(“2d”);
// Set the blending operation.
context.globalCompositeOperation = “multiply”;
[/html]
他のオブジェクトを通常の描画モードで描画したいときは、その都度上記のglobalCompositeOperationの値を上書き、表示させて、おわったら次の要素のタメに上書きしてオブジェクト作って表示の繰り返し（らしい）

createjsにかんするメモ書き

canvas直でいじるより楽。全体的な記述が。

ブレンド使いたいときはステージではなくオブジェクト単位で設定できる。
[html]
circles[i] = new createjs.Shape();
circles[i].compositeOperation = “multiply”;
[/html]

矩形の書き方

shapeClassを用意→その中のgraphicsインスタンス？に表示内容を記述していく
正円・オーバル・☆・正方形・長方形→用意されている描画用のメソッドで作成できる
[html]
var circle = new createjs.Shape();
circle.graphics.beginFill(‘red’).drawCircle( 0, 0, 100 );
[/html]

beginFillは何色で塗るか。beginStrokeは何色で線入れるか。

んで、用意した矩形をステージにaddChildしてupdateする。updateしないと表示されない。

[html]
stage.addChild(circle);
stage.update();
[/html]

繰り返しloopでアニメーション処理する場合はtickというイベントにリスナー仕掛ける。

EaselJS v0.8.1 API Documentation : EaselJS
http://www.createjs.com/docs/easeljs/classes/Graphics.html#method_drawRect

EaselJSのサイトに基礎はほぼほぼ書いてるけど、sampleCodeのみでdemoがないので
必要なところだけ読むといい。

テスト

See the Pen my first easel.js testing by Hiroko Nakahara (@hirokona) on CodePen.

雑感

お作法いっぱいあってめんどい。こればっかやって慣れたら楽になりそう。
あと、それ多分私がフラッシャーじゃないから。マスクとかもまだ触ってないからちんぷんかんぷん。
確かにcanvas直いじりよりcreatejs使ったほうがかな〜り楽そう。
だけど文献がdemoついてないからいちいちこのプロパティ何？って調べながらになって手間。英語ネイティブになりたい。