有端友問我是否有文檔，有確實有，但沒有中文的，只有英文的，先提供瀏覽地址供大家參考學習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);