create.js

HTML5 Canvasのフレームワーク

http://www.createjs.com/

EaselJSの基本的な使い方

<html lang="ja">
<head>
<meta charset="UTF-8">
<title>canvas</title>
</head>
<body>

<canvas id="my-canvas" width="640" height="480"></canvas>

<script src="https://code.createjs.com/easeljs-0.8.2.min.js"></script>
<script>
window.onload = function() {

  // 使用するcanvasを取得
  var canvas = document.getElementById("my-canvas");

  // ステージを関連付ける
  var stage = new createjs.Stage( canvas );

  // 赤い丸を描画
  var circle = new createjs.Shape();
  circle.graphics.beginFill("#FF0000");
  circle.graphics.drawCircle(0, 0, 50);
  circle.graphics.endFill();
  circle.x = 100;
  circle.y = 100;
  stage.addChild(circle);

  // ステージを更新
  stage.update();
}
</script>
</body>
</html>

参考

canvasをFlashライクに扱える！EaselJSの基本的な使い方 | kudox.jp
http://kudox.jp/java-script/createjs-easeljs

トゥイーン

<html lang="ja">
<head>
<meta charset="UTF-8">
<title>canvas</title>
</head>
<body>

<canvas id="my-canvas" width="640" height="480"></canvas>

<script src="https://code.createjs.com/easeljs-0.8.2.min.js"></script>
<script src="https://code.createjs.com/tweenjs-0.6.2.min.js"></script>

<script>
window.onload = function() {

  // 使用するcanvasを取得
  var canvas = document.getElementById("my-canvas");

  // ステージを関連付ける
  var stage = new createjs.Stage( canvas );

  // 赤い丸を描画
  var circle = new createjs.Shape();
  circle.graphics.beginFill("#FF0000");
  circle.graphics.drawCircle(0, 0, 50);
  circle.graphics.endFill();
  circle.x = 100;
  circle.y = 100;
  stage.addChild(circle);

  // フェードイン
  circle.alpha = 0;
  createjs.Tween.get(circle).to({alpha:1}, 3000);

  // フレームレート30で、ステージを更新
  createjs.Ticker.setFPS(30);
  createjs.Ticker.addEventListener("tick", stage);
  stage.update();
}
</script>
</body>
</html>

参考

トゥイーンで簡単canvasアニメーション！TweenJSの使い方 | kudox.jp
http://kudox.jp/java-script/createjs-tweenjs

TweenJSのTimelineを使ったテキストアニメーション | kudox.jp
http://kudox.jp/java-script/createjs-tweenjs-timeline

CreateJSでキラキラと輝くTwinkle表現に挑戦 | kudox.jp
http://kudox.jp/java-script/createjs-shape-twinkle

EaselJSのMouseEventを理解しよう | kudox.jp
http://kudox.jp/java-script/createjs-easeljs-mouseevent

その他

スマートフォンやタブレットのタッチイベントに対応させる

if (createjs.Touch.isSupported()) {
  createjs.Touch.enable(_stage);
}

参考

JavaScript | kudox.jp
http://kudox.jp/java-script/

バージョンアップしたCreateJSを試してみたよ | kudox.jp
http://kudox.jp/java-script/createjs-update-2012-august

CreateJSの名前空間
EaselJSのマルチタッチサポート
TweenJSのonChangeイベントハンドラ
PreloadJSのXML対応
その他の変更点・新機能

PreloadJSで外部ファイルを読み込む | kudox.jp
http://kudox.jp/java-script/createjs-preloadjs

create.js の使い方

create.js

EaselJSの基本的な使い方

参考

トゥイーン

参考

その他

スマートフォンやタブレットのタッチイベントに対応させる

参考