HTML5 Canvas-এ আয়তক্ষেত্র কীভাবে আঁকবেন?

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

HTML5 <canvas> ট্যাগ ব্যবহার করে স্ক্রিপ্টিং দিয়ে গ্রাফিক্স, অ্যানিমেশন ইত্যাদি আঁকা হয়। এটি HTML5-এ নতুন যোগ করা একটি ট্যাগ। Canvas এলিমেন্টের একটি DOM মেথড আছে getContext, যা রেন্ডারিং কনটেক্সট এবং এর ড্রইং ফাংশনগুলো প্রাপ্ত করে। এই ফাংশনটি একটি প্যারামিটার নেয়—কনটেক্সটের টাইপ 2d।

HTML5 Canvas-এ আয়তক্ষেত্র আঁকতে fillRect(x, y, width, height) মেথড ব্যবহার করা হয়। এখানে x, y হলো আয়তের শুরুর কোঅর্ডিনেট, আর width, height হলো আয়তের প্রস্থ ও উচ্চতা।

উদাহরণ

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

<!DOCTYPE html>
<html>
  <head>
    <title>HTML5 Canvas Tag</title>
  </head>
  <body>
    <canvas id="newCanvas" width="200" height="100" style="border:1px solid #000000;"></canvas>
    <script>
      var c = document.getElementById('newCanvas');
      var ctx = c.getContext('2d');
      ctx.fillStyle = '#7cce2b';
      ctx.fillRect(0, 0, 300, 100);
    </script>
  </body>
</html>

আউটপুট

HTML5 Canvas-এ আয়তক্ষেত্র কীভাবে আঁকবেন?

অতিরিক্ত মেথড: শুধু আউটলাইন আঁকতে চাইলে strokeRect(x, y, width, height) ব্যবহার করুন। আর আয়তের নির্দিষ্ট অংশ মুছতে চাইলে clearRect(x, y, width, height) ব্যবহার করা যায়।