Html5游戏框架createJs组件--EaselJS，二绘图类graphics

2024-04-10 00:58•html•阅读 3032

　　　有端友问我是否有文档，有确实有，但没有中文的，只有英文的，先提供浏览地址供大家参考学习createJs英文文档。

EaselJS其实主要就是createJs组件中控制canvas绘图的，那么就会涉及密切相关的绘图操作，绘图操作利用Graphics类实现，我们来仔细的研究研究Graphics类。

先回顾一下EaselJS(一里面的那个圆形绘图)：

<!DOCTYPE HTML>
<html >
<head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
        /*        body{margin:0}*/
                #canvas{border:1px solid #ccc}
        </style>
</head>
<body>
        <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 >
<head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
        /*        body{margin:0}*/
                #canvas{border:1px solid #ccc}
        </style>
</head>
<body>
        <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);

上一篇 »使用python中的matplotlib进行绘图分析数据
下一篇 »【Python开发】使用python中的matplotlib进行绘图分析数据

Html5游戏框架createJs组件--EaselJS，二绘图类graphics

相关推荐

前端面试题整理汇总二

利用django form组件+ajax实现用户认证

2022跨年烟花代码（二）HTML5点击泡沫横飞烟花特效

使用MUI/html5plus集成微信支付需要注意的几点问题？

html5 中创建manifest缓存以及更新方法

基于Java编写一个简单的风控组件

css 的弱化与 js 的强化，转

基于Java+Selenium的WebUI自动化测试框架，九-----基础页面类