我们在canvas上绘制图形的时候,经常需要通过save()和restore()改变2D上下文的状态。举例来说,你在绘制直线或矩形的时候需要一种strokStyle,在绘制下一条直线或矩形的时候需要另一种strokStyle。又或者是不同的填充色,旋转角度等
当使用其2D上下文在HTML5画布上进行绘制时,该2D上下文处于某种状态。您可以通过操纵2D上下文属性(例如fillStyle 和)来设置该状态strokeStyle。所有这些操作总共称为2D上下文state。
通常,在画布上绘制时,您需要在绘制过程中更改2D上下文的状态。例如,strokStyle对于一条直线或矩形,可能需要一个,而strokeStyle对于其他直线或矩形,则可能需要另一个 。或其他轮换,或其他。
由于在绘制每个形状之前设置完整状态非常麻烦,因此可以将状态推送到状态堆栈上。然后可以从此状态堆栈中弹出较早的状态。这是在临时状态更改后恢复较早状态的快速方法.
绘图状态进行压栈和出栈的方法如下:
context.save(); // 将一个状态压入状态栈中. context.restore(); // 将最前面的状态出栈,并设置到2d上下文中.
被保存在堆栈中后,您可以将多个状态推送到该堆栈上,然后将其弹出。这是一个代码示例:
<canvas id="ex1" width="500" height="100" style="border: 1px solid #cccccc;">HTML5 Canvas not supported</canvas> <script> 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); </script>测试看看 ‹/›
这是在画布上绘制时上述代码的结果:
如果您更改画布合成模式或转换设置,并且需要在进行更改之前先返回到设置,则状态堆栈非常有用。通过保存和恢复构图模式或转换设置,可以确保正确重置了它。否则,要返回到之前的确切设置可能会有些困难。
所有2D上下文属性都是保存和还原状态的一部分。但是,在画布上绘制的却不是。这意味着,在还原状态时,您不会还原绘图区域本身。您仅还原2D上下文设置(属性值)。这些设置包括:
fillStyle
font
globalAlpha
globalCompositionOperation
lineCap
lineJoin
lineWidth
miterLimit
shadowBlur
shadowColor
shadowOffsetX
shadowOffsetY
strokeStyle
strokeStyle
textAlign
textBaseline
The clipping region
The transformation matrix (通过context.rotate()+ 旋转+平移context.setTransform())
此列表并不详尽。随着标准的发展,更多的属性可能成为2D上下文状态的一部分.