Html5游戏框架createJs组件--EaselJS(二)绘图类graphics
有端友问我是否有文档，有确实有，但没有中文的，只有英文的，先提供浏览地址供大家参考学习createJs英文文档。
EaselJS其实主要就是createJs组件中控制canvas绘图的，那么就会涉及密切相关的绘图操作，绘图操作利用Graphics类实现，我们来仔细的研究研究Graphics类。
先回顾一下EaselJS(一里面的那个圆形绘图)：
<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> /* body{margin:0}*/ #canvas{border:1px solid #ccc} </style> </head> <body> <canvas id="canvas" width="500" height="500">您的浏览器不支持canvas标签，请更换高级浏览器。</canvas> <script type="text/javascript" src='http://cdn.staticfile.org/EaselJS/0.7.1/easeljs.min.js'></script> <script type="text/javascript" src='preloadjs-0.4.1.combined.js'></script> <script type="text/javascript"> onload=function(){ init(); } function init(){ var stage=new createjs.Stage('canvas'); //构建显示对象的容器 var container=new createjs.Container(); var circle=new createjs.Shape(),squra=new createjs.Shape(),arcY=new createjs.Shape(); //这里的drawCircle前两个参数为参照起始坐标 circle.graphics.beginFill('red').drawCircle(0,0,50); circle.x=circle.y=100; //底用链式，Graphics类里的所有绘图方法都会返回this squra.graphics.beginFill('blue').drawRect(0,0,100,100).endFill(); circle.graphics.endFill(); //但是有一点不明白就是后画的东西应该覆盖先画的 arcY.graphics.beginFill('green').arc(200,100,80,60,2*Math.PI).endFill(); //container不能用链式操作 container.addChild(arcY); container.addChild(circle); container.addChild(squra); stage.addChild(container); stage.update(); } </script> </body> </html>
有一点明白了，覆盖的问题，就是你添加到画布上的先后顺序即，container.addChild()或stage.addChild()的先后顺序。
就可清楚的看到绘制图形时，是如何利用graphics类的。Graphics类有两个比较有意思的特性，链式操作和简写方法。链式操作。因为Graphics类里的所有绘图方法都会返回一个graphics实例，因此
可以使用链式操作。
针对graphics类，官网也有简写方法（官方文档叫做“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 |
使用简写方法，就如下面所示，很方便（建议不熟练的就不要简写了，不简写加深印象岂不更好）。
squra.graphics.f('blue').dr(0,0,100,100).ef();
实例，利用graphics类对象，来画脸：
<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> /* body{margin:0}*/ #canvas{border:1px solid #ccc} </style> </head> <body> <canvas id="canvas" width="800" height="500">您的浏览器不支持canvas标签，请更换高级浏览器。</canvas> <script type="text/javascript" src='http://cdn.staticfile.org/EaselJS/0.7.1/easeljs.min.js'></script> <script type="text/javascript"> onload=function(){ init(); } function init(){ var stage=new createjs.Stage('canvas'), container=new createjs.Container(); //绘制笑脸 var cricle=new createjs.Shape(); cricle.graphics.beginFill("orange").drawCircle(0,0,100).endFill(); cricle.x=300; cricle.y=240; container.addChild(cricle); //绘制眼睛左边 var eye=new createjs.Shape(); //drawEllipse ( x y w h ) ,x为左边的坐标点的椭圆和y为右边的坐标点的椭圆，w为椭圆的宽带，h为椭圆的高度 eye.graphics.beginFill("rgba(0,0,20,.5)").drawEllipse(0,0,40,20).endFill(); //设置形状实例的圆心坐标 eye.x=240; eye.y=180; container.addChild(eye); //绘制眼睛，右边 var eye1=new createjs.Shape(); eye1.graphics.beginFill("rgba(0,0,20,.5)").drawEllipse(0,0,40,20).endFill('orange'); eye1.x=320; eye1.y=180; container.addChild(eye1); //绘制鼻子 var nose=new createjs.Shape(); nose.graphics.beginFill("rgba(0,0,20,.5)").drawCircle(0,0,10).endFill(); nose.x=300; nose.y=250; container.addChild(nose); //绘制嘴巴 var mouth=new createjs.Shape(); //setStrokeStyle ( thickness [caps=0] [joints=0] [miterLimit=10] [ignoreScale=false] ) //thickness描边的宽度，caps交叉的样式0为平头，1为圆头，2为方头 mouth.graphics.setStrokeStyle(8,"round").beginStroke("mouth").arc(0,0,100,Math.PI*60/180,Math.PI*120/180).endFill(); mouth.x=300; mouth.y=200; container.addChild(mouth); stage.addChild(container); stage.update(); } </script> </body> </html>
最后说一下circle.drawCircle(x,y,radius),circle.x,circle.y之间的关系（可能有时候容易混淆）：
//circle.drawCircle(x,y,radius),circle.x,circle.y
//通常我们可以直接例circle.drawCircle(0,0,100)，代表以圆心坐标(0,0),以100为半径画圆
//然而我们设置circle.drawCircle(0,0,100)，circle.x=100,circle.y=100则是以圆心(100,100),以100为半径画圆，circle.x和circle.y,其实是相对于初始圆心位置x,y的偏移量
//再做一个例子就理解了，如circle.drawCircle(10,10,100)，circle.x=100,circle.y=100，则是以圆心(110,110),以100为半径画圆
cricle.graphics.beginFill("orange").drawCircle(0,0,100).endFill();
cricle.x=300;
cricle.y=240;
鉴于有伙伴问我，如何设置渐变:
var g = new createjs.Shape(); g.graphics.beginLinearGradientFill(["#000","#FFF","red"], [0, 0.8,1], 0, 20, 0, 120).drawRect(20, 20, 120, 120); container.addChild(g);
设置文字换行：
var text = new createjs.Text("Hello \n World ", "20px Arial", "#ff7700"); text.x = 200; text.y = 300; text.textBaseline = "alphabetic"; container.addChild(text);