CreateJs教程2章：easeljs简介

CreateJs教程：easeljs简介

CreateJS的4大组件，我们先学习EaselJs。EaselJs=Easel+Js=

EaselJs将图形通过Html5 Canvas绘制到屏幕中，EaselJs提供了很多绘制API、舞台API、帧数API,帮助实现流畅的渲染。EaselJs依赖与Html5 Canvas,所以如果你会Html5 Canvas，那么学习EaselJs会得鱼如水。当然，如果你没有学习过Canvas问题也不大，本课程非常移懂。

EaselJs教程源码下载

EasylJs是开源项目，学习之前，我们先在github下载EasylJs：

EasylJs下载地址

Easeljs源码目录

本教程使用到的所有案例的代码下载地址

EaselJs教程的第一个demo

首先看一下EaselJs的第一个demo,这个例子在canvas中渲染了一段文字，如下图：

easeljs文字

源码如下，在这里也能下载我们的所有源码。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>EaselJS 案例: 显示文本</title>

	<link href="../_easel-assets/css/shared.css" rel="stylesheet" type="text/css"/>
	<link href="../_easel-assets/css/examples.css" rel="stylesheet" type="text/css"/>
	<script src="../_easel-assets/js/examples.js"></script>

	<script src="../lib/easeljs-NEXT.js"></script>

<script id="editable">
	function init() {
		// 获取canvas的引用:
		var canvas = document.getElementById("testCanvas");

		// 创建一个显示的舞台
		var stage = new createjs.Stage(canvas);

		// 创建一个文字对象:
		var text = new createjs.Text("Hello World!", "36px Arial", "#777");
		text.textAlign = "center";

		// 将文本添加到舞台. 
		stage.addChild(text);

		// 设置位置
		text.x = canvas.width / 2;
		text.y = 180;

		// 渲染更新舞台中的内容
		stage.update();
	}
</script>
</head>

<body onload="init();">

<header class="EaselJS">
	<h1>EaselJS的Hello World!例子</h1>

	<p>Hello World 这个例子使用了 <code>Text</code> and <code>Stage</code>.</p>
</header>

<div>
	<canvas id="testCanvas" width="960" height="400"></canvas>
</div>
</body>
</html>

下面对这个例子做详细解释

引入easeljs的js库

要使用easeljs，需要引入相应的easeljs库，上面的代码中，首先引入了2个css文件：

<link href="../_easel-assets/css/shared.css" rel="stylesheet" type="text/css"/>
<link href="../_easel-assets/css/examples.css" rel="stylesheet" type="text/css"/>
  • shared.css是一些共享的通用css样式，可以不引用
  • examples.css是我们例子自定义的样式，也可以不引用，自己写

引入js库：

<script src="../_easel-assets/js/examples.js"></script>
<script src="../lib/easeljs-NEXT.js"></script>
  • examples.js 是我们例子自定义的js
  • easeljs-NEXT.js 才是真正的easeljs库，其他都可以不引入，这个库要引入

EaselJS的绘图原理

引入需要的文件后，我们进入代码编写部分，首先我们看看EaselJS的绘图原理，EaselJS主要是用来在canvas上绘制图形、图像的，它的绘图原理是：

easeljs原理

结合上面的代码，我们来看一下：

用html新建一个canvas

EaselJS创建canvas，

<canvas id="testCanvas" width="960" height="400"></canvas>

EaselJS是在这个canvas元素中绘图的。

初始化函数init

当html页面加载完成后，会第一个会运行onload中的是初始化函数init：

<body onload="init();">

init函数中处理了EaselJS的绘图原理图中的事情。

init中的这句话，获取canvas的引用，canvas是在html中声明的。

var canvas = document.getElementById("testCanvas");

createjs.Stage创建一个舞台，舞台上可以容纳很多元素，舞台用于管理这些元素。createjs.Stage函数的参数是canvas画布：

var stage = new createjs.Stage(canvas);

现在舞台有了，需要一个演员，本例的演员是一个文本。我们先创建一个文本，createjs.Text用于创建文本，它接受3个参数，分别是文本内容，字体大小及字体，字体颜色。然后将text.textAlign设置为center，将字体居中。

var text = new createjs.Text("Hello World!", "36px Arial", "#777");
text.textAlign = "center";

然后我们将字体加入舞台中：

stage.addChild(text);

最后渲染舞台，stage.update()函数表示重新绘制一次舞台，如果不调用这个函数，可能画面不会有变化

stage.update()

小提示

EaselJS有哪些类，每个类有哪些小函数，其实我们是不知道的，这时候，可以使用webstrom最新版，这样就可以有函数提示了。