HTML5 Canvas 提供了 save 和 restore 方法用来绘制复杂图形。

它可以保存 canvas 的状态，包括 canvas 的平移、放缩、旋转、错切、裁剪等操作等等，也可以恢复到上次保存的状态。

相关方法：

// 保存当前环境的状态
context.save()

// 返回之前保存过的路径状态和属性
context.restore()

canvas 的状态存储在内存中，它的数据结构类似于栈，即符合“先入后出，后入先出”的基本特点。

通过调用 save 方法相当于生成一个当前 Canvas 状态的快照，它将快照保存在快照池中，可任意多次调用，相当于压栈 push 操作。

而调用 restore 方法相当于从快照池中取出一个已保存的 Canvas 状态，然后恢复在画布之上，也可以任意多次调用，相当于弹栈 pop 操作。

状态包括

1. 变形，即移动，旋转和缩放 (transformation matrix)
2. 裁剪区域 (clipping region)
3. 虚线参数 (dash list)
4. 以下属性的值：
   strokeStyle, fillStyle, globalAlpha, lineWidth, lineCap, lineJoin, miterLimit, lineDashOffset, shadowOffsetX, shadowOffsetY, shadowBlur, shadowColor, globalCompositeOperation, font, textAlign, textBaseline, direction, imageSmoothingEnabled

例如:

var canvas=document.getElementById("myCanvas");
var ctx=canvas.getContext("2d");
// 默认黑色
ctx.fillRect(0, 0, 50, 50); 
 // 保存默认状态
ctx.save(); 
// 设置绿色
ctx.fillStyle = 'green'; 
ctx.fillRect(50, 50, 50, 50);
// 保存绿色
ctx.save();
// 设置红色
ctx.fillStyle = 'red'; 
// 恢复到设置绿色
ctx.restore(); 
ctx.fillRect(100, 100, 50, 50);
// 恢复到默认黑色
ctx.restore();
ctx.fillRect(150, 150, 50, 50);