এইচটিএমএল <canvas> ট্যাগ
<canvas> ট্যাগের ব্রাউজার সাপোর্ট
| এলিমেন্ট | Google Chrome | Edge/IE | Mozila Firefox | Safari | Opera |
|---|---|---|---|---|---|
<canvas> |
সকল ভার্সন | সকল ভার্সন | সকল ভার্সন | সকল ভার্সন | সকল ভার্সন |
সংজ্ঞা ও ব্যবহার
স্ক্রিপ্ট(সাধারণত জাভাস্ক্রিপ্ট ব্যবহার করে) ব্যাবহার করে গ্রাফিক্স আঁকতে <canvas> ট্যাগ ব্যবহার করা হয়।
<canvas> ট্যাগ শুধুমাত্র গ্রাফিক্সের জন্য একটি কন্টেইনার। প্রকৃতপক্ষে গ্রাফিক্স আঁকতে হলে আপনাকে অবশ্যই স্ক্রিপ্ট ব্যবহার করতে হবে।
নিচের উদাহরণে <canvas> ট্যাগটি দেখানো হলোঃ
উদাহরণ
<!DOCTYPE html>
<html>
<body>
<canvas id="canvasId">আপনার ব্রাউজারে এইচটিএমএল(৫) canvas ট্যাগ সাপোর্ট করে না।</canvas>
<script>
var c = document.getElementById("canvasId");
var ctx = c.getContext("2d");
ctx.fillStyle = "#cc33ff";
ctx.fillRect(0, 0, 80, 100);
</script>
</body>
</html>
বিঃদ্রঃ <canvas> ট্যাগ ইন্টারনেট এক্সপ্লোরার ৮ এবং আগের ভার্সনগুলোতে সাপোর্ট করে না।
ফলাফল
টীকা ও মন্তব্যঃ
- যেসকল ব্রাউজারে
<canvas>এলিমেন্ট সাপোর্ট করবে না, সেখানে<canvas>এলিমেন্টের ভিতরের লেখাগুলো প্রদর্শিত হবে। <canvas>এলিমেন্ট সম্পর্কে আরো জানতে আমাদের এইচটিএমএল ক্যানভাস টিউটোরিয়াল পেজে ভিজিট করুন।- canvas অবজেক্টে ব্যবহৃত প্রোপার্টি এবং মেথডের একটি সম্পূর্ণ রেফারেন্সের জন্য, আমাদের এইচটিএমএল ক্যানভাস রেফারেন্স পেজে ভিজিট করুন।
এট্রিবিউট
নিচের টেবিলে <canvas> ট্যাগের এট্রিবিউট, এট্রিবিউটের ভ্যালু এবং তাদের ব্যবহার তুলে ধরা হলোঃ
| এট্রিবিউট | ভ্যালু | বর্ণনা |
|---|---|---|
| height | pixels | ক্যানভাসের উচ্চতা নির্দিষ্ট করার জন্য ব্যবহৃত হয়। |
| width | pixels | ক্যানভাসের প্রস্থ নির্দিষ্ট করার জন্য ব্যবহৃত হয়। |
<canvas> ট্যাগে গ্লোবাল এবং ইভেন্ট এট্রিবিউট সাপোর্ট করে কিনা?
| গ্লোবাল এট্রিবিউট | ইভেন্ট এট্রিবিউট |
|---|---|
| সাপোর্ট করে | সাপোর্ট করে |
<canvas> ট্যাগের ডিফল্ট স্টাইল
অধিকাংশ ব্রাউজারেই <canvas> এলিমেন্ট নিম্নলিখিত স্টাইল ভ্যালুগুলো সহকারে প্রদর্শিত হয়ঃ
canvas {
height: 150px;
width: 300px;
}