当使用其2D上下文在HTML5画布上绘制时，该2D上下文处于某种状态。我们可以通过操纵2D Context属性来设置该状态，例如fillStyle和strokeStyle。所有这些操作总共称为2D上下文"状态"。

通常，在画布上绘制时，我们需要在绘制过程中更改2D上下文的状态。例如，对于一条直线或者矩形，我们可能需要一个" strokStyle"，对于其他直线或者矩形，我们可能需要另一个" strokeStyle"。或者其他轮换，或者其他。

由于在绘制每个形状之前设置完整状态非常麻烦，因此可以将状态推送到状态堆栈上。然后，可以从此状态堆栈中弹出较早的状态。这是在临时状态更改后恢复较早状态的快速方法。

HTML5画布状态示例

我们可以使用以下方法推送并弹出2D上下文的状态：

context.save();     // state pushed onto stack.

context.restore();  // state popped from stack, and set on 2D Context.

被保存在堆栈中后，我们可以将多个状态推送到该堆栈上，并在以后弹出它们。这是一个代码示例：

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

context.fillStyle  ="#66ff66";
context.strokeStyle="#990000";
context.lineWidth  = 5;

context.fillRect  (5, 5, 50, 50);
context.strokeRect(5, 5, 50, 50);

context.save();

context.fillStyle = "#6666ff";

context.fillRect  (65, 5, 50, 50);
context.strokeRect(65, 5, 50, 50);

context.save();

context.strokeStyle = "#000099";

context.fillRect  (125, 5, 50, 50);
context.strokeRect(125, 5, 50, 50);

context.restore();

context.fillRect  (185, 5, 50, 50);
context.strokeRect(185, 5, 50, 50);

context.restore();

context.fillRect  (245, 5, 50, 50);
context.strokeRect(245, 5, 50, 50);

状态堆栈用例

如果我们更改画布合成模式或者转换设置，并且需要在更改之前先返回到设置，则状态堆栈非常有用。通过保存和还原合成模式或者转换设置，可以确保正确重置了合成模式或者转换设置。否则，要返回到之前的确切设置可能会有些困难。

2D上下文状态的一部分是什么？

所有2D上下文属性都是保存和还原状态的一部分。但是，在画布上绘制的却不是。这意味着，在还原状态时，我们不会还原绘图区域本身。我们仅还原2D上下文设置(属性值)。这些设置包括：

• fillStyle
• font
• globalAlpha
• globalCompositionOperation
• lineCap
• lineJoin
• lineWidth
• miterLimit
• shadowBlur
• shadowColor
• shadowOffsetX
• shadowOffsetY
• strokeStyle
• strokeStyle
• textAlign
• textBaseline
• The clipping region
• 转换矩阵(通过 context.rotate()+ context.setTransform()进行旋转+变换)

此列表并不详尽。随着标准的发展，更多的属性可能成为2D上下文状态的一部分。