之前在做“双十一攻略页”的时候就发现了这个细节，不过当时没怎么注意，今天又遇到了。创建js代码：varstage=newcreatejs.Stage(canvas);varcontainer=newcreatejs.Container();varrect=newcreatejs.Shape();rect.graphics.beginFill("#ff0000").drawRect(0,0,750,1206);varmask=newcreatejs.Shape();mask.graphics.beginFill("#000000").drawRect(0,0,750,100);rect.mask=掩码；container.regX=container.regY=container.x=container.y=375;rect.y=0;//这里的值变成了20，可以观察BUGcontainer.addChild(rect);stage.addChild（容器）；阶段.更新();rect.y===0，截图如下：rect.y===20，截图如下：在使用过程中发现mask的BUGmask：元素的mask不会跟随位移变形元素的（旋转、缩放、倾斜）。原生canvas中不存在mask的概念，PIXI或者CreateJS中出现mask更像是借用了css3中mask属性的概念。原生的Canvas使用clip的方式来实现遮罩效果。从原生画布的角度来看：遮罩的状态和应用遮罩的元素是等价的。从createjs遮罩中，CreateJS文档对遮罩进行了如下解释：为该显示对象定义矢量遮罩（剪切路径）的Shape实例。形状的变换将相对于显示对象的父坐标应用（就好像它是父对象的子对象一样）。https://www.createjs.com/docs...虽然文档明确指出掩码等效于（好像）应用了掩码的元素的父元素的子元素；简单的说，一个mask就是和应用了mask的元素之间的兄弟关系（级别）。可以说遮罩和应用遮罩的元素是两个独立的元素，这也是“元素的遮罩不跟随元素的位移或变形”的根本原因。从源码分析：https://www.createjs.com/docs...这块的逻辑很简单：Line769判断“DisplayObject实例”中是否有mask，如果存在则去第二步，如果不存在，则进入第五步Line770获取mask的矩阵信息，Line771ctx累加（transfrom）mask的矩阵；774行ctx.clip()锁定可绘制区域（即加遮罩层）；776行mtx.invert()生成mask逆矩阵，777行ctx累加mask的逆矩阵；780行获取实例的矩阵信息，786行ctx累加实例的矩阵。第4步其实很重要，就是mask的matrix只影响它自己。mtx.invert方法定义在：https://www.createjs.com/docs...其实我是看了源码才知道原生canvas有个方法叫clip。之前一直误以为mask是用globalCompositeOperation实现的，所以想知道应用mask后性能会不会受到影响。现在看来，面具不会影响表演。结论为什么元素的遮罩不随元素移动或变形？答案是：element和mask是兄弟。如何使元素的位移和变形与其遮罩同步？在这个元素上放一个容器，位移和变形都是由这个容器完成的。
