摘要：首先要指出的是實(shí)例的屬性與的參數(shù)沒有關(guān)系。同理可得的與在效果上都是。對實(shí)例設(shè)置了后，實(shí)例的位置會發(fā)生變化，這是因?yàn)閳?zhí)行了。自此以下結(jié)論是正確的的最終也會轉(zhuǎn)換成原生的

首先要指出的是：DisplayObject 實(shí)例的屬性 與 graphics.draw*(x, y, ...) 的參數(shù)沒有關(guān)系。

在原生的 Canvas 中有 的概念，例如：ctx.rect(x, y, width, height)。于是我天真地以為 DisplayObject 的應(yīng)該跟原生 API 是一一對應(yīng)的吧，但是結(jié)果給了我一個巴掌，在Graphics 與 DisplayObject 的關(guān)系 一文中有提及。

后來我認(rèn)真地思考了一下，還真不能把 DisplayObject 的 與 原生的繪制API的參數(shù)掛勾。因?yàn)?Container 實(shí)例是一個「概念」 DisplayObject 實(shí)例，它沒有與之相對的原生繪制API。

DisplayObject 的 是如何實(shí)現(xiàn)的？
其實(shí) DisplayObject 的 都是通過原生的 API ------ ctx.transform（即「矩陣轉(zhuǎn)換」） 實(shí)現(xiàn)的。說起矩陣 css3 的 transform 與 DisplayObject 的矩陣是可以一一對應(yīng)的：
CSS3 -- transfrom
CreateJS.DisplayObject -- 矩陣
translate(x, y)

transform-origin

rotate(degX, degY)
rotation
scale(scaleX, scaleY)

skew(degX, degY)

matrix
-
CSS3 中 translate/rotate/scale/skew/transform-origin 這些方法或?qū)傩宰罱K都會轉(zhuǎn)換成 matrix。「矩陣」是一個數(shù)學(xué)工具，所以「DisplayObject 的 //rotation// 最終也會轉(zhuǎn)換成原生 Canvas 的 ctx.transform 」。

關(guān)于「矩陣」的入門知識可以看一下：http://www.zhangxinxu.com/wor...

這里有一個知識點(diǎn)：transform-origin 在矩陣中相當(dāng)于 translate。同理可得：DisplayObject 的 與 在效果上都是 translate。對 DisplayObject 實(shí)例設(shè)置了 后，實(shí)例的位置會發(fā)生變化，這是因?yàn)?CreateJS 執(zhí)行了 translate(-regX, -regY)。

盡管說清楚了 DisplayObject 的 //rotation// 屬性的工作原理，但是還是需要通過 CreateJS 的源碼來驗(yàn)證一下：

DisplayObject 在渲染的時(shí)候通過兩個方法：updateContext & draw。其實(shí) updateContext 在 draw 之前調(diào)用，事實(shí)上 DisplayObject 的 draw 方法沒什么東西，幾乎所有操作都是集中在 updateContext 上。所以只需要看 updateContext 即可，如下：

https://www.createjs.com/docs...

786行的代碼是：

ctx.transform(mtx.a,  mtx.b, mtx.c, mtx.d, tx, ty);

這一步只能說明了 DisplayObject 底層實(shí)現(xiàn)有使用到 ctx.transform，并不能說明「DisplayObject 的 //rotation// 最終也會轉(zhuǎn)換成原生 Canvas 的 ctx.transform」。

回頭看看 780行 this.getMatrix(mtx)：
https://www.createjs.com/docs...

getMatrix 的代碼如下：

p.getMatrix = function(matrix) {
        var o = this, mtx = matrix&&matrix.identity() || new createjs.Matrix2D();
        return o.transformMatrix ?  mtx.copy(o.transformMatrix) : mtx.appendTransform(o.x, o.y, o.scaleX, o.scaleY, o.rotation, o.skewX, o.skewY, o.regX, o.regY);
    };

在調(diào)用 this.getMatrix(mtx) 后，mtx 的屬性會被重置。matrix 是一個 Matrix2D 實(shí)例，Matrix2D 的源碼部分如下：
https://www.createjs.com/docs...

通過閱讀 Matrix2D 源碼可以清晰地了知道，martix/mtx 的上的 a, b, c, d, tx, ty 全部來自 DisplayObject 實(shí)例的屬性： //rotation//。

自此以下結(jié)論是正確的：「DisplayObject 的 //rotation// 最終也會轉(zhuǎn)換成原生 Canvas 的 ctx.transform 」