在了解变形之前，我先介绍一下两个在你开始绘制复杂图形就必不可少的方法。 - 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 保存了状态，那么我们就需要手动改变设置来回到前一个状态，这个对于两三个属性的时候还是适用的，一旦多了，我们的代码将会猛涨。