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如果既有平移又有旋转, 则先平移后旋转