JavaScript中如何让图形旋转不会相互影响

最近在联系JavaScript 二维绘图，经常会用到旋转，前几篇博文也提到过这类问题。

但是我忘记了JavaScript二维绘图中有关旋转最核心的两个方法：save()和restore()

      在w3c上对于save()方法的解释是：

      save( ) 方法把当前状态的一份拷贝压入到一个保存图像状态的栈中。这就允许您临时地改变图像状态。

      原文链接：http://www.w3school.com.cn/jsref/met_canvasrenderingcontext2d_save.asp

     

      restore() 的解释：

      restore() 方法从栈中弹出存储的图形状态并恢复 CanvasRenderingContext2D 对象的属性、剪切路径和变换矩阵的值。

      原文链接：http://www.w3school.com.cn/jsref/met_canvasrenderingcontext2d_restore.asp

 

其实对于这两个方法有个更为生动形象的解释：类似于拿了一把标尺画完图之后又把标尺放回了原位

这样就可以避免rotate()方法互相干扰

不然很有可能出现这种情况：

你会发现每次旋转时秒针会在时针分钟旋转的基础上再次旋转，本来只想每秒旋转6度的，但是由于指针间相互干扰直接旋转了半个钟面，连带着数字也一起旋转

 

所以在每次旋转时要记得在旋转前后加入save()和restore()方法保存和恢复画布的旋转状态。

 

代码：

    

        ctx.save();
        ctx.rotate(angle*Math.PI/180);
        ctx.fillRect(x,y,w,h);
        ctx.restore();

 

　　

部分资料转自：http://www.cnblogs.com/youryida/p/3487601.html