ctx.transform(m11, m12, m21, m22, dx, dy) 矩阵变换
m11 m21 dx
m12 m22 dy
0 0 1
以上矩阵可转化为在单位圆内旋转a度并平移dx dy
cosa -sina dx
sina cosa dy
0 0 1
其中m11/m22分别对应单位圆x/y轴,由以上变换矩阵可知:
1. 缩放(缩放单位x/y轴坐标即可实现缩放变换)
sx 0 0
0 sy 0
0 0 1
2. 平移
1 0 dx
0 1 dy
0 0 1
3. 旋转
cosa -sina 0
sina cosa 0
0 0 1
4. 倾斜(x轴方向的倾斜即为单位y轴与单位x轴夹角逐渐减小,y轴方向同理可得)
1 tana1 0
tana2 1 0
0 0 1
结论:
1. transform的效果可以叠加,setTransform则可以用来将画布归回原位后再进行相应的效果处理
2. transform如果既有平移又有旋转, 则先平移后旋转