EaselJS简明教程1-绘图

来源：互联网发布：中国雾霾数据统计编辑：程序博客网时间：2024/05/20 13:05

系列教程目录

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方法，在创建压缩文档时很有用。

mtmoveToltlineToa/atarc / arcTobtbezierCurveToqtquadraticCurveTo (also curveTo)rrectcpclosePathcclearfbeginFilllfbeginLinearGradientFillrfbeginRadialGradientFillbfbeginBitmapFillefendFillsssetStrokeStylesbeginStrokelsbeginLinearGradientStrokersbeginRadialGradientStrokebsbeginBitmapStrokeesendStrokedrdrawRectrrdrawRoundRectrcdrawRoundRectComplexdcdrawCirclededrawEllipsedpdrawPolyStarpdecodePath使用简写方法，刚刚那个链式操作的代码可以更新为，简化了很多。

 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();

完工！暂时到这里。本教程为系列教程，未完待续。

0 0