初学者也许会误认为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()两个方法的话，那我们来写一个简单的示例来帮助大家理解：
<body>
<!--创建一个边长为200的正方形画布-->
<canvas id="mc" width="200" height="200" style="border:1px solid black"></canvas> <script type="text/javascript">
var canvas = document.getElementById('mc'); //获取Canvas元素对应的DOM对象
var ctx = canvas.getContext('2d');//获取Canvas上的绘图的CanvasRenderingContext2D对象
ctx.lineWidth=3; //设置笔触线条的宽度
ctx.translate(100,100); //将原点左边设置到画布的中间
ctx.save(); //保存当前画布的状态，该状态包含了lineWidth=3,translate(100,100),然后其他那些属性为默认值.
ctx.strokeStyle='red'; //设置线条颜色为红色
//坐标系统旋转90°
ctx.rotate(Math.PI/2);
//画第一条直线
ctx.beginPath();
ctx.moveTo(-100,0);
ctx.lineTo(100,0);
ctx.closePath();
ctx.stroke();
//恢复之前保存的绘图状态
ctx.restore();
//再画第二条直线
ctx.beginPath();
ctx.moveTo(-100,0);
ctx.lineTo(100,0);
ctx.closePath();
ctx.stroke();
</script>
</body>
在浏览器中看到的效果如下：
看代码可知，画两条线的代码是一样的，可是画出来的一条是垂直的红线，一条是水平的黑线。调用save()方法时，保存的状态是lineWidth=3,translate(100,100),然后其他那些属性为默认值，如默认的lineStyle为黑色。
画第一条线时，是将坐标系统旋转了90°，设置了lineStyle="red"，故画出来的是垂直的红色线；画第二条线前调用了restore()方法，即恢复为了之前保存的绘图状态，该绘图状态是坐标系统没有经过旋转的，线条颜色也默认为黑色，所以画出来的先就是我们想要得到的水平的黑色线。