HTML5 Canvas ग्रिड में यूनिट्स बढ़ाएं या घटाएं

Canvas स्केलिंग

HTML5 Canvas scale(x, y) मेथड प्रदान करता है जिसका उपयोग हमारे Canvas ग्रिड में यूनिट्स को बढ़ाने या घटाने के लिए किया जाता है। इसका उपयोग स्केल्ड डाउन या बड़ी आकृतियों और बिटमैप्स को ड्रॉ करने के लिए किया जा सकता है।

यह मेथड दो पैरामीटर लेता है जहां x क्षैतिज दिशा में स्केल फैक्टर है और y ऊर्ध्वाधर दिशा में स्केल फैक्टर है। दोनों पैरामीटर्स पॉजिटिव नंबर्स होने चाहिए।

उदाहरण

<!DOCTYPE HTML>
<html>
  <head>
    <script>
      function drawShape(){
        var canvas = document.getElementById('mycanvas');
        if (canvas.getContext){
          var ctx = canvas.getContext('2d');
          ctx.strokeStyle = "#fc0";
          ctx.lineWidth = 1.5;
          ctx.fillRect(0,0,300,300);
          
          // यूनिफॉर्म स्केलिंग
          ctx.save();
          ctx.translate(50,50);
          drawSpirograph(ctx,22,6,5);
          ctx.translate(100,0);
          ctx.scale(0.75,0.75);
          drawSpirograph(ctx,22,6,5);
          ctx.translate(133.333,0);
          ctx.scale(0.75,0.75);
          drawSpirograph(ctx,22,6,5);
          ctx.restore();
          
          // नॉन-यूनिफॉर्म स्केलिंग उदाहरण...
        }
      }
      
      function drawSpirograph(ctx,R,r,O){
        // स्पाइरोग्राफ ड्रॉइंग लॉजिक
      }
    </script>
  </head>
  <body onload="drawShape();">
    <canvas id="mycanvas" width="400" height="400"></canvas>
  </body>
</html>

scale() बाद के ड्रॉइंग ऑपरेशन्स के लिए निर्देशांक प्रणाली को बदल देता है।