初学者也许会误认为canvas中save方法是用来保存绘图状态的图形，而restore方法是用来还原之前保存的绘图状态的图形，其实不然。
save():保存当前的绘图状态。
restore():恢复之前保存的绘图状态。
用堆栈的原理来解释，就是调用save()方法时，将记录当前的绘图状态，并压入一个堆栈中；接着调用restore()方法时，就会把上一次记录的绘图状态从堆栈中弹出。需要注意的是，出栈的次数不能多于入栈的次数，故程序中restore()方法调用的次数不应该比save()方法多。
注意：save()方法不仅包括当前坐标系统的状态，也包括CanvasRenderingContext2D所设置的填充风格、线条风格、阴影风格的各种绘图状态。但save方法不会保存当前Canvas上绘制的图形。
<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>
在IE9中看到的效果如下：
看代码可知，画两条线的代码是一样的，可是画出来的一条是垂直的红线，一条是水平的黑线。调用save()方法时，保存的状态是lineWidth=3,translate(100,100),然后其他那些属性为默认值，如默认的lineStyle为黑色。
画第一条线时，是将坐标系统旋转了90°，设置了lineStyle="red"，故画出来的是垂直的红色线；画第二条线前调用了restore()方法，即恢复为了之前保存的绘图状态，该绘图状态是坐标系统没有经过旋转的，线条颜色也默认为黑色，所以画出来的先就是我们想要得到的水平的黑色线。