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

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

函数	参数	描述
translate	dx,dx	将坐标系在X轴和Y轴移动的距离
rotate	angle	坐标系旋转的角度，顺时针为正,，逆时针为负
save		保存当前坐标系的状态
restore		恢复上一次坐标系状态

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

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

文章图片
2.png

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

文章图片
4.png

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

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