获取Canvas当前坐标系矩阵 - 方帅(2)_H5之家 - 中国HTML5教程资源分享第一站

从savedTransforms数组中去除最后一个对象，并将其赋值到变量xform，然后调用原API方法。

4 scale方法 xform = xform.scaleNonUniform(sx, sy); return scale.call(ctx, sx, sy);

维护xform，将其缩放，然后调用原API方法。

5 rotate方法　　　　　　 var radians = deg * Math.PI / 180; xform = xform.rotate(deg); return rotate.call(ctx, radians);

将角度转为弧度，维护xform将其进行旋转变换，然后调用原API方法。

6 translate方法 xform = xform.translate(dx, dy); return translate.call(ctx, dx, dy);

维护xform将其进行平移变换，然后调用原API方法。

7 transform方法 var m2 = svg.createSVGMatrix(); m2.a = a; m2.b = b; m2.c = c; m2.d = d; m2.e = e; m2.f = f; xform = xform.multiply(m2); return transform.call(ctx, a, b, c, d, e, f); 首先声明一个新的矩阵m2，m2赋值为要进行变换的6个参数值，然后xform和m2执行矩阵乘法运算，运算结果赋值到xform将其维护。然后调用原API方法。 8 setTransform方法 xform.a = a; xform.b = b; xform.c = c; xform.d = d; xform.e = e; xform.f = f; return setTransform.call(ctx, a, b, c, d, e, f);

维护xform的值，然后调用原API方法。

9 clearRect方法 ctx.save(); ctx.setTransform(1, 0, 0, 1, 0, 0); clearRect.call(ctx, x, y, w, h); ctx.restore();

首先保存context的当前状态，将画布重置到原始状态（可以理解为坐标系重置到默认坐标系），然后调用原API方法清除画布指定范围内容。清除后调用restore恢复Canvas之前保存的状态。

10 getTeansform方法 ctx.getTransform = function () { return xform; };

接下来介绍的三个方法都是原API没有的。getTeansform直接返回xform，可以看到代表画布矩阵的6个值abcdef。

11 transformedPoint方法 54 var pt = svg.createSVGPoint(); 55 //通过原坐标系点x，y求对应当前坐标系的坐标值 56 ctx.transformedPoint = function (x, y) { 57 pt.x = x; pt.y = y; 58 return pt.matrixTransform(xform.inverse()); 59 }

通过原坐标系点x，y求对应当前坐标系的坐标值。

createSVGPoint创建的点为（0,0），xform.inverse()是求xform的逆矩阵。MatrixTransform则是通过一种矩阵算法来进行运算得到相应的变形的效果的。矩阵的一些基本算法就不多总结了，以前上课就学过了，网上也有不少讲解。

12 transformedPoint2方法 60 var pt2 = svg.createSVGPoint(); 61 //当前坐标系中的的xy还原到原坐标系坐标值 62 ctx.transformedPoint2 = function (x, y) { 63 pt2.x = x; pt2.y = y; 64 return pt2.matrixTransform(xform); 65 }

当前坐标系中的的x，y还原到原坐标系坐标值。