html5 canvas store 和 restore 详解

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.fillStyle = 'black' ;    
     ctx.fillRect(0,0,150,150);
     //  Save the default state 
     // (1)
     ctx.save();      
            
     // Make changes to the settings
     ctx.fillStyle = 'blue'       
     ctx.fillRect( 15,15,120,120); 
     // Save the current state
     //(2)
     ctx.save();                  
    
     // Make the new changes to the settings
     ctx.fillStyle = 'white';       
     ctx.globalAlpha = 0.5;    
     ctx.fillRect(30,30,90,90);

     // Restore previous state
     //restore (2)
     ctx.restore();
     // Draw a rectangle with restored settings               
     ctx.fillRect(45,45,60,60);   

     // Restore original state
     //restore (1)
     ctx.restore();
     // Draw a rectangle with restored settings          
     ctx.fillRect(55,55,45,45);  
  
  } else {
    alert('You need Safari or Firefox 1.5+ to see this demo.');
  }
}

自然，restore是出栈的意思！！

（原文为外国网站，忘记地址了。感谢！）

转载于:https://www.cnblogs.com/gfqFighting/archive/2012/10/03/2710744.html