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).