<div><h1 id="status">开始</h1>
</div>
<script src="js.js"></script>

 /*如果只是放歌，个人觉得Audio标签比这方便多了*/var displayStatus;
displayStatus = document.getElementById("status");
var src = "周杰伦 - 彩虹.mp3";
createjs.Sound.alternateExtensions=["mp3"];//确定播放mp3
createjs.Sound.addEventListener("fileload",playSound);//资源准备好触发
createjs.Sound.registerSound(src);//加载资源displayStatus.innerHTML="等待资源加载";function playSound(e){soundInstance = createjs.Sound.play(e.src);displayStatus.innerHTML="播放:"+ e.src;
}

4.PreLoadJS

需要preloadjs-0.6.0.min.js

<style>.image{max-width: 320px;max-height: 240px;border: 1px solid #555;margin: 5px;}
</style><img class="image" id="a"><img class="image" id="b"><img class="image" id="c">
<script src="js.js"></script>

</pre><pre name="code" class="javascript">var preload;
preload = new createjs.LoadQueue(false, "image/");var plugin = {getPreloadHandlers: function () {return {types:["image"],callback: function (src) {var id = src.toLowerCase().split("/").pop().split(".")[0];//浏览器报错,defeat,本js不是重点.var img = document.getElementById(id);return {tag: img};}}}
};preload.installPlugin(plugin);
preload.loadManifest(["a.png","b.png","c.png","d.png"
]);

2.CreateJS基础

1.EaselJS容器

    <script src="../../easeljs-0.7.1.min.js"></script><canvas id="gameView" width="400px" height="400px" style="background-color: pink"></canvas>
<script src="js.js"></script>

var stage = new createjs.Stage("gameView");//canvas的idvar Rect = new createjs.Shape();//创建可绘制的图形
Rect.graphics.beginFill("red");//颜色  graphics:绘图
Rect.graphics.drawRect(5,5,50,50);//四个方向
stage.addChild(Rect);//添加子视图//舞台操作,一般不用,用container
stage.alpha = 0.5;//舞台半透明
stage.x = 100;//x向右100,初始左上角
stage.y = 100;//y向下100
stage.scaleX = 2;//X轴放大2倍
stage.scaleY = 0.5;//Y缩放2倍stage.update();//舞台刷新

var stage = new createjs.Stage("gameView");
var gameView = new createjs.Container();//新建容器,有和stage一样的方法
stage.addChild(gameView);//放入舞台/*好处:可以同时移动*/
gameView.x = 100;
gameView.y = 100;var c = new Childcontainer();
gameView.addChild(c);stage.update();

function Childcontainer(){var Rect = new createjs.Shape();Rect.graphics.beginFill("red");Rect.graphics.drawRect(0,0,50,50);Rect.graphics.endFill();//结束绘制var Text = new createjs.Text("m","30px Arial","blue");this.addChild(Rect);this.addChild(Text);
}Childc

    <canvas id="gameView" width="400px" height="400px" style="background-color: gray"></canvas><script src="js.js"></script>

js.js

var stage = new createjs.Stage("gameView");
var gameView = new createjs.Container();
stage.addChild(gameView);var Rect = new createjs.Shape();//想要绘制需创建图形对象
Rect.graphics.beginFill("blue");
Rect.graphics.drawRect(0,0,100,50);//drawRect绘制矩形,坐标0,0    宽100,高50
gameView.addChild(Rect);var Ellipse = new createjs.Shape();
Ellipse.graphics.beginFill("yellow");
Ellipse.graphics.drawEllipse(100,100,100,50);//椭圆  坐标100,100    宽100,高50
gameView.addChild(Ellipse);var c = new Circle();
c.setCircleType(Circle.TYPE_GREEN);
gameView.addChild(c);stage.update();

head加入js:

function Circle() {createjs.Shape.call(this);this.setCircleType = function (type) {this._circleType = type;switch (type) {caseCircle.TYPE_RED:this.setColor("red");break;caseCircle.TYPE_GREEN:this.setColor("green");break;}};this.setColor = function (color) {this.graphics.beginFill(color);this.graphics.drawCircle(120, 220, 50);//圆this.graphics.endFill();}this.setCircleType(Circle.TYPE_RED);
}Circle.prototype = new createjs.Shape();//指定图形入口
Circle.TYPE_RED = 1;
Circle.TYPE_GREEN = 2;

3.EaselJS事件

    <canvas id="gameView" width="400px" height="400px" style="background-color: pink"></canvas><script src="js.js"></script>

var stage = new createjs.Stage("gameView");
var gameView = new createjs.Container();
stage.addChild(gameView);var Rect = new createjs.Shape();
Rect.graphics.beginFill("red");
Rect.graphics.drawRect(0,0,100,100);gameView.addChild(Rect);stage.update();Rect.addEventListener("click", function (e) {//单击事件
//    alert("点击了");
//    alert("X="+ e.localX+",Y="+ e.localY);//获得坐标
});Rect.addEventListener("dblclick", function (e) {//双击事件
//    alert("双击了");
});
createjs.Ticker.setFPS(25);//动画速度
createjs.Ticker.addEventListener("tick",handlerTick);//ticker
var speedX = 10;
function handlerTick(){if(Rect.x<=0){//左边界speedX = Math.abs(speedX);}if(Rect.x >= 400-100){speedX = -Math.abs(speedX);}Rect.x += speedX;stage.update();
};

3.CreateJS控件

1.Text

<canvas id="gameView" width="600px" height="600px" style="background-color: pink"></canvas>
<script src="js.js"></script>

var canvas;
var stage;
var text;
var rect;
var count = 0;/*canvas = document.getElementById("gameView");
stage = new createjs.Stage(canvas);*/
stage = new createjs.Stage("gameView");text = new createjs.Text("我是文字内容..0","36px Arial","red");
text.x = 300;
text.y = 300;
/*text.rotation =20;//旋转20度*/
stage.addChild(text);rect = new createjs.Shape();
rect.x = text.x;
rect.y = text.y;
/*rect.rotation = text.rotation;*/
stage.addChildAt(rect,0);//addChild无法添加子元素,会覆盖createjs.Ticker.setFPS(6);
createjs.Ticker.addEventListener("tick",handlertick);function handlertick(e){count++;text.text = "我是文字内容.."+count;rect.graphics.clear()//清除之前的,重绘图形.beginFill("blue").drawRect(-10,-10,text.getMeasuredWidth()+20,50);text.rotation = count;rect.rotation = text.rotation;stage.update();
}

2.BitMap

需要:easeljs-0.7.1.min.js

<canvas id="gameView" width="600px" height="600px" style="background-color: pink"></canvas>
<script src="js.js"></script>

var stage = new createjs.Stage("gameView");
var gameView  = new createjs.Container();
stage.addChild(gameView);var bitmap = new createjs.Bitmap("8.png");
gameView.addChild(bitmap);createjs.Ticker.setFPS(30);//一直刷新显示,效率低
createjs.Ticker.addEventListener("tick", function () {stage.update();
});

3.MovieClip

需要:easeljs-0.7.1.min.js,tweenjs-0.6.0.min.js,movieclip-0.7.1.min.js

<canvas id="gameView" width="600px" height="600px" style="background-color: pink"></canvas>
<script src="js.js"></script>

var stage = new createjs.Stage("gameView");
createjs.Ticker.setFPS(30);
createjs.Ticker.addEventListener("tick", stage);//舞台刷新var mc = new createjs.MovieClip(null, 0, true, {start: 50,stop:0})//渲染,启始位置,是否可循环,起始时间线
stage.addChild(mc);var state1 = new createjs.Shape(new createjs.Graphics().beginFill("red").drawCircle(0, 100, 30));
var state2 = new createjs.Shape(new createjs.Graphics().beginFill("blue").drawCircle(0, 100, 30));mc.timeline.addTween(createjs.Tween.get(state1).to({x: 0}).to({x: 400}, 100).to({x: 0}, 100)//时间线总100
);mc.timeline.addTween(createjs.Tween.get(state2).to({x: 400}).to({x: 0}, 100).to({x: 400}, 100)
);mc.gotoAndPlay("start");

4.Sprite

需要:easeljs-0.7.1.min.js

<canvas id="gameView" width="960px" height="400px" style="background-color: pink"></canvas>
<script src="js.js"></script>

var stage = new createjs.Stage("gameView");var ss = new createjs.SpriteSheet({"images":["4.png"],"frames":{"height":100,//每份图片的高"width":100,//每份图片的宽"count":2//总共几张图},"animations":{"a":[0,1,"b"],//状态a的图是从号码*-*"b":[1,2,"a"]}
});var s = new createjs.Sprite(ss,"a");
s.x=100;
s.y=100;stage.addChild(s);
createjs.Ticker.setFPS(60);
createjs.Ticker.addEventListener("tick",stage);

5.DOMElement

需要:easeljs-0.7.1.min.js

<div id="div" style="background-color: aqua;width: 200px;height: 200px"><button id="btn" width="100px" height="50px" οnclick="alert(1)">按钮</button>
</div>
<canvas id="gameView" width="960px" height="400px"></canvas>
<script src="js.js"></script>

var stage = new createjs.Stage("gameView");
var container = new createjs.Container();stage.addChild(container);
container.x = 100;
container.y = 100;var content = new createjs.DOMElement("div");
container.addChild(content);
stage.update();