canvas rotate与translate

Question

RT 。    ctx.rotate(-90*Math.PI/180);逆时针旋转90度后如何移回来   ？ ctx.drawImage(img,0,0);//                     顺时针旋转180                 if(this.x>0){                     ctx.rotate(180*Math.PI/180);                     ctx.translate(-this.x-this.w,-this.y-this.h);                     ctx.drawImage(img,0,0);                 }

Answer 1

最主要的问题是，旋转的时候围绕的坐标点。想要实现想要的动画，则需要矫正由于旋转造成的位移问题。

Answer 2

先用ctx.save()保存画布格式，操作完后，用ctx.restore()使画布返回旋转前的格式信息。

Answer 3

rotate 旋转，translate对象平移，你要移回来就设定动画最终位置是不变的，整个动画的过程，自己可以设置，参考CSS3的文档(animation    transform).