所以围绕某一点进行旋转变换，可以分成上面三个步骤，即： 首先将坐标原点移至该点，然后围绕新的坐标原点进行旋转变换，再然后将坐标原点移回到原先的坐标原点 。上面是以旋转变换为例，其实对于缩放变换，原理是一致的，这里就不多阐述。

上面很多都涉及到矩阵，整了好多天，很多地方都是晕晕的，下面有几篇文章帮助大家更好的理解：

transform()和setTransform()区别

如果你坚持阅读到这里，或许你和我也有一个同样的问题想问： transform() 和 setTransform() 都是矩阵变换，都同样接受六个参数，都是一样的矩阵计算。那他们是不是一样的呢？其实是不一样的：

transfrom() 不会重置前面的矩阵，做的是一种累加计算。每次调用 transform() 都会在前一个变换矩阵上构建。

setTransform() 他是一种重置计算。每次调用 setTransform() 都会重置前一个变换矩阵，然后构建新的矩阵。

还是通过一个简单的示例来演示他们之间的区别吧。

ctx.globalAlpha = 1; ctx.fillStyle = 'orange'; ctx.fillRect(50, 50, 100, 100); // 缩小和移动坐标 ctx.transform(.8, 0, 0, .8, 50, 50); ctx.globalAlpha = .8; ctx.fillStyle = 'green'; ctx.fillRect(0, 0, 100, 100); // 再做一次缩小和移动 ctx.transform(.8, 0, 0, .8, 50, 50); ctx.globalAlpha = .8; ctx.fillStyle = 'red'; ctx.fillRect(0, 0, 100, 100); // 将坐标重置回原点0,0 ctx.resetTransform(); ctx.globalAlpha = 1; ctx.fillStyle = 'orange'; ctx.fillRect(350, 50, 100, 100); // 缩小和移动坐标 ctx.setTransform(.8, 0, 0, .8, 350, 50); ctx.globalAlpha = .8; ctx.fillStyle = 'green'; ctx.fillRect(0, 0, 100, 100); // 再做一次缩小和移动 ctx.setTransform(.8, 0, 0, .8, 350, 50); ctx.globalAlpha = .8; ctx.fillStyle = 'red'; ctx.fillRect(0, 0, 100, 100);

效果如下：

上面示例一下子就说明了两者的区别。具体的区别可以看代码体会出来。

有了变换，我们就可以通过他们来做一些事情，比如下面的一个简单的示例，制作一个万花筒效果：

resetTransform

在Canvas的 CanvasRenderingContext2D 对象中，除了有 transform() 和 setTransform() 方法之外，还有一个 resetTransform() 方法。这个方法是使用单位矩阵重新设置当前变形的方法。它和 ctx.setTransform(1, 0, 0, 1, 0, 0); 效果等同。简单点讲就是对 ctx.setTransform(1, 0, 0, 1, 0, 0); 的封装。

HTML5 Transformation Matrix

在网上看到一个HTML5 Transformation Matrix的小工具，我将其扒下来了，这个Demo实现了Canvas中的缩放、位移和斜切效果，但没有旋转效果。感兴趣的同学可以看看：

当然有兴趣的同学，可以将旋转的功能添加进来。

总结

这篇文章花了很大的篇幅介绍了Canvas中的自定义的坐标变换，其实也就是矩阵变换。在Canvas中包括了 transform() 、 setTransform() 和 resetTransform() 方法，其中 transform() 和 setTransform() 可以通过矩阵实现旋转、缩放、位移、斜切和对称等坐标变换。他们都是通过矩阵的变换来实现对应的功能，而且它们都接受六个参数。不同之处是： transform() 是基于上一个坐标变换做变换，是一种累积；setTransform()是重置前一个变换矩阵，然后构建新的矩阵。 最后 resetTransform() 是setTransform(1, 0, 0, 1, 0, 0);`的封装。

这篇文章还涉及了很多数学知识，从而再次说明数学在图形学中是多么的重要，后面的课程依旧会不断的在文章中补允对应的数学知识，帮助我们更好的在Canvas中绘制图形。如果您对此系列教程感兴趣，欢迎持续关注相关更新；如果文章有不对之处，还请各位大婶多多指正。

大漠

常用昵称“大漠”，W3CPlus创始人，目前就职于手淘。对HTML5、CSS3和Sass等前端脚本语言有非常深入的认识和丰富的实践经验，尤其专注对CSS3的研究，是国内最早研究和使用CSS3技术的一批人。CSS3、Sass和Drupal中国布道者。2014年出版《 图解CSS3：核心技术与案例实战 》。