zoukankan      html  css  js  c++  java
  • 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是出栈的意思!!

    (原文为外国网站,忘记地址了。感谢!)

  • 相关阅读:
    软件工程提问回顾与个人总结
    OO第二次单元总结
    OO第一次单元总结
    软件工程结对项目
    软件工程第一次阅读作业
    软件工程第0次个人作业
    结队作业
    软件工程第一次阅读作业
    软工第0次作业
    oo第四篇博客作业
  • 原文地址:https://www.cnblogs.com/gfqFighting/p/2710744.html
Copyright © 2011-2022 走看看