HTML5中Canvas状态保存Save与恢复Restore机制-H5教程-PHP中文网

Canvas 的 save() 和 restore() 是操作状态栈的机制：save() 快照变换矩阵、裁剪路径、样式、线条及文本设置等属性，restore() 弹出并还原；不保存已绘制像素、画布尺寸或像素数据。

html5中canvas状态保存save与恢复restore机制

Canvas 的 save() 和 restore() 是管理绘图状态的核心机制，本质是操作一个“状态栈”——每次 save() 把当前全部可变绘图属性压入栈顶，restore() 则弹出栈顶状态并完全还原（包括变换、裁剪路径、样式、线条设置等），不涉及已绘制的像素。

哪些状态会被保存和恢复？

调用 save() 时，以下上下文属性会被完整快照并存入栈：

变换矩阵：平移、旋转、缩放、斜切等累积效果（即 setTransform() 或连续 translate()/rotate() 后的最终矩阵）
裁剪路径（clipping path）：当前生效的裁剪区域（由 clip() 建立）
填充与描边样式：如 fillStyle、strokeStyle、gradient、pattern
线条相关设置：包括 lineWidth、lineCap、lineJoin、miterLimit、globalAlpha、globalCompositeOperation
字体与文本设置：如 font、textAlign、textBaseline

注意：已绘制的图形内容、canvas 尺寸、画布像素数据本身不会被保存或恢复。它们只管“怎么画”，不管“画了什么”。

典型使用场景与写法模式

最常见的是在局部变换或临时样式前做隔离，避免污染后续绘制：

绘制旋转文字而不影响其他元素：save() → rotate() → fillText() → restore()
为某组图形设置独立裁剪区：save() → 绘制裁剪路径 → clip() → 绘图 → restore()
临时切换混合模式或透明度：save() → globalCompositeOperation = 'multiply' → 绘图 → restore()

务必成对出现；漏掉 restore() 会导致状态残留，多调用则可能栈空报错（DOMException: The operation is not supported）。

状态栈是独立且嵌套的

每个 save() 都生成一个新快照，多次调用形成后进先出（LIFO）栈。例如：

ctx.save(); // 状态 A（初始）
ctx.rotate(0.1);
ctx.save(); // 状态 B（含旋转）
ctx.translate(100, 50);
ctx.save(); // 状态 C（含旋转+平移）
// ...绘图
ctx.restore(); // 回到状态 B
ctx.restore(); // 回到状态 A
ctx.restore(); // 回到初始（再调用会报错）

这种嵌套结构天然支持模块化绘图逻辑，比如封装一个带旋转和缩放的图标绘制函数，内部自行 save/restore，对外零副作用。