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

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

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

功能与参数介绍

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

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

能够看到此时是基于左上角进行绘制的，若是咱们用translate将它向右和向下移动200px和100px呢

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

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

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

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

注意看此时X轴和Y轴已经改变，以及正方向的方向。第三行代码执行后以下

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

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