# canvas在transform的时候都做了些啥？

·  阅读 818

### 数学不好者退散！！！

``````context.moveTo(100,100);
contect.lineTo(100,200);``````

``````context.translate(100,100);
context.scale(0.5);
context.rotate(20)``````

``x+1//x坐标加1``

``translateX(x+1)``

``context.translate(100,100);``

``````|100, 0,  0,|
|0,  100, 0,|
|tx, ty,  1 |``````

x,y的值分别取了这个“矩阵”的‘00’位置和‘11’位置的值，分别再在对应的数值上加上tx 和 ty 。初始情况下，一个未做过变换的矩阵信息是：

``````|100, 0,  0,|
|0,  100, 0,|
|0,   0,  1 |``````

``100+0``

``````|100, 0, 0,|
|0, 100 ,  0|
|0, 0, 1,|
x
|1, 0 , 0|
|0, 1, 0 |
|tx,ty,1 |``````

``````|100, 0,  0,|
|,   100 , 0|
|0,  0, 1 ,|
x
|1,   0 , 0|
|0,   1,  1 |
|tx,  ty,1 |``````

``````|100,0, 0 |
|0, 100,0 |
|tx,ty, 1 |``````

``````|1,   0,  0 |
|0,   1,  0 |
|20,  50, 1 |``````

``````|100, 0,  0,|
|0.5, 0 , 0|
|0,  100, 0,|
x
|0, 0.5 , 0|
|0,   0,  1 |
|0,  0,  1 |
=
|50,0, 0 |
|0, 50,0 |
|0,0, 1  |``````

（能看到这里吐血的人也退下吧，欣仔我对不住了。。。）

``````c=cos(angle)*x-sin(angle)*y;
d=cos(angle)*y+sin(angle)*x;``````

``````let cos=cos(angle);
let sin=sin(angle);
x1=cos*x-sin*y;y1=cos*y+sin*x;``````

``````|cos*x-sin*y，  0，      0|
|0，        cos*y+sin*x，0|
|0，            0，      1|   ``````

``````|cos,sin, 0 |
|-sin,cos,0 |
|0,   0,  1 |``````

``````|100, 0,  0,|
|0, 100 ,  0|
|0,  0, 1,|
x
|cos, -sin , 0|
|sin,   cos,  1 |
|0,     0,  1 |
=
|cos*x-sin*y，  0，      0|
|0，        cos*y+sin*x，0|
|0，            0，      1|``````

``````原矩阵
|100, 0,  0,|
|0,  100, 0,|
|0,   0,  1 |
X

|1,   0,  0 |
|0,   1,  0 |
|100, 100,1 |
X

|cos(60),-sin(60), 0 |
|sin(60),cos(60),0 |
|0,      0,       1 |
X

|0.5,   0,  0 |
|0,   0.5,  0 |
|0,     0,  1 |``````