canvas的transform(3)

• canvas的transform有三个属性：translate、scale和rotate，没有skew
• 和transform的执行顺序一样，这个也是后写的属性先执行，也就是从后往前执行

canvas的transform的一个实例：旋转矩形

canvas的transform.gif

• 首先canvas画布的旋转中心在左上角，所以我们需要把矩形的旋转中心和左上角重合，比如原来矩形的坐标是x：300，y：200，矩形宽高是w：200，h：150，那么我们需要把矩形中心画到画布左上角：x：-w/2=-100，y：-h/2=75，然后在移动画布到原来的坐标x：300+100=300，200+75=275，注意这里要先旋转画布，在移动画布，但是写的时候先写移动，在写旋转。
• 同样的，在画出来之前需要先全部清掉。然后重画，然后在清掉，在重画，这样不停的重复，因为角度在不断的变化，所以最后就会有动画的效果了
• 还有一点在清掉重画之前我们需要保存上一次的绘画状态，然后在这次绘画状态之上在画下一步，不然的话，循环就是不停的在一个地方重画。
  代码贴上去，原理是这样，但是说实话，这段代码我没怎么看懂(￣_￣|||)
  就是 obj.save() 和obj.resatore() 这个地方，哪位大神可以解释下：

下面这个是可以转多个矩形的：

canvas多个物体旋转.gif