HTML5 Canvas-এ ইমেজ কীভাবে ব্যবহার করবেন?

HTML5 Canvas-এ ইমেজ ব্যবহার করার পদ্ধতি

HTML5 <canvas> ট্যাগ ব্যবহার করে স্ক্রিপ্টিং দিয়ে গ্রাফিক্স, অ্যানিমেশন ইত্যাদি আঁকা হয়। এটি HTML5-এ নতুন যোগ করা একটি ট্যাগ। HTML5 Canvas-এ ইমেজ ব্যবহার করতে drawImage() মেথড ব্যবহার করা হয়। এই মেথডটি প্রদত্ত ইমেজটি Canvas-এ আঁকে।

উদাহরণ

নিচের কোডটি চালিয়ে HTML Canvas-এ ইমেজ ব্যবহার করতে শিখুন। এখানে ইমেজটি একটি ইমেজ বা Canvas অবজেক্টের রেফারেন্স। x এবং y টার্গেট Canvas-এ কোঅর্ডিনেট যেখানে আমাদের ইমেজটি রাখা হবে।

<!DOCTYPE HTML>
<html>
  <head>
    <script type="text/javascript">
      function drawShape() {
        // DOM ব্যবহার করে canvas এলিমেন্ট পান
        var canvas = document.getElementById('mycanvas');
        // নিশ্চিত করুন canvas সাপোর্ট করা হয়েছে
        if (canvas.getContext) {
          // getContext ব্যবহার করে canvas-এ আঁকার জন্য প্রস্তুত হন
          var ctx = canvas.getContext('2d');
          // আকার আঁকুন
          var img = new Image();
          img.src = '/images/backdrop.jpg';
          img.onload = function() {
            ctx.drawImage(img, 0, 0);
            ctx.beginPath();
            ctx.moveTo(30, 96);
            ctx.lineTo(70, 66);
            ctx.lineTo(103, 76);
            ctx.lineTo(170, 15);
            ctx.stroke();
          }
        } else {
          alert('You need Safari or Firefox 1.5+ to see this demo.');
        }
      }
    </script>
  </head>
  <body onload="drawShape();">
    <canvas id="mycanvas"></canvas>
  </body>
</html>

HTML5 Canvas-এ ইমেজ কীভাবে ব্যবহার করবেন?

drawImage() মেথডের вариয়েশনগুলো:

drawImage(image, x, y) — মুল আকারে আঁকুন
drawImage(image, x, y, width, height) — রিসাইজ করে আঁকুন
drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight) — সোর্সের একটি অংশ কাটা করে ডেস্টিনেশনে আঁকুন (ক্রপিং)

গুরুত্বপূর্ণ: ইমেজ লোড হওয়ার পরেই drawImage কল করতে হবে, তাই onload ইভেন্ট হ্যান্ডলার ব্যবহার করা উচিত।