有端友问我是否有文档，有确实有，但没有中文的，只有英文的，先提供浏览地址供大家参考学习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.8,], , , , ).drawRect(, , , );

                        container.addChild(g);

　　设置文字换行：

                        var text = new createjs.Text("Hello \n World ", "20px Arial", "#ff7700");

                        text.x = ;

                        text.y = ;

                        text.textBaseline = "alphabetic";

                        container.addChild(text);

　　

Html5游戏框架createJs组件--EaselJS(二)绘图类graphics的更多相关文章

  1. Html5游戏框架createJS组件--EaselJS

    CreateJS库是一款HTML5游戏开发的引擎,是一套可以构建丰富交互体验的HTML5游戏的开源工具包,旨在降低HTML5项目的开发难度和成本,让开发者以熟悉的方式打造更具现代感的网络交互体验. 掌 ...

  2. Html5游戏框架createJs组件--EaselJS(一)

    现在html5小游戏越来越火爆了,由于公司业务的需要,也开发过几款微信小游戏,用canvas写的没有利用什么框架,发现性能一直不怎么好,所以楼主就只能硬着头皮去学习比较火的Adobe公司出的Creat ...

  3. Html5游戏框架createJs的简单用法

    声明:本文为原创文章,如需转载,请注明来源WAxes,谢谢!http://www.it165.net/pro/html/201403/11105.html 楼主记忆力不好,最近刚好用了一下create ...

  4. 主流HTML5游戏框架的分析和对比

    本文主要选取了Construct2.ImactJS.LimeJS.GameMaker.CreateJS.lycheeJS.Crafty.three.js.melonJS.Turbulenz.Quint ...

  5. Phaser开源2d引擎 javascript/html5游戏框架

    功能特点(Features) 易维护代码(Easy Asset Loading) Phaser可以加载图片,音频文件,数据文件,文本文件和自动解析精灵图和纹理地图集数据(出口纹理封隔器或Flash C ...

  6. Phaser开源2d引擎 html5游戏框架中文简介

    功能特点(Features) 易维护代码(Easy Asset Loading) Phaser可以加载图片,音频文件,数据文件,文本文件和自动解析精灵图和纹理地图集数据(出口纹理封隔器或Flash C ...

  7. 开源战棋 SLG 游戏框架设计思考（二）规则系统要考虑的因素

    游戏对象 1. 地块方格 地形:山脉.丘陵.乔木林.灌木林.平原.河流.湖泊.海洋.雪原.沼泽.沙漠.暗礁.滩涂.岛屿等等(需完善) 设施:铁路.公路.桥梁.机场.城市.村庄.岸防炮.要塞.废墟等等( ...

  8. 用Phaser来制作一个html5游戏——flappy bird （二）

    在上一篇教程中我们完成了boot.preload.menu这三个state的制作,下面我们就要进入本游戏最核心的一个state的制作了.play这个state的代码比较多,我不会一一进行说明,只会把一 ...

  9. 用Phaser来制作一个html5游戏——flappy bird （一）

    Phaser是一个简单易用且功能强大的html5游戏框架,利用它可以很轻松的开发出一个html5游戏.在这篇文章中我就教大家如何用Phaser来制作一个前段时间很火爆的游戏:Flappy Bird,希 ...

随机推荐

  1. 通过expect免自动输入密码登陆远程服务器

    通过expect免自动输入密码登陆远程服务器 1.前提必须已经安装expect 2.新建login.sh,文件内容如下 #!/usr/bin/expect -f spawn ssh root@140. ...

  2. Android四大组件之——Activity的开启：StartActivity()和StartActivityForResult()（图文详解）

                如需转载请在文章开头处注明本博客网址:http://www.cnblogs.com/JohnTsai       联系方式:JohnTsai.Work@gmail.com   ...

  3. 解决win8.1电脑无法安装手机驱动问题

    相信安装过win8.1的朋友都会有个问题,那就是自己的安卓手机怎么都连不上电脑,比如360助手.豌豆荚.91助手,都安不上驱动.下面几个简单步骤即可轻松解决. 1.首先声明,官方的驱动是完全支持win ...

  4. 小波变换——子带编码,Subband Coding

    离散小波变换.多级信号分解,多分辨率分析. Multiresolution Analysis(MRA.多分辨率分析) 子带编码(Subband Coding) 简称SBC. 一种以信号频谱为依据的编码 ...

  5. MTK 永不熄屏

    步骤一: 源码/frameworks/base/packages/SettingsProvider/res/values/defaults.xml 修改<integername=</int ...

  6. Linux服务器部署 Elasticsearch 成功，本机却访问不了

    Elasticsearch版本: elasticsearch- 服务器版本: CentOS release 6.8 (Final) 问题: Linux服务器上部署了 Elasticsearch 5.5 ...

  7. mysql的in查询分析

    群里山楂大仙和电台大神探讨到mysql的in查询的问题,问题如下: student表有class_id的索引,但是只查询一个的时候用索引,查两个就不用索引了 这是很奇怪的现象,我试了一下也是这样,真是 ...

  8. Docker-创建和分享应用（3）

          Dockerfile定义容器内环境中发生的事情.对网络接口和磁盘驱动器等资源的访问在此环境中进行虚拟化,该环境与系统的其他部分隔离,因此您需要将端口映射到外部世界,并具体说明要“复制”哪些 ...

  9. 【django】Error: [WinError 10013] 以一种访问权限不允许的方式做了一个访问套接字的尝试。

    问题描述:启动django服务时出现“Error: [WinError 10013] 以一种访问权限不允许的方式做了一个访问套接字的尝试.”的错误 问题原因:8000端口被占用了 解决办法:默认启动的 ...

  10. 一个简单的demo学习Android远程Service（AIDL的使用）

    这是milo很早之前写在论坛上的一个帖子,现在整理出来,milo也复习一下一般来说Android 的四大组件都是运行在同一个进程中的,但远程Service运行在不同的进程里.这进程间的通信是使用了An ...