H5动画入门 Easeljs篇（学习笔记）

CreateJS是一套包含了各种方便开发HTML5应用的Javascript类库和工具的套件。

• EaselJS：简化处理HTML5画布。
• TweenJS：用来帮助调整HTML5和Javascript属性。
• SoundJS：用来简化处理HTML5 audio。
• PreloadJS：帮助管理和协调加载中的一些资源。

1、先创建一个画布

2、我们要引用easeljs

3、我们通过JS来获得这个画布并画一个普通的圆形

// 获得画布
var stage = new createjs.Stage("demoCanvas");
// 创建一个圆形
var circle = new createjs.Shape();
// 填充一个圆形
circle.graphics.beginFill("DeepSkyBlue").drawCircle(0, 0, 50);
circle.x = 100;
circle.y = 100;
// 在画布中添加这个圆形
stage.addChild(circle);
// 更新画布，需要注意的是画布只有更新后，添加的元素才会显示
stage.update();

---

以下是完整的代码

其中EaselJS的Graphics类可以生成很多不同的图形，我们这里只用到了最简单的圆形。

如果要在画布上添加多个元素，则每次增加元素都需要进行stage.update()的操作，这样会很麻烦，所以我们使用Createjs中提供的Ticker来解决每个更新的问题。

createjs.Ticker.addEventListener("tick", handleTicker);
function handleTicker() {
    stage.update();
}

JS代码更新内容如下：

var stage = new createjs.Stage("demoCanvas");
function init() {
    var circle = new createjs.Shape();
    circle.graphics.beginFill("DeepSkyBlue").drawCircle(0, 0, 50);
    circle.x = 100;
    circle.y = 100;
    stage.addChild(circle);
}
createjs.Ticker.addEventListener("tick", handleTicker);
function handleTicker() {
    stage.update();
}

下面我们再在圆形上添加几个字，这里用到了Createjs提供的Text函数new createjs.Text("动画特效", "normal 18px microsoft yahei", "#fff")

JS代码更新内容如下：

var stage = new createjs.Stage("demoCanvas");
function init() {
    var circle = new createjs.Shape();
    circle.graphics.beginFill("DeepSkyBlue").drawCircle(0, 0, 50);
    circle.x = 100;
    circle.y = 100;
    stage.addChild(circle);
    var title = new createjs.Text("动画特效", "normal 18px microsoft yahei", "#fff");
    title.x = 65;
    title.y = 90;
    stage.addChild(title);
}
createjs.Ticker.addEventListener("tick", handleTicker);
function handleTicker() {
    stage.update();
}

最后的样子如下：

Demo