Canvas中的save方法和restore方法

　　初学者也许会误认为canvas中save方法是用来保存绘图状态的图形，而restore方法是用来还原之前保存的绘图状态的图形，其实不然。

　　save():保存当前的绘图状态。

　　restore():恢复之前保存的绘图状态。

　　在Canvas环境中绘图时，可以利用所谓的绘图堆栈状态。每个状态随时存储Canvas上下文数据。下面是存储在状态堆栈的数据列表。

当前的坐标变换（变换矩阵）信息，比如旋转或平移时使用的rotate()和setTransform()方法
当前剪贴区域clip()
图形上下文对象（CanvasRenderingContext2D）的当前属性值

　　CanvasRenderingContext2D的当前属性值主要包括：

属性	描述
`canvas`	取得画布`<canvas>`元素
`fillStyle`	填充路径的当前的颜色、模式或渐变
`globalCompositeOperation`	指定颜色如何与画布上已有颜色组合（合成）
`lineCap`	指定线段端点的绘制方式
`lineJoin`	指定线段连接的绘制方式
`lineWidth`	绘制线段的宽度
`miterLimit`	当`lineJoin`为`miter`时，这个属性指定斜连接长度和二分之一线宽的最大比率
`shadowBlur`	指定阴影模糊度
`shadowColor`	指定阴影颜色
`shadowOffsetX`	指定阴影水平偏移值
`shadowOffsetY`	指定阴影垂直偏移值
`strokeStyle`	指定线段颜色

　　上面是Canvas绘图中的状态，那么什么情形不属于Canvas状态?

　　在Canvas中当前路径和当前位图受Canvas环境控制，不属于保存状态。这个重要的功能允许在画布上对单个对象进行绘画和制作动画。

　　如上所述用堆栈的原理来解释，就是调用save()方法时，将记录当前的绘图状态，并压入一个堆栈中；接着调用restore()方法时，就会把上一次记录的绘图状态从堆栈中弹出。

　　需要注意的是，出栈的次数不能多于入栈的次数，故程序中restore()方法调用的次数不应该比save()方法多。

　　画张图来帮助理解：

　　如果上面的描述还是无法帮助你理解save()和restore()两个方法的话，那我们来写一个简单的示例来帮助大家理解：

 1 <body>
 2 <!--创建一个边长为200的正方形画布-->
 3 <canvas id="mc" width="200" height="200" style="border:1px solid black"></canvas>
 4 
 5 <script type="text/javascript">
 6     var canvas = document.getElementById('mc'); //获取Canvas元素对应的DOM对象
 7     var ctx = canvas.getContext('2d');//获取Canvas上的绘图的CanvasRenderingContext2D对象
 8     ctx.lineWidth=3; //设置笔触线条的宽度
 9     ctx.translate(100,100); //将原点左边设置到画布的中间
10     ctx.save(); //保存当前画布的状态，该状态包含了lineWidth=3,translate(100,100),然后其他那些属性为默认值.
11     ctx.strokeStyle='red'; //设置线条颜色为红色
12     //坐标系统旋转90°
13     ctx.rotate(Math.PI/2);  
14     //画第一条直线
15     ctx.beginPath();
16     ctx.moveTo(-100,0);
17     ctx.lineTo(100,0);
18     ctx.closePath();
19     ctx.stroke();
20     //恢复之前保存的绘图状态
21     ctx.restore(); 
22     //再画第二条直线
23     ctx.beginPath();
24     ctx.moveTo(-100,0);
25     ctx.lineTo(100,0);
26     ctx.closePath();
27     ctx.stroke();
28 </script>
29 </body>

　　在浏览器中看到的效果如下：

看代码可知，画两条线的代码是一样的，可是画出来的一条是垂直的红线，一条是水平的黑线。调用save()方法时，保存的状态是lineWidth=3,translate(100,100),然后其他那些属性为默认值，如默认的lineStyle为黑色。

画第一条线时，是将坐标系统旋转了90°，设置了lineStyle="red"，故画出来的是垂直的红色线；画第二条线前调用了restore()方法，即恢复为了之前保存的绘图状态，该绘图状态是坐标系统没有经过旋转的，线条颜色也默认为黑色，所以画出来的先就是我们想要得到的水平的黑色线。

Canvas中的save方法和restore方法

推荐阅读