当前位置：文江博客知识库简体中文文档 Web API CanvasRenderingContext2D save

CanvasRenderingContext2D.save() - Web API 接口参考编辑

CanvasRenderingContext2D.save() 是 Canvas 2D API 通过将当前状态放入栈中，保存 canvas 全部状态的方法。

语法

void ctx.save();

绘制状态

保存到栈中的绘制状态有下面部分组成：

当前的变换矩阵。
当前的剪切区域。
当前的虚线列表.
以下属性当前的值： strokeStyle, fillStyle, globalAlpha, lineWidth, lineCap, lineJoin, miterLimit, lineDashOffset, shadowOffsetX, shadowOffsetY, shadowBlur, shadowColor, globalCompositeOperation, font, textAlign, textBaseline, direction, imageSmoothingEnabled.

示例

使用 save 方法

这是一段简单的代码片段，使用 save 方法保存默认的状态，这样，稍后你就可以使用默认的设置绘制一个矩形。

HTML

<canvas></canvas>

JavaScript

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

ctx.save(); // 保存默认的状态

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

ctx.restore(); // 还原到上次保存的默认状态
ctx.fillRect(150, 75, 100, 100);

修改下面的代码并在线查看 canvas 的变化：

Playable code

<canvas width="400" height="200" class="playable-canvas"></canvas>
<div class="playable-buttons">
  <input type="button" value="Edit" />
  <input type="button" value="Reset" />
</div>
<textarea class="playable-code">
ctx.save();
ctx.fillStyle = "green";
ctx.fillRect(10, 10, 100, 100);
ctx.restore();
ctx.fillRect(150, 75, 100, 100);</textarea>

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var textarea = document.getElementById("code");
var reset = document.getElementById("reset");
var edit = document.getElementById("edit");
var code = textarea.value;

function drawCanvas() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  eval(textarea.value);
}

reset.addEventListener("click", function() {
  textarea.value = code;
  drawCanvas();
});

edit.addEventListener("click", function() {
  textarea.focus();
})

textarea.addEventListener("input", drawCanvas);
window.addEventListener("load", drawCanvas);