HTML5-এ canvas ট্যাগ কেন ব্যবহার করা হয়?

HTML5-এ Canvas ট্যাগের ব্যবহার কারণ

Canvas-এর উচ্চতা নির্দিষ্ট করে। HTML <canvas> ট্যাগ ব্যবহার করে স্ক্রিপ্টিং দিয়ে গ্রাফিক্স, অ্যানিমেশন ইত্যাদি আঁকা হয়। <canvas> ট্যাগ HTML5-এ পরিচিত।

চলুন একটি সাধারণ <canvas> এলিমেন্ট দেখি دوটি নির্দিষ্ট অ্যাট্রিবিউট width এবং height সহ এবং সব কোর HTML5 অ্যাট্রিবিউট যেন id, name, এবং class ইত্যাদি।

<canvas id="myCanvas" width="100" height="100"></canvas>

অ্যাট্রিবিউটগুলো

অ্যাট্রিবিউট	মান	বর্ণনা
height	pixels	Canvas-এর উচ্চতা নির্দিষ্ট করে।
width	pixels	Canvas-এর প্রস্থ নির্দিষ্ট করে।

উদাহরণ

নিচের কোডটি চালিয়ে Canvas ব্যবহার করে আয়তক্ষেত্র তৈরি করতে শিখুন। Canvas এলিমেন্টের একটি DOM মেথড আছে getContext, যা রেন্ডারিং কনটেক্সট এবং এর ড্রইং ফাংশনগুলো প্রাপ্ত করে। এই ফাংশনটি একটি প্যারামিটার নেয়, কনটেক্সটের টাইপ 2d।

<!DOCTYPE html>
<html>
  <head>
    <title>HTML Canvas Tag</title>
  </head>
  <body>
    <canvas id="myCanvas"></canvas>
    <script>
      var c = document.getElementById('myCanvas');
      var ctx = c.getContext('2d');
      ctx.fillStyle = '#7cce2b';
      ctx.fillRect(0,0,300,100);
    </script>
  </body>
</html>

HTML5-এ canvas ট্যাগ কেন ব্যবহার করা হয়?

Canvas কেন ব্যবহার করবেন?

পিক্সেল-লেভেল কন্ট্রোল: গেম, চার্ট, ইমেজ প্রসেসিং
হাই পারফরম্যান্স: GPU অ্যাক্সিলারেশন (WebGL)
রিয়েল-টাইম আপডেট: অ্যানিমেশন, ভিডিও প্রসেসিং
SVG-এর বিপরীতে: Canvas রেস্টার বেসড (রেজোলিউশন-নির্ভর), SVG ভেক্টর বেসড (রেজোলিউশন-স্বতন্ত্র)

দ্রষ্টব্য: Canvas-এ আঁকা কন্টেন্ট DOM-এ থাকে না, তাই অ্যাক্সেসিবিলিটির জন্য SVG ভালো।