在了解變形之前，我先介紹一下兩個在你開始繪制復雜圖形就必不可少的方法。 - 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 保存了狀態，那么我們就需要手動改變設置來回到前一個狀態，這個對于兩三個屬性的時候還是適用的，一旦多了，我們的代碼將會猛漲。