HTML DOM Canvas অবজেক্ট

HTML DOM Canvas অবজেক্টটি HTML5-এ প্রবর্তিত <canvas> এলিমেন্টের সাথে সম্পর্কিত। <canvas> ট্যাগটি জাভাস্ক্রিপ্টের সাহায্যে গ্রাফিক্স আঁকতে ব্যবহৃত হয়। ক্যানভাস গ্রাফিক্সের জন্য একটি কন্টেইনার হিসেবে কাজ করে। ক্যানভাসে আমরা রেখা, আকৃতি ইত্যাদি আঁকতে পারি।

প্রপার্টি

Canvas অবজেক্টের প্রপার্টিগুলো নিচে দেওয়া হলো -

মেথড

Canvas অবজেক্টের মেথডগুলো নিচে দেওয়া হলো -

সিনট্যাক্স

নিচে দেওয়া হলো -

Canvas অবজেক্ট তৈরি করার সিনট্যাক্স -

var x = document.createElement("CANVAS");

উদাহরণ

HTML DOM canvas অবজেক্টের একটি উদাহরণ দেখি -

<!DOCTYPE html> <html> <head> <style> canvas { border: 1px double blue; margin:1em; } </style> </head> <body> <h1>CANVAS</h1> <button onclick="createCanvas()">CREATE</button> <p>উপরের বাটনে ক্লিক করুন একটি গ്രീন সার্কেলসহ CANVAS এলিমেন্ট তৈরি করতে</p> <script> function createCanvas() { var x = document.createElement("CANVAS"); var ctx = x.getContext("2d"); ctx.fillStyle = "#C7EA46"; ctx.beginPath(); ctx.arc(100, 75, 50, 0, 2 * Math.PI); ctx.fill(); ctx.stroke(); document.body.appendChild(x); } </script> </body> </html>

আউটপুট

এটি নিচের আউটপুট তৈরি করবে -

CREATE-এ ক্লিক করলে -

উপরের উদাহরণে -

আমরা প্রথমে CREATE বাটন তৈরি করেছি, যা ক্লিক করলে createCanvas() মেথড এক্সিকিউট করবে।

<button onclick="createCanvas()">CREATE</button>

createCanvas() মেথড একটি <canvas> এলিমেন্ট তৈরি করে। তারপর নতুন তৈরি <canvas> এলিমেন্টের কনটেক্সট getContext() মেথড ব্যবহার করে পাওয়া যায়। প্রতিটি ক্যানভাস মেথডের সাথে শুধু একটি কনটেক্সট জড়িত থাকতে পারে। getContext() মেথডের ভিতরে প্যারামিটার ভ্যালু "2d" নির্দেশ করে যে এটি শুধু আকৃতি, আকার আঁকতে ব্যবহৃত হবে অর্থাৎ 2d বিষয়গুলো মাত্র। তারপর আমরা fillStyle ব্যবহার করে ফিল রঙ সেট করি এবং beginPath() মেথড ব্যবহার করে পাথ শুরু করি।

এরপর, arc() মেথড ব্যবহার করে সার্কেলের কো-অর্ডিনেট সংজ্ঞায়িত করি এবং সেটি fillStyle রঙ দিয়ে পূরণ করি। অবশেষে stroke() মেথড ব্যবহার করে ক্যানভাসে আঁকা হয় এবং canvas-কে document.body-র appendChild() মেথড ব্যবহার করে বডি এলিমেন্টের চাইল্ড হিসেবে অ্যাপেন্ড করা হয় -

function createCanvas() { var x = document.createElement("CANVAS"); var ctx = x.getContext("2d"); ctx.fillStyle = "#C7EA46"; ctx.beginPath(); ctx.arc(100, 75, 50, 0, 2 * Math.PI); ctx.fill(); ctx.stroke(); document.body.appendChild(x); }