HTML5 Canvas स्टेट्स को कैसे सेव और रिस्टोर करें?

Canvas स्टेट मैनेजमेंट

HTML5 Canvas Canvas स्टेट्स को सेव और रिस्टोर करने के लिए दो महत्वपूर्ण मेथड्स प्रदान करता है।

Canvas स्टेट्स हर बार सेव मेथड कॉल होने पर एक स्टैक पर स्टोर होते हैं, और हर बार रिस्टोर मेथड कॉल होने पर स्टैक से अंतिम सेव्ड स्टेट लौटाया जाता है।

उदाहरण

<!DOCTYPE HTML>
<html>
  <head>
    <style>
      #test {
        width: 100px;
        height: 100px;
        margin: 0px auto;
      }
    </style>
    <script>
      function drawShape(){
        var canvas = document.getElementById('mycanvas');
        if (canvas.getContext){
          var ctx = canvas.getContext('2d');
          
          // डिफ़ॉल्ट सेटिंग्स के साथ आयत ड्रॉ करें
          ctx.fillRect(0,0,150,150);
          
          // डिफ़ॉल्ट स्टेट सेव करें
          ctx.save();
          
          // सेटिंग्स में परिवर्तन करें
          ctx.fillStyle = '#66FFFF';
          ctx.fillRect(15,15,120,120);
          
          // वर्तमान स्टेट सेव करें
          ctx.save();
          
          // सेटिंग्स में नए परिवर्तन करें
          ctx.fillStyle = '#993333';
          ctx.globalAlpha = 0.5;
          ctx.fillRect(30,30,90,90);
          
          // पिछली स्टेट रिस्टोर करें
          ctx.restore();
          
          // रिस्टोर सेटिंग्स के साथ आयत ड्रॉ करें
          ctx.fillRect(45,45,60,60);
          
          // मूल स्टेट रिस्टोर करें
          ctx.restore();
          
          // रिस्टोर सेटिंग्स के साथ आयत ड्रॉ करें
          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>

स्टेट स्टैक नेस्टेड ट्रांसफॉर्मेशन, स्टाइल्स, और क्लिपिंग क्षेत्रों को प्रबंधित करता है।