HTML canvas中translate()与rotate()的理解

首先，当我们在页面上初始化canvas时，相当于在上面放了一块画布，这块画布我们可以理解为上面有一个坐标系(如下图)，左上角是原点，往右是X轴的正方向，往下是Y轴的正方向，我们在画布上绘制的内容都是基于这个坐标系完成，但是有时候我们需要对绘制的内容进行调整，例如将上面的一个图形旋转某个角度，或者在画布正中心画一个图形，我们就可以通过translate和rotate将坐标系进行移动之后再进行绘制.

还有，rotate的旋转是以原点为基准进行旋转，，这一点很重要

1.png

功能与参数介绍

当我们不对画布进行旋转和移动的时候，在上面绘制一个矩形，是这样子的

2.png

3.png

可以看到此时是基于左上角进行绘制的，如果我们用translate将它向右和向下移动200px和100px呢

4.png

5.png

可以看到，画布位置没有改变，我们移动的只是坐标系，如果我们继续在上面绘制图形，仍然是以现在这个位置的坐标系为准，如果我们只想在这个位置画一次之后就恢复坐标系原始位置，我们应该在移动之前调用save()保存状态，绘制后调用restore()恢复.

6.png

如果我们想将最开始的矩形以自身中心旋转90°呢，想看代码和效果图

7.png

8.png

emmmm...没有计算好，导致有点跑偏，但是它还是以自己为中心转了90°，但是没事，不影响理解rorate和translate这两个函数配合的理解。
首先看红色框中的第一行代码，执行后坐标系是这样的

9.png

第二行代码旋转后是这样的

10.png

11.png

• 为什么会往右上方跑呢？因为我们translate中的参数是负数，而此时坐标轴的正值方向是左边和下边，所以是往右边和上边跑
• 为什么原点会跑出画布之外？因为X轴移动的距离是width/2，而竖直方向空间不足，就继续往上走了。

通过坐标系来说明这两个函数主要是因为最近做的一个项目中需要将画布上面绘制的图片以图片自身为中心旋转90°或者180°，而看了许多博客后比较少通过坐标系来讲解这两个函数，尝试了很久之后发现通过坐标系来理解虽然麻烦，但是感觉简单点。