[TOC] ## 保存和回復 ``` save() restore() ``` 可以保存到狀態有 1. 當前應用的變形（即移動，旋轉和縮放） 2.,`fillStyle`,`globalAlpha`,`lineWidth`,`lineCap`,`lineJoin`,`miterLimit`,`shadowOffsetX`,`shadowOffsetY`,`shadowBlur`,`shadowColor`,`globalCompositeOperation 的值` 3. 當前的裁切路徑（`clipping path`） ## 實例 ``` var draw=()=>{ let canvas = document.querySelector("#tutorial"); if(!canvas.getContext)return; /** * @type CanvasRenderingContext2D */ let ctx = canvas.getContext("2d"); ctx.fillRect(0, 0, 150, 150); // 使用默認設置繪制一個矩形 ctx.save(); // 保存默認狀態 ctx.fillStyle = 'red' // 在原有配置基礎上對顏色做改變 ctx.fillRect(15, 15, 120, 120); // 使用新的設置繪制一個矩形 ctx.save(); // 保存當前狀態 ctx.fillStyle = '#FFF' // 再次改變顏色配置 ctx.fillRect(30, 30, 90, 90); // 使用新的配置繪制一個矩形 ctx.restore(); // 重新加載之前的顏色狀態,此時變為紅色 ctx.fillRect(45, 45, 60, 60); // 使用上一次的配置繪制一個矩形 ctx.restore(); // 加載默認顏色配置,此時變為黑色 ctx.fillRect(60, 60, 30, 30); // 使用加載的配置繪制一個矩形 } ```