在了解变形之前，我先介绍一下两个在你开始绘制复杂图形就必不可少的方法。

• save()方法用于保存canvas状态。
• restore()方法用于恢复到canvas的上一个状态。

Canvas 的状态就是当前画面应用的所有样式和变形的一个快照。

Canvas 状态是以堆(stack)的方式保存的。每一次调用 save() 方法，当前的状态就会被保存进堆中（类似数组的push()）；而每一次调用restore()方法，就会将当前状态从堆中移除（类似数组的pop()）。这种状态包括：

• 当前应用的变形（即移动，旋转和缩放）
• 当前的裁切路径(使用clip()方法裁切)
• strokeStyle, fillStyle, globalAlpha, lineWidth, lineCap, lineJoin, miterLimit, shadowOffsetX, shadowOffsetY, shadowBlur, shadowColor, globalCompositeOperation，font，textAlgin和textBaseline的值.

你可以调用任意多次 save ()方法。 每一次调用 restore() 方法，上一个保存的状态就从堆中弹出，所有设定都恢复。

实例：canvas-demo/save.html：

cxt.fillStyle="red";
cxt.fillRect(10,10,50,50);
cxt.save();
cxt.fillStyle="blue";
cxt.fillRect(20,20,30,30);
cxt.restore();
cxt.fillRect(30,30,10,10);

我们第一步先设置了填充色为红色，画了一个大正方形，然后保存状态；第二步将填充色设置为蓝色，画了一个小一点正方形；跟着调用restore()恢复状态，也就是恢复填充色为红色的状态，再画了一个更小的正方形。

到目前为止所做的动作和前面章节的都很类似。不过一旦我们调用 restore，状态堆中最后的状态会弹出，并恢复所有设置。如果不是之前用 save 保存了状态，那么我们就需要手动改变设置来回到前一个状态，这个对于两三个属性的时候还是适用的，一旦多了，我们的代码将会猛涨。