CanvasRenderingContext2D:save() 方法

Baseline 已广泛支持

此特性已相当成熟,可在许多设备和浏览器版本上使用。自 ⁨2015 年 7 月⁩以来,各浏览器均已提供此特性。

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

绘制状态

压入堆栈保存的绘制状态包括:

语法

js
save()

参数

无。

返回值

无(undefined)。

示例

保存绘制状态

本示例使用 save() 方法保存当前状态,并稍后使用 restore() 方法恢复它,以便您之后可以使用当前状态绘制一个矩形。

HTML

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

JavaScript

js
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

浏览器兼容性

另见