কম্পিউটার

কিভাবে HTML5 ক্যানভাসে একটি আয়তক্ষেত্র আঁকতে হয়?


HTML5 ট্যাগটি স্ক্রিপ্টিং ব্যবহার করে গ্রাফিক্স, অ্যানিমেশন ইত্যাদি আঁকতে ব্যবহৃত হয়। এটি HTML5 এ প্রবর্তিত একটি নতুন ট্যাগ। ক্যানভাস উপাদানটিতে getContext নামে একটি DOM পদ্ধতি রয়েছে, যা রেন্ডারিং প্রসঙ্গ এবং এর অঙ্কন ফাংশন প্রাপ্ত করে। এই ফাংশনটি একটি প্যারামিটার নেয়, প্রসঙ্গ 2d এর ধরন।

HTML5 ক্যানভাস দিয়ে একটি আয়তক্ষেত্র আঁকতে, fillRect(x, y, width, height) পদ্ধতি ব্যবহার করুন:

কিভাবে HTML5 ক্যানভাসে একটি আয়তক্ষেত্র আঁকতে হয়?

HTML5 ক্যানভাসের সাহায্যে আয়তক্ষেত্র আঁকতে শিখতে আপনি নিম্নলিখিত কোডটি চালানোর চেষ্টা করতে পারেন

উদাহরণ

<!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 ক্যানভাসে একটি আয়তক্ষেত্র আঁকতে হয়?


  1. কিভাবে HTML5 এ SVG লোগো আঁকবেন?

  2. ক্যানভাস HTML5 ব্যবহার করে কিভাবে একটি তারকা আঁকা?

  3. কিভাবে HTML5 এ SVG ব্যবহার করে আকার আঁকতে হয়?

  4. কিভাবে HTML ক্যানভাসে একটি বৃত্তাকার আয়তক্ষেত্র আঁকতে হয়?