在原生的Canvas中，没有DisplayObject的概念，只有绘制图片的概念。大多数原生图形或图像的API一般是这样的：api(x,y,...)比如rect就是：ctx.rect(x,y,width,height)。这些绘图API大多封装在CreateJS的Graphics类中，它们有一个共同的特点——名称都以draw开头，例如：drawRect/drawCircle。为什么大部分绘图API都封装在Grahpics类中？很简单，Graphics类就是处理图形绘制的，所以也可以说所有的图形绘制API都封装在Graphics类中。绘图API还有一个功能------绘制图像，这个功能封装在Bitmap类中。我以前是这样想的：“graphics.draw*(x,y,...)的参数就是displayObject的属性x,y”。但其实这个思路很容易验证得到它的错误：varrect=newcreatejs.Shape();rect.graphics.drawRect(50,50,100100);stage.addChild(rect);console.log(rect.x,rect.y);Graphics工作原理浅析GraphicsdrawRectAPI源码：https://www.createjs.com/docs...https://www.createjs.com/docs...https://www.createjs.com/docs...https://www.createjs.com/docs...代码很简单，如下：创建一个“Rect实例”；“Rectconstructor”将实现drawRect的代码挂载到prototype.exec下，并将“Rectinstance”追加到数组_activeInstructions中（第四张截图）；为什么在返回“Graphics”实例时需要一个数组（_activeInstructions）来存储本机指令？对于矩形、圆形、圆角矩形，真的不需要数组来存储指令；但梯形、三角形等图形没有对应的原生API，需要使用绘制线段或孤线（ctx.moveTo/ctx.lineTo/ctx.arc）组合生成，数组_activeInstructions就是处理组合图形。Rect实例有什么作用？Rect实例是drawRect返回的实例，而Graphics中还有其他的draw*API，会返回各自图形的实例，所以Rect实例和其他实例可以统称为“基本图形实例”。“基本图形实例”的作用是提供修改图形的接口。从第四张截图可以看到，“基本图形实例”最终挂载在“图形实例”的command属性下，也就是说可以通过“图形实例”的命令访问到最新的“基本图形实例”》，写一个测试代码如下：vargcircle=circle.graphics.beginFill("00ff00").drawCircle(0,0,10);圆.x=圆.y=100；stage.addChild（圆圈）；阶段.更新（）；setTimeout(function(){gcircle.command.radius=50;stage.update();},1000);此功能在动态绘制图形时非常有用，但它有一个缺点：仅提供对最近的BasicGraphicsInstance的访问。也就是说，对于自定义组合图形，如果需要访问对应的“基础图形实例”，则需要拆解绘制过程，例如：//trianglevarthreeangle=newcreatejs.Shape();threeangle.graphics.beginFill("00ff00").moveTo(50,0).lineTo(0,50).lineTo(100,50).closePath();stage.addChild（三角）；阶段.更新（）；如果要完成底部两个端点动画：//trianglevarthreeangle=newcreatejs.Shape();threeangle.graphics.beginFill("00ff00").moveTo(50,0);varp1=threeangle.graphics.lineTo(0,50).command;varp2=threeangle.graphics.lineTo(100,50).command;threeangle.graphics.closePath();stage.addChild（三角）；阶段.更新（）；setTimeout(function(){p1.y=100;stage.update();},1000);setTimeout(function(){p2.y=200;stage.update();},2000);Shape的工作原理https://www.createjs.com/docs...Shape很简单，就是生成一个DisplayObject实例，然后在这个实例中挂载一个Graphics实例。而它的工作原理（也就是它的渲染）如下：https://www.createjs.com/docs...即Shape实例的draw方法其实是直接调用Shape实例的draw方法图形实例。DisplayObject的工作原理DisplayObject的核心功能是处理DisplayObject实例的“矩阵变换”（即位移和变形），如下：https://www.createjs.com/docs...我在Container的实现使用原生Canvas实现Container的原理。其实一个Shape实例也是一个Container，只是CreateJS限制了一个shape只能持有一个Graphics实例，一个shape只能存储一个Graphics实例（即shape下的graphics属性），而多个“基础图形实例”"可以存储在Graphics实例下。**从嵌套维度来看，Graphics和DisplayObject的关系是：Container>Shape>Graphics>Rect/Circle/RoundRect等基础图形**其实CreateJS根本不需要实现这个。PIXI在实现Graphics的时候，Graphics也是一个Container，可以像普通的DisplayObject一样使用，免去了CreateJS的麻烦。
