CreateJS是一套包含了各种方便开发HTML5应用的Javascript类库和工具的套件。
- EaselJS：简化处理HTML5画布。
- TweenJS：用来帮助调整HTML5和Javascript属性。
- SoundJS：用来简化处理HTML5 audio。
- PreloadJS：帮助管理和协调加载中的一些资源。
1、先创建一个画布
<canvas id="demoCanvas" width="500" height="300"></canvas>
2、我们要引用easeljs
<script src="lib/easeljs-0.8.2.combined.js" charset="utf-8"></script>
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();
以下是完整的代码
<html>
<head>
<title>动画特效</title>
<script src="lib/easeljs-0.8.2.combined.js" charset="utf-8"></script>
</head>
<body onload="init();">
<canvas id="demoCanvas" width="500" height="300"></canvas>
<script>
function init() {
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();
}
</script>
</body>
</html>
其中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
