EaselJS简明教程1-绘图

来源：互联网发布：2006年网络歌曲大全编辑：程序博客网时间：2024/05/20 11:19

1.引言

EaselJS是CreateJS Suite中的一个js库，它可以让canvas的使用变得简单，它提供了一个直接了当的创建html5 canvas中使用富媒体、富交互应用的解决方案。

大家可以到官方网站了解js库的最新进展，也可以使用官方的DEMO和教程进行学习。

为了便于大家学习，结合官方教程和官方DEMO我们来写一个简明教程，主要是对自己的学习做个梳理，也希望对大家有所帮助。好的小伙伴们，我们开工吧。

2.准备工作

搭好台子好唱戏，我们首先把html文档弄好，然后在里面来体验EaselJS。

[html] view plaincopyprint?
<!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。

[javascript] view plaincopyprint?
var stage = new createjs.Stage("demoCanvas");  

这行代码将新建一个stage对象，并且把它放在canvas里，所有的显示对象都要放在stage里，参数可以是canvas的id或者canvas对象。

这里的Stage类，是EaselJS里的顶级显示对象类，拥有类似AS里的显示对象的方法，比如addChild，addChildAt，getChildAt等方法，详细内容参见官方文档。

3.绘图

接下去我们来画个圆，并且把它添加到stage

[javascript] view plaincopyprint?
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里。

[javascript] view plaincopyprint?
stage.update();  

这样我们就完成了，最简单的画圆操作，大家可以看看DEMO。

绘图操作利用Graphics类实现，我们来仔细的研究研究Graphics类。

3.1Graphics类

Graphics类有两个比较有意思的特性，链式操作和简写方法。

链式操作。因为Graphics类里的所有绘图方法都会返回一个graphics实例，因此可以使用链式操作。

[javascript] view plaincopyprint?
myGraphics.beginStroke("#F00").beginFill("#00F").drawRect(20, 20, 100, 50).draw(myContext2D);  

这行代码将绘制一个蓝色填充、红色描边的矩形，并且将它渲染到相应的context2D里。

简写方法（官方文档叫做“Tiny API”）。所有的简写方法都被定义成了protected方法，在创建压缩文档时很有用。

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

[javascript] view plaincopyprint?
myGraphics.s("#F00").f("#00F").r(20, 20, 100, 50).draw(myContext2D);  

3.2 实例-绘制笑脸

[javascript] view plaincopyprint?
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前端开发技术，分享网页相关资源。

0 0