HTML5 Canvas - 保存和恢复状态

HTML5 canvas 提供了两种重要的保存和恢复 canvas 状态的方法。canvas 绘图状态基本上是所有已应用样式和转换的快照，包括以下内容：

诸如平移、旋转和缩放等转换。
当前剪辑区域。
以下属性的当前值：strokeStyle, fillStyle, globalAlpha, lineWidth, lineCap, lineJoin, miterLimit, shadowOffsetX, shadowOffsetY, shadowBlur, shadowColor, globalCompositeOperation, font, textAlign, textBaseline.

每次调用save方法时，canvas 状态都会存储到堆栈中，并且每次调用restore方法时，都会从堆栈中返回最后保存的状态。

序号	方法和描述
1	save() 此方法将当前状态压入堆栈。
2	restore() 此方法弹出堆栈顶部的状态，将上下文恢复到该状态。

序号

方法和描述

save()

此方法将当前状态压入堆栈。

restore()

此方法弹出堆栈顶部的状态，将上下文恢复到该状态。

示例

以下是一个简单的示例，它使用上述方法来演示如何调用restore以恢复原始状态，并且最后一个矩形再次以黑色绘制。

演示

<!DOCTYPE HTML>

<html>
   <head>
      
      <style>
         #test {
            width: 100px;
            height:100px;
            margin: 0px auto;
         }
      </style>
      
      <script type = "text/javascript">
         function drawShape() {
            
            // get the canvas element using the DOM
            var canvas = document.getElementById('mycanvas');
            
            // Make sure we don't execute when canvas isn't supported
            if (canvas.getContext) {
            
               // use getContext to use the canvas for drawing
               var ctx = canvas.getContext('2d');
               
               //  draw a rectangle with default settings
               ctx.fillRect(0,0,150,150);
               
               //  Save the default state
               ctx.save();
               
               // Make changes to the settings
               ctx.fillStyle = '#66FFFF'
               ctx.fillRect( 15,15,120,120); 
               
               // Save the current state
               ctx.save();
               
               // Make the new changes to the settings
               ctx.fillStyle = '#993333'
               ctx.globalAlpha = 0.5;
               ctx.fillRect(30,30,90,90);
               
               // Restore previous state
               ctx.restore();
               
               // Draw a rectangle with restored settings
               ctx.fillRect(45,45,60,60);   
               
               // Restore original state
               ctx.restore();
               
               // Draw a rectangle with restored settings
               ctx.fillRect(40,40,90,90);  
            } else {
               alert('You need Safari or Firefox 1.5+ to see this demo.');
            }
         }
      </script>
   </head>
   
   <body id = "test" onload = "drawShape();">
      <canvas id = "mycanvas"></canvas>
   </body>
   
</html>

上述示例将产生以下结果：

html5_canvas.htm

打印页面