Edited at

create.js の使い方

More than 3 years have passed since last update.


create.js

HTML5 Canvasのフレームワーク


http://www.createjs.com/


EaselJSの基本的な使い方

https://jsfiddle.net/1kxc7zhn/4/

<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


トゥイーン

https://jsfiddle.net/q9u7ruwc/

<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