HTML5 Canvas：绘图状态和状态栈

当我们在HTML5时 在canvas中使用2D上下文绘制图形时，2D上下文将处于某种状态。您可以通过操作2D上下文的属性来设置这些状态，例如fillStyle属性和strokeStyle属性。所有这些操作都被称为2D上下文state（状态）。

有时，当我们在canvas上绘制图形时，我们经常需要改变2D上下文的状态。例如，当你画直线或矩形时，你需要一个strokStyle，在绘制下一条直线或矩形时，需要另一条strokStyle。或不同的填充色、旋转角度等。

在绘制图形之前，我们不能设置所有图形的状态，但我们可以将当前状态堆放到状态堆栈中。在这种状态堆栈中，最终压入状态将首先弹出。这样，我们就可以很容易地恢复到上一个绘图状态。

HTML5 canvas绘图状态的例子

压栈和出栈绘图状态的方法如下:

context.save();     // 将一个状态压入状态栈中

context.restore();  // 将前面的状态设置在2d上下文中

对于一个状态栈，你可以压入多个状态，然后依次弹出。看下面的例子:

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);

上述代码的结果如下：

您的浏览器不支持HTML5 Canvas！

状态栈的用途

状态栈对于改变canvas的合成模式、图形转换设置和需要回到之前设置状态的场景非常有用。

通过保存和恢复合成模式或图形转换设置，您可以确保它们被正确重置。否则，很难恢复到以前设置的状态。

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

2D上下文的所有属性都是可以保存和恢复的属性。当您恢复状态时，绘制区域不会自动恢复。您只恢复了2D上下文的设置（属性值），包括：

• fillStyle

• font

• globalAlpha

• globalCompositionOperation

• lineCap

• lineJoin

• lineWidth

• miterLimit

• shadowBlur

• shadowColor

• shadowOffsetX

• shadowOffsetY

• strokeStyle

• textAlign

• textBaseline

• clipping区域

• 转换矩阵

上面的列表不是完整的列表。属性属于2D上下文状态的一部分还有更多。

返回HTML5 Canvas教程目录