HTML5 Canvas-এ রেখা কীভাবে আঁকবেন?

HTML5 Canvas-এ রেখা আঁকার পদ্ধতি

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

উদাহরণ

নিচের কোডটি চালিয়ে HTML5 Canvas-এ রেখা আঁকতে শিখুন:

<!DOCTYPE html>
<html>
  <head>
    <title>HTML5 Canvas Tag</title>
  </head>
  <body>
    <canvas id="newCanvas" width="400" height="300" style="border:1px solid #000000;"></canvas>
    <script>
      var c = document.getElementById('newCanvas');
      var ctx = c.getContext('2d');
      // রেখা আঁকুন
      ctx.beginPath();
      ctx.moveTo(30, 30);
      ctx.lineTo(180, 100);
      ctx.moveTo(30, 10);
      ctx.lineTo(260, 100);
      ctx.stroke();
    </script>
  </body>
</html>

আউটপুট

ব্যাখ্যা: moveTo(x, y) দিয়ে পেনের অবস্থান সরিয়ে নেওয়া হয়, আর lineTo(x, y) দিয়ে ওই পজিশন থেকে নির্দিষ্ট কোঅর্ডিনেট পর্যন্ত রেখা আঁকা হয়। stroke() কল না করার পর্যন্ত রেখা দৃশ্যমান হয় না।