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

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

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 不會跟隨元素一起位移與形變（rotate, scale, skew）。

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

CreateJS 的文檔里對 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 相當于(as if) 應(yīng)用了 mask 的元素的父級的子元素；簡單地說，mask 與 應(yīng)用了 mask 的元素是兄弟關(guān)系（平級）。可以這樣說，mask 和 應(yīng)用了 mask 的元素是兩個彼此獨立的元素，這也是「元素的 mask 不跟隨元素一起位移或形變」的根本原因。

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

這一塊的邏輯很簡單：

Line769 判斷「DisplayObject實例」是否存在 mask，如果存在進入第二步，不存在進入第5步

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

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

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

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

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

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

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

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