css中和js中矩阵变换的理解

对于举证变换的认识

css中transform使用 matrix 进行矩阵变换：

mdn的定义：https://developer.mozilla.org/zh-CN/docs/Web/CSS/transform-function/matrix()

• matrix( scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY() ) 格式为：matrix(a,b,c,d,e,f) 使用六个值的矩阵。 matrix(a,b,c,d,e,f) 以一个含六值的(a,b,c,d,e,f)变换矩阵的形式指定一个2D 变换，相当于直接应用一个[a,b,c,d,e,f]变换矩阵。就是基于水平方向（X轴 ）和垂直方向（Y轴）重新定位元素。 a水平缩放绘图 b水平倾斜绘图 c垂直倾斜绘图 d垂直缩放绘图 e水平移动绘图 f垂直移动绘图 例如：transform:matrix(2,0,0,1,0,0);transform-origin:100% 0%;
• 具体的讲解在 这里的pdf第10页

js我们可以在canvas中使用transform()进行矩阵变换：

• 值和上面css的一样，意义也一样。
• 具体的讲解在 这里的pdf第17、18页
• 说明：调用 transform() 时，它都会在前一个变换矩阵上构建。 transform()方法是将现有的变换矩阵乘以所指定的值，而不是直接设置变 换矩阵的值。多次调用transform,每一次变形都是应用到前一个变形得到的 变换矩阵。
• 如果我们不想要基于前面的矩阵变换，而是要一个全新的变换，那么可以使用setTransform()单位矩阵
  • 取值和上面一样
  • 说明：setTransform()方法将矩阵重置为单位矩阵，然后按照6个参数执行 变形。主要是保证操作的是一个原始状态的变换矩阵。