transform 属性之 matrix 方法其二

本文为解析 transform 属性系列的第三篇，未看前文的童鞋，阅读一下 第一篇 和 第二篇，会对本文有更好的理解。

matrix 矩阵运算公式

x’ = a * x + c * y + tx
y’ = b * x + d * y + ty

详细运算过程请参考上一篇文章。

matrix 实现 rotate

回顾一下 rotate 的定义：

rotate(degree)
rotate 方法用于将元素旋转一定的角度。当 degree 的值为正数时，顺时针旋转元素；为负值时，逆时针旋转元素。

旋转元素，可以想象将元素分为好多分散的点，把元素中包含的每一个点绕着元素中心旋转。单个点的操作就类似于下图中的 A 点旋转一定角度后变为了 B 点，将旋转后所有点组合，就是旋转后的元素了。

由上图可见，给最初的角度 α 增加旋转角度 θ，A 点就由之前的位置变换到了 B 点。由此可以得出这样的信息：

• 点 A 是已知的
• 变换前后，线段 OA 和 OB 是相等的
• 旋转角度 θ 也是已知的
• 点 B 是未知点

将问题抽象出来，即：已知圆上的点 A，求将点 A 旋转角度 θ 后新位置点 B 的坐标？

有一个经典的坐标系统可以用来处理上面这个问题，它就是极坐标系（极坐标系的详细介绍请咨询度娘）。将以上问题用极坐标系表示如下图：