CanvasRenderingContext2D: save() 方法

基线 广泛可用

此功能已十分成熟，可在许多设备和浏览器版本中使用。 它自 2015 年 7 月.

报告反馈

Canvas 2D API 的 CanvasRenderingContext2D.save() 方法通过将当前状态推送到堆栈上来保存画布的整个状态。

绘图状态

  • 保存到堆栈中的绘图状态包括：
  • 当前变换矩阵。
  • 当前裁剪区域。
  • 当前虚线列表。

语法

以下属性的当前值：strokeStyle，fillStyle，globalAlpha，lineWidth，lineCap，lineJoin，miterLimit，lineDashOffset，shadowOffsetX，shadowOffsetY，shadowBlur，shadowColor，globalCompositeOperation，font，textAlign，textBaseline，direction，imageSmoothingEnabled。
save()

参数

无。

返回值

无 (undefined).

示例

保存绘图状态

此示例使用 save() 方法保存当前状态，并使用 restore() 在稍后恢复状态，以便您能够稍后使用当前状态绘制矩形。

HTML

html
<canvas id="canvas"></canvas>

JavaScript

以下属性的当前值：strokeStyle，fillStyle，globalAlpha，lineWidth，lineCap，lineJoin，miterLimit，lineDashOffset，shadowOffsetX，shadowOffsetY，shadowBlur，shadowColor，globalCompositeOperation，font，textAlign，textBaseline，direction，imageSmoothingEnabled。
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

// Save the current state
ctx.save();

ctx.fillStyle = "green";
ctx.fillRect(10, 10, 100, 100);

// Restore to the state saved by the most recent call to save()
ctx.restore();

ctx.fillRect(150, 40, 100, 100);

结果

规范

规范
HTML 标准
# dom-context-2d-save-dev

浏览器兼容性

BCD 表仅在启用 JavaScript 的浏览器中加载。

另请参阅