HTML5 Canvas ट्रांसलेट करना

translate() मेथड

Canvas को ट्रांसलेट करने के लिए translate() मेथड का उपयोग करें। HTML5 Canvas एक translate(x, y) मेथड प्रदान करता है जिसका उपयोग Canvas और इसके मूल बिंदु को ग्रिड में एक अलग बिंदु पर ले जाने के लिए किया जाता है।

यहां आर्ग्युमेंट x वह मात्रा है जितना Canvas को बाएं या दाएं ले जाया जाता है, और y वह मात्रा है जितना इसे ऊपर या नीचे ले जाया जाता है।

उदाहरण

<!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,300,300);
          for (i = 0; i < 3; i++) {
            for (j = 0; j < 3; j++) {
              ctx.save();
              ctx.strokeStyle = "#FF0066";
              ctx.translate(50+j*100, 50+i*100);
              drawSpirograph(ctx, 10*(j+3)/(j+2), -2*(i+3)/(i+1), 10);
              ctx.restore();
            }
          }
        } else {
          alert('You need Safari or Firefox 1.5+ to see this demo.');
        }
      }
      
      function drawSpirograph(ctx, R, r, O){
        var x1 = R-O;
        var y1 = 0;
        var i = 1;
        ctx.beginPath();
        ctx.moveTo(x1, y1);
        do {
          if (i > 20000) break;
          var x2 = (R+r)*Math.cos(i*Math.PI/72) - (r+O)*Math.cos(((R+r)/r)*(i*Math.PI/72));
          var y2 = (R+r)*Math.sin(i*Math.PI/72) - (r+O)*Math.sin(((R+r)/r)*(i*Math.PI/72));
          ctx.lineTo(x2, y2);
          x1 = x2;
          y1 = y2;
          i++;
        } while (x2 != R-O && y2 != 0);
        ctx.stroke();
      }
    </script>
  </head>
  <body id="test" onload="drawShape();">
    <canvas id="mycanvas" width="400" height="400"></canvas>
  </body>
</html>

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