首先，我们在页面上初始化canvas的时候，相当于在上面放了一个canvas。我们可以把这个画布理解为上面有一个坐标系（如下图），左上角是原点，右边是X轴的正方向，向下是X轴的正方向Y轴。我们在画布上绘制的内容都是基于这个坐标系的，但是有时候我们需要对绘制的内容进行调整，比如将上面的其中一个图形旋转一定的角度，或者在画布的中心绘制一个图形，我们可以在绘制前使用translate和rotate来移动坐标系。还有，rotate的旋转是基于原点的Rotate，这个很重要的函数和参数介绍函数参数说明translatedx,dx移动坐标系在X轴和Y轴上的rotateangle坐标系旋转的角度，顺时针是正，逆时针为负save保存当前坐标系的状态restore恢复上次坐标系的状态。当我们不旋转或移动画布时，在其上绘制一个矩形。看起来像这样。可以看到它是根据左上角绘制的。如果我们使用translate它向右和向下移动200px和100px。可以看出画布的位置没有变化。我们只移动坐标系。如果我们继续在上面画图形，还是会以这个位置的坐标系为准。如果我们只是想在这个位置绘制一次后恢复坐标系的原始位置，那么应该调用save()保存移动前的状态，绘制完成后调用restore()恢复。如果我们想把原来的矩形从自己的圆心旋转90°，我要看代码和效果图emmmm。。。我没算好，造成了一点偏差，但还是转了90°左右本身，不过没关系，不影响理解rorate和translate这两个函数的配合。首先看红框内的第一行代码。执行后，坐标系是这样的。第二行代码旋转后，是这样的。请注意，X轴和Y轴以及正方向的方向都发生了变化。第三行代码执行完为什么会跑到右上角？因为我们translate中的参数是负数，而此时坐标轴的正方向是左下，所以跑到右上。为什么原点用完了画布？因为X轴的移动距离是width/2，垂直方向没有足够的空间，所以继续往上走。通过坐标系来解释这两个功能主要是因为在最近的一个项目中，画在canvas上的图片需要围绕图片本身旋转90°或者180°，看了很多博客，通过坐标系来解释的比较少coordinatesystem这两个函数我试了很久，发现通过坐标系来理解虽然麻烦，但是感觉更简单。
