canvas的狀態(tài)如何保存和恢復
save():保存當前的繪圖狀態(tài)。
restore():恢復之前保存的繪圖狀態(tài)。
調(diào)用save方法將當前繪圖狀態(tài)保存到繪圖堆棧中，每次調(diào)用restore方法從棧頂取出保存的狀態(tài)。
由于出棧的次數(shù)不能多于入棧的次數(shù)，故程序中restore方法調(diào)用的次數(shù)不應該比save方法多。
save都可以保存什么？
當前的坐標變換信息（比如旋轉(zhuǎn)rotate()或平移setTransform()）
當前剪貼區(qū)域
圖形上下文對象（CanvasRenderingContext2D）的當前屬性值
其中CanvasRenderingContext2D的主要屬性值如下，完整請查看MDN文檔：
canvas 取得畫布<canvas>元素
fillStyle 填充路徑的當前的顏色、模式或漸變
globalCompositeOperation 指定顏色如何與畫布上已有顏色組合（合成）
lineCap 指定線段端點的繪制方式
lineJoin 指定線段連接的繪制方式
lineWidth 繪制線段的寬度
miterLimit 當lineJoin為miter時，這個屬性指定斜連接長度和二分之一線寬的最大比率
shadowBlur 指定陰影模糊度
shadowColor 指定陰影顏色
shadowOffsetX 指定陰影水平偏移值
shadowOffsetY 指定陰影垂直偏移值
strokeStyle 指定線段顏色
實例
在線查看?
const c = document.getElementById("myCanvas");
const ctx = c.getContext("2d");
ctx.fillStyle = "#999";
ctx.fillRect(0, 0, 400, 30);
ctx.save(); // 保存當前狀態(tài) 01
ctx.fillStyle = "#09F";
ctx.fillRect(0, 30, 400, 30);
ctx.save(); // 保存當前狀態(tài) 02
ctx.fillStyle = "#333";
ctx.fillRect(0, 60, 400, 30);
ctx.restore(); // 取出保存的狀態(tài) 02 恢復
ctx.fillRect(0, 90, 400, 30);
ctx.restore(); // 取出保存的狀態(tài) 01 恢復
ctx.fillRect(0, 120, 400, 30);
