如下图，我们会有下面的需求，在坐标系1中，绘出一个图像， 这个图形自身的坐标系是2， 它里面又绘出了3个图形自身坐标系的一些东西。
这个变化过程如下图， 通过一个个的仿射变换矩阵完成变化。
一些相关基础知识：
矩阵乘法
2*2 矩阵 互相乘
参考：
http://taop.marchtea.com/02.08.html
简单来说，第一个矩阵取行， 第二个矩阵取列， 然后交叉相乘的和。
三角函数
常见三角函数的值：
平面直角坐标系及其变换
自身坐标系与参考坐标系
在一部分计算机 2D 绘图技术中，每个绘图元素会有自己的一个坐标系，称为「自身坐标系」。当图形 A 放作为图形 B 的一个元素的时候，可以把图形 B 的自身坐标系作为图形 A 的参考坐标系。
这个矩阵称为「二维线性变换矩阵」，记为 M。
矩阵的默认值如下， 该取值时是无变换的。因为 X` = X Y`=Y
参考： 2D 绘图技术中的坐标系统与坐标变换
http://fex.baidu.com/blog/2014/05/coordinate-and-transform/
而坐标转换的矩阵我们一般如下（下面来自Windows的 GDI+ 编程的资料）：
类似的在 HTML5 的 Canvas 接口文档中也有类似的，如下图：
HTML5 mozilla Canvas API Transform 相关资料
https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Transformations
参考：
坐标系统与坐标变换 PPT
https://speakerdeck.com/baidufe/2d-hui-tu-zhong-de-zuo-biao-xi-tong-he-zuo-biao-bian-huan
SVG中的坐标系统和坐标变换
https://segmentfault.com/a/1190000004320934
http://blog.sina.com.cn/s/blog_5f38c0560100uzrj.html
https://segmentfault.com/a/1190000004469449
JDK 1.2 版本中就有类似的方法
参考： http://udn.yyuap.com/doc/jdk6-api-zh/java/awt/geom/AffineTransform.html
参考：
组合的坐标系变化例子：
参考：
https://www.cs.auckland.ac.nz/courses/compsci773s1c/lectures/ImageProcessing-html/topic2.htm
