createjs框架入门

发表于   |   分类于 ，   |  

这几天一直在看create.js，既然看了几天索性在此记录下。。

createjs

createjs基本上可以分为四大类:

  • EaselJS
  • TweenJS
  • SoundJS
  • PreloadJS

EaselJS基本上就是我们主要使用的.SoundJS加载音乐，PreloadJS相当于预加载，TweenJS相当于两个动画之间的调整使用

Easeljs

以下面这个例子为例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<canvas id="zone"></canvas>
</body>
<script src="../easeljs-0.8.2.min.js"></script>
<script>
	var canvas,
		stage,
		w=500,
		h=500;

	canvas=document.getElementById("zone");
	canvas.width=w;
	canvas.height=h;

	//这里创建一个画布
	stage=new createjs.Stage(canvas);
</script>
</html>

text

这里没什么好说的感觉。直接看例子

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
var canvas,
	stage,
	w=500,
	h=500,
	text,
	bounds;

canvas=document.getElementById("zone");
canvas.width=w;
canvas.height=h;

//这里创建一个画布
stage=new createjs.Stage(canvas);

//我们创建一些文字
text=new createjs.Text("hello zone","14px","red");
bounds= text.getBounds();
//设置文字垂直水平居中对齐
text.x=stage.canvas.width-bounds.width >>1;
text.y=stage.canvas.height-bounds.height >>1;

//这里把文字添加到容器中
stage.addChild(text);

//这里记住移动要刷新画布,才会显示
stage.update();

0_1471020816800_upload-d0b85891-687c-4f75-85d8-cf83046768dd

图像

说真的，我以前真的就以为canvas就是画图。。我特别喜欢画圆圈…
这里看这个例子

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
//这里我们画个圆
	var shape=new createjs.Shape();
		shape.graphics.beginStroke('#000').beginFill('#FF0000').drawRect(0,0,100,100);

	//将圆球加入画布
	
	stage.addChild(shape);

	//我们这里给小球添加一个监听事件,当我们点击小球的时候，小球停顿、变的半透明。
	
	var move;
	shape.addEventListener("click",function(){
		move=!move;
	})

	createjs.Ticker.setFPS(25);
	createjs.Ticker.addEventListener("tick",function(){
		if(!move){
			shape.x++;
			shape.alpha=1;
		}else{
			shape.alpha=0.5;
		}
		if(shape.x>=canvas.width){
			shape.x-=canvas.width;
		}
		stage.update();

	})

spriteSheep

这里精灵图 主要是做动画.