本来是打算自己写 save() 和 restore()，但是发现一篇博客对于 save() 和 restore() 的理解很清晰易懂，就翻译过来了。 原文链接：https://html5.litten.com/understanding-save-and-restore-for-the-canvas-context/
--------------------------------- O(∩∩)O 以下是正文 O(∩∩)O-------------------------------**
首先，曾几何时我也无法理解 save() 和 restore() 的真正用意。其实呢，非常简单，这里有几个栗子能帮助大家更好的理解这两个方法。
我们先看下官方文档对 save 和 restore 的定义：
每个 canvas 的 context 都包含一个保存绘画状态的栈。以下内容都属于绘画状态：
- 当前的 transformation matrix（变换矩阵）
- 当前的裁剪区域
- strokeStyle、fillStyle、globalAlpha、lineWidth、lineCap、lineJoin、miterLimit、shadowOffsetX、shadowOffsetY、shadowBlur、shadowColor、globalCompositeOperation、font、textAlign、textBaseline，这些属性的当前值
**
当前路径和当前的位图并不属于绘画状态。当前路径是永久的一直存在的，要清楚或重置的话，只能通过 beginPath 方法。而当前位图是属于 canvas 的属性，而不是 context 的。 **
context.save() 会把当前的状态推入栈中。 **
context.restore() 会从栈中取出最顶部的状态，context 就还原到取出的状态。
因为一个 canvas只能有一个 2d context， 所以 save 和 restore 被广泛用于各种情况。其中最普遍的就是用于 transformation（变换矩阵）。
一个栗子告诉你 save() 和 restore() 是如何在 transformations(多次矩阵变换) 中发挥作用的。
当我们使用 transformation (矩阵变换)时，整个 context 的坐标系统都会发生变换。通常变换之后，我们下一步可能会想让坐标系统还原成变换之前正常的状态。我们要再次通过 transformation 反着让坐标系统还原吗，这显然不是一个快速可靠的方法。此时，我们就可以在变换之前，先通过 save 把正常的坐标系通过状态保存下来入栈，做完矩阵变换后在通过 restore 从栈中取出我们之前保存的状态。我们看个栗子后应该能更加清晰一些。
刚开始我们通过 canvascontext.save() 保存下当前的绘画状态，并且拷贝一份当前状态推入绘画状态栈中。 可以看到下图是一个正常坐标系统，我们保存下来当前状态。 然后我们做矩阵变换，可以看到坐标系统是发生了变化的。 接着我们画完我们想要的形状并且填充一些颜色。 现在我们想画更多的形状在画布上，但是我们不想使用当前的矩阵变换，我们就通过 restore() 把最近的状态从绘画状态栈里取出来，也就是我们之前保存的有正常坐标系统的状态。那么当前的状态就变成我们 save 之前的状态了。 可以看到背景的网格恢复到了正常的坐标系统的样子，但是我们后画的形状并没有变化，因为我们保存的状态只保存了 transformation 的状态，我们并没有设置其他想要保存的状态。
我们再来一个更直观的栗子
完整代码及注释
现在我们来看一个更加直观的栗子，来说明绘画状态栈与 save() 和 restore() 是如何配合运作的。
Canvas Test
分段代码、效果图、注释具体说明
接下来我们分段代码并结合效果图来说明，会更加清晰。
/* 我们画了一个橘色的矩形，设置了阴影 */
ctx.fillStyle = '#FA6900';
ctx.shadowOffsetX = 5;
ctx.shadowOffsetY = 5;
ctx.shadowBlur = 4;
ctx.shadowColor = 'rgba(204, 204, 204, 0.5)';
ctx.fillRect(0,0,15,150);
/* 把当前状态（fillStyle 橘色，阴影属性），推入到状态栈中，假设叫状态1 */
ctx.save();
可以看到下图状态栈中多了一个状态，并且很贴心的颜色也与矩形一直，让人更好理解。
/* 然后我们画了一个 土黄色的矩形，设置了阴影 */
ctx.fillStyle = '#E0E4CD';
ctx.shadowOffsetX = 10;
ctx.shadowOffsetY = 10;
ctx.shadowBlur = 4;
ctx.shadowColor = 'rgba(204, 204, 204, 0.5)';
ctx.fillRect(30,0,30,150);
/* 把当前状态（fillStyle 土黄色，阴影属性），推入到状态栈中，假设叫状态2 */
ctx.save();
我们看到状态栈中有两个状态了：状态1（橘色的）、状态2（土黄色的）
/* 然后我们画了一个 翠绿色的矩形，设置了阴影 */
ctx.fillStyle = '#A7DBD7';
ctx.shadowOffsetX = 15;
ctx.shadowOffsetY = 15;
ctx.shadowBlur = 4;
ctx.shadowColor = 'rgba(204, 204, 204, 0.5)';
ctx.fillRect(90,0,45,150);
/* 把当前状态（fillStyle 翠绿色，阴影属性），推入到状态栈中，假设叫状态3 */
ctx.save();
我们看到状态栈中有三个状态了：状态1（橘色的）、状态2（土黄色的）、状态3（翠绿色的）
/*我们从状态栈顶部取出状态3，当前绘制状态就变成了状态3了（翠绿色的）*/
ctx.restore();
/*画一个翠绿色的圆*/
ctx.beginPath();
ctx.arc(185, 75, 22, 0, Math.PI*2, true);
ctx.closePath();
ctx.fill();
/*我们从状态栈顶部取出状态3，当前绘制状态就变成了状态2了（土黄色的）*/
ctx.restore();
/*画一个土黄色的圆*/
ctx.beginPath();
ctx.arc(260, 75, 15, 0, Math.PI*2, true);
ctx.closePath();
ctx.fill();
/*我们从状态栈顶部取出状态3，当前绘制状态就变成了状态1了（橘色色的）*/
ctx.restore();
/*画一个橘色的圆*/
ctx.beginPath();
ctx.arc(305, 75, 8, 0, Math.PI*2, true);
ctx.closePath();
ctx.fill();
--------------------------------- O(∩∩)O 正文结束 O(∩∩)O--------------------------------**
这样下来是不是很简单？！希望我有翻译清楚。欢迎指正。
我是“南丘啊南丘”，希望大家在平凡的日子里好好学习，热爱生活，日日是好日！