EaselJS简明教程1-绘图
系列教程目录
EaselJS简明教程1-绘图
EaselJS简明教程2-动画
1.引言
EaselJS是CreateJS Suite中的一个js库，它可以让canvas的使用变得简单，它提供了一个直接了当的创建html5 canvas中使用富媒体、富交互应用的解决方案。
大家可以到官方网站了解js库的最新进展，也可以使用官方的DEMO和教程进行学习。
为了便于大家学习，结合官方教程和官方DEMO我们来写一个简明教程，主要是对自己的学习做个梳理，也希望对大家有所帮助。好的小伙伴们，我们开工吧。
2.准备工作
搭好台子好唱戏，我们首先把html文档弄好，然后在里面来体验EaselJS。
<!DOCTYPE html>
<html>
<head>
<script src="http://code.createjs.com/easeljs-0.7.0.min.js"></script>
<script>
function init() {
// code here.
}
</script>
</head>
<body onLoad="init();">
<canvas id="demoCanvas" width="500" height="300">
alternate content
</canvas>
</body>
</html>在html里我们弄一个canvas作为我们的演武场，head里面引入EaselJS库，然后再来写我们的代码。
引入EaselJS库可以有这么几种方式：
- 导入你下载到本地的EaselJS库
- 在线导入CreateJS CDN里的文件，这样做有个好处，我们可以实现跨用户的缓存，但是CDN里只提供稳定的版本。
- 单独导入没有编译的文件（在/src文件夹里）
第五行的空的init函数将在页面onload时加载，我们接下来在init里继续我们的内容，我们在canvas中新建一个stage对象。createjs不愧是adobe主导开发的，这个stage让人立刻想到了Flash。
var stage = new createjs.Stage("demoCanvas");这行代码将新建一个stage对象，并且把它放在canvas里，所有的显示对象都要放在stage里，参数可以是canvas的id或者canvas对象。
这里的Stage类，是EaselJS里的顶级显示对象类，拥有类似AS里的显示对象的方法，比如addChild，addChildAt，getChildAt等方法，详细内容参见官方文档。
3.绘图
接下去我们来画个圆，并且把它添加到stage
var circle = new createjs.Shape();
circle.graphics.beginFill("red").drawCircle(0, 0, 50);
circle.x = 100;
circle.y = 100;
stage.addChild(circle);然后，我们调用Stage类的update方法，把stage的改动更新到canvas里。
stage.update();这样我们就完成了，最简单的画圆操作，大家可以看看 DEMO。
绘图操作利用Graphics类实现，我们来仔细的研究研究Graphics类。
3.1Graphics类
Graphics类有两个比较有意思的特性，链式操作和简写方法。
链式操作。因为Graphics类里的所有绘图方法都会返回一个graphics实例，因此可以使用链式操作。
myGraphics.beginStroke("#F00").beginFill("#00F").drawRect(20, 20, 100, 50).draw(myContext2D);这行代码将绘制一个蓝色填充、红色描边的矩形，并且将它渲染到相应的
context2D里。
简写方法（官方文档叫做“Tiny API”）。所有的简写方法都被定义成了protected方法，在创建压缩文档时很有用。
| mt | moveTo | lt | lineTo |
| a/at | arc / arcTo | bt | bezierCurveTo |
| qt | quadraticCurveTo (also curveTo) | r | rect |
| cp | closePath | c | clear |
| f | beginFill | lf | beginLinearGradientFill |
| rf | beginRadialGradientFill | bf | beginBitmapFill |
| ef | endFill | ss | setStrokeStyle |
| s | beginStroke | ls | beginLinearGradientStroke |
| rs | beginRadialGradientStroke | bs | beginBitmapStroke |
| es | endStroke | dr | drawRect |
| rr | drawRoundRect | rc | drawRoundRectComplex |
| dc | drawCircle | de | drawEllipse |
| dp | drawPolyStar | p | decodePath |
myGraphics.s("#F00").f("#00F").r(20, 20, 100, 50).draw(myContext2D);
3.2 实例-绘制笑脸
var stage=new createjs.Stage("demoCanvas");
//绘制圆形
var circle=new createjs.Shape();
circle.graphics.f("#f00").dc(0,0,100).ef();
circle.x=500;
circle.y=240;
stage.addChild(circle);
//绘制眼睛
var eye=new createjs.Shape();
eye.graphics.f("rgba(0,0,20,.5)").de(0,0,20,40).ef;
eye.x=450;
eye.y=180;
stage.addChild(eye);
var eye2=new createjs.Shape();
eye2.graphics=eye.graphics.clone();
eye2.x=530;
eye2.y=180;
stage.addChild(eye2);
//绘制鼻子
var nose=new createjs.Shape();
nose.graphics.f("rgba(0,0,20,.5)").dc(0,0,10).ef;
nose.x=500;
nose.y=250;
stage.addChild(nose);
//绘制嘴巴
var mouth=new createjs.Shape();
mouth.graphics.ss(4).s("rgba(0,0,0,.5)").a(0,0,100,Math.PI*60/180,Math.PI*120/180);
mouth.x=500;
mouth.y=200;
stage.addChild(mouth);
stage.update();完工！暂时到这里。本教程为系列教程，未完待续。
---------------------------------------------------------------
前端开发whqet，关注web前端开发技术，分享网页相关资源。
---------------------------------------------------------------