摘要：可以這樣說，和應(yīng)用了的元素是兩個(gè)彼此獨(dú)立的元素，這也是元素的不跟隨元素一起位移或形變的根本原因。結(jié)論為什么元素的不跟隨元素一起位移或形變答案是元素與是兄弟關(guān)系。

之前在做「雙十一攻略頁(yè)」的時(shí)候就發(fā)現(xiàn)這個(gè)細(xì)節(jié)，但是當(dāng)時(shí)沒有太在意，今天又遇到了。

createjs 的代碼：

var stage = new createjs.Stage(canvas); 
var container = new createjs.Container(); 
var rect = new createjs.Shape(); 
rect.graphics.beginFill("#ff0000").drawRect(0, 0, 750, 1206); 
var mask = new createjs.Shape(); 
mask.graphics.beginFill("#000000").drawRect(0, 0, 750, 100); 
rect.mask = mask; 
container.regX = container.regY = container.x = container.y = 375; 
rect.y = 0; // 這里的數(shù)值變成 20，可以觀察到 BUG
container.addChild(rect); 
stage.addChild(container); 
stage.update(); 

rect.y === 0，截圖如下：

rect.y === 20，截圖如下：

mask 在使用過程中發(fā)現(xiàn)：元素的 mask 不會(huì)跟隨元素一起位移與形變（rotate, scale, skew）。

原生 canvas 中并沒有 mask 這個(gè)概念，mask 更像是借用了 css3 中的 mask 屬性的概念出現(xiàn)在 PIXI or CreateJS 中的。而原生 Canvas 是使用 clip 方法來實(shí)現(xiàn) mask 效果，從原生 canvas 的角度來看：mask 與應(yīng)用 mask 的元素的地位是等同的。

CreateJS 的文檔里對(duì) mask 的解釋如下：

A Shape instance that defines a vector mask (clipping path) for this display object. The shape"s transformation will be applied relative to the display object"s parent coordinates (as if it were a child of the parent).
https://www.createjs.com/docs...

雖然文檔明確指出 mask 相當(dāng)于(as if) 應(yīng)用了 mask 的元素的父級(jí)的子元素；簡(jiǎn)單地說，mask 與 應(yīng)用了 mask 的元素是兄弟關(guān)系（平級(jí)）。可以這樣說，mask 和 應(yīng)用了 mask 的元素是兩個(gè)彼此獨(dú)立的元素，這也是「元素的 mask 不跟隨元素一起位移或形變」的根本原因。

從源碼上分析：https://www.createjs.com/docs...

這一塊的邏輯很簡(jiǎn)單：

Line769 判斷「DisplayObject實(shí)例」是否存在 mask，如果存在進(jìn)入第二步，不存在進(jìn)入第5步

Line 770 獲取 mask 的矩陣信息，Line 771 ctx 累加（transfrom） mask 的矩陣;

Line 774 ctx.clip() 鎖定可繪畫區(qū)（即添加蒙層）；

Line 776 mtx.invert() 生成一個(gè)與 mask 反向的矩陣，Line 777 ctx 累加 mask 的反向矩陣；

Line 780 獲取實(shí)例的矩陣信息，Line 786 ctx 累加實(shí)例的矩陣。

第4步其實(shí)很重要，它表示 mask 的矩陣只對(duì)它自身產(chǎn)生影響。
mtx.invert 方法的定義在：https://www.createjs.com/docs...

其實(shí)我也是看了源碼才知道原生 canvas 還有一個(gè)叫 clip 的方法，之前我一直誤以為 mask 是用 globalCompositeOperation 實(shí)現(xiàn)的，所以我一起懷疑應(yīng)用了 mask 后會(huì)不會(huì)影響到性能，如今看來：mask 并不會(huì)影響性能。

為什么元素的 mask 不跟隨元素一起位移或形變？
答案是：元素 與 mask 是兄弟關(guān)系。

如何讓元素與它mask的位移與形變同步？
給這個(gè)元素套上一個(gè) container，位移和形變由這個(gè) container 完成。