網上搜羅了一堆資料，最后總結一下。
save：用來保存Canvas的狀態。save之后，可以調用Canvas的平移、放縮、旋轉、錯切、裁剪等操作。 restore：用來恢復Canvas之前保存的狀態。防止save后對Canvas執行的操作對后續的繪制有影響。
對canvas中特定元素的旋轉平移等操作實際上是對整個畫布進行了操作，所以如果不對canvas進行save以及restore，那么每一次繪圖都會在上一次的基礎上進行操作，最后導致錯位。比如說你相對於起始點每次30度遞增旋轉，30，60，90.如果不使用save 以及 restore 就會變成30, 90, 150，每一次在前一次基礎上進行了旋轉。save是入棧，restore是出棧。
- var canvas = document.getElementById("canvas");
- var context = canvas.getContext('2d');
- context.lineWidth = "10";
- context.strokeStyle = "#fe9901";
- context.translate(canvas.width / 2, canvas.height / 2);
- context.rotate( 30 / 180 * Math.PI);
- context.beginPath();
- context.moveTo(0, -180);
- context.lineTo(0, -200);
- context.stroke();
- context.rotate( 30 / 180 * Math.PI);
- context.beginPath();
- context.moveTo(0, -140);
- context.lineTo(0, -160);
- context.stroke();
沒有使用save，restore，第一次繪制時畫布旋轉30度，然后按照坐標繪制直線，第二次繪制在第一次基礎上繼續繪制，旋轉30度，實際上相對於起點，旋轉了60. 所以畫出來兩條直線不在一條指線上。
- context.save();
- context.rotate( 30 / 180 * Math.PI);
- context.beginPath();
- context.moveTo(0, -180);
- context.lineTo(0, -200);
- context.stroke();
- context.restore();
- context.rotate( 30 / 180 * Math.PI);
- context.beginPath();
- context.moveTo(0, -140);
- context.lineTo(0, -160);
- context.stroke();
第二次繪制加入save和restore， 再第一次繪制后，resore到起始狀態，也就是現在畫布又回到了0度位置，而不是30度，所以第二次繪制是從0度開始繪制，繪制出來應該和第一次的直線在一條指線上。
