Html5遊戲框架createJs組件--EaselJS(二)繪圖類graphics

時間 2020-08-11

標籤 html5 html 遊戲框架 createjs 組件 easeljs 繪圖 graphics 欄目 HTML5 简体版

原文原文鏈接

　　　有端友問我是否有文檔，有確實有，但沒有中文的，只有英文的，先提供瀏覽地址供你們參考學習createJs英文文檔。

      EaselJS其實主要就是createJs組件中控制canvas繪圖的，那麼就會涉及密切相關的繪圖操做，繪圖操做利用Graphics類實現，咱們來仔細的研究研究Graphics類。

      先回顧一下EaselJS(一里面的那個圓形繪圖)：javascript

<!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()的前後順序。css

就可清楚的看到繪製圖形時，是如何利用graphics類的。Graphics類有兩個比較有意思的特性，鏈式操做和簡寫方法。鏈式操做。由於Graphics類裏的全部繪圖方法都會返回一個graphics實例，所以

能夠使用鏈式操做。

針對graphics類，官網也有簡寫方法（官方文檔叫作「Tiny API」）。全部的簡寫方法都被定義成了protected方法，在建立壓縮文檔時頗有用html

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

　　使用簡寫方法，就以下面所示，很方便（建議不熟練的就不要簡寫了，不簡寫加深印象豈不更好）。java

squra.graphics.f('blue').dr(0,0,100,100).ef();

　　實例，利用graphics類對象，來畫臉：canvas

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

　　設置文字換行：ui

                        var text = new createjs.Text("Hello \n World ", "20px Arial", "#ff7700");
                        text.x = 200;
                        text.y = 300;
                        text.textBaseline = "alphabetic";
                        container.addChild(text);