️ JavaScript Canvas API – বাংলা সম্পূর্ণ পরিচিতি
Canvas API হলো JavaScript এবং HTML5 এর একটি শক্তিশালী ফিচার যার মাধ্যমে আপনি পেজে গ্রাফিক্স, ড্রইং, চার্ট, গেইম, এমনকি ইমেজ প্রসেসিং পর্যন্ত করতে পারেন। এটি <canvas> এলিমেন্টের মাধ্যমে কাজ করে, যার মধ্যে আপনি JavaScript কোডের মাধ্যমে আঁকতে পারেন।
ক্যানভাস সেটআপ
প্রথমে একটি <canvas> এলিমেন্ট তৈরি করুন:
<canvas id="myCanvas" width="400" height="200" style="border:1px solid #000000;">
আপনার ব্রাউজার ক্যানভাস সমর্থন করে না।
</canvas>
ব্যাখ্যা: উপরের কোডে একটি ৪০০ x ২০০ pixel এর ক্যানভাস তৈরি করা হয়েছে। আপনি এটিতে বিভিন্ন রকম ড্রইং করতে পারবেন JavaScript দিয়ে।
কনটেক্সট তৈরি এবং আঁকা শুরু
JavaScript দিয়ে ক্যানভাসে আঁকতে হলে প্রথমে আপনাকে getContext('2d') মেথড দিয়ে 2D context নিতে হবে:
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
// একটি লাল আয়তক্ষেত্র আঁকা
ctx.fillStyle = "red";
ctx.fillRect(20, 20, 150, 100);
</script>
ব্যাখ্যা: fillRect(x, y, width, height) মেথড দিয়ে একটি লাল আয়তক্ষেত্র আঁকা হয়েছে। এখানে (20,20) হচ্ছে শুরু পয়েন্ট এবং প্রস্থ ও উচ্চতা হচ্ছে 150×100।
️ আউটলাইন ও রঙ পরিবর্তন
নিচে একটি আউটলাইনসহ আয়তক্ষেত্র আঁকা হয়েছে:
ctx.strokeStyle = "blue";
ctx.lineWidth = 5;
ctx.strokeRect(200, 20, 150, 100);
ব্যাখ্যা: এই কোডটি একটি নীল রঙের সীমারেখা (stroke) সহ আয়তক্ষেত্র আঁকে যার লাইন প্রস্থ ৫px।
বৃত্ত আঁকা
নিচে কিভাবে একটি বৃত্ত আঁকা হয় তা দেখানো হলো:
ctx.beginPath();
ctx.arc(100, 150, 40, 0, 2 * Math.PI); // x, y, radius, startAngle, endAngle
ctx.fillStyle = "green";
ctx.fill();
ctx.stroke();
ব্যাখ্যা: এখানে arc() মেথড ব্যবহার করে একটি সবুজ বৃত্ত আঁকা হয়েছে। এটি beginPath() দিয়ে শুরু হয়েছে, যাতে একাধিক ড্রইং আলাদা রাখা যায়।
️ টেক্সট আঁকা
Canvas API দিয়ে টেক্সটও ড্র করা যায়:
ctx.font = "20px Arial";
ctx.fillStyle = "black";
ctx.fillText("Canvas টিউটোরিয়াল", 50, 180);
ব্যাখ্যা: এই কোড ব্লকে ২০px Arial ফন্টে “Canvas টিউটোরিয়াল” লেখা হয়েছে ক্যানভাসের ৫০,১৮০ অবস্থানে।
Canvas API Method তালিকা
| Method | কাজ |
|---|---|
| fillRect(x, y, w, h) | ভরাট করা আয়তক্ষেত্র আঁকা |
| strokeRect() | আউটলাইন সহ আয়তক্ষেত্র |
| clearRect() | একটি অংশ পরিষ্কার করা |
| beginPath() | নতুন ড্রইং পাথ শুরু করা |
| arc() | বৃত্ত বা বৃত্তাংশ আঁকা |
| fillText() | টেক্সট লেখা |
উপসংহার
Canvas API ব্যবহার করে আপনি একটি HTML পেজেই চিত্র আঁকা, গেইম তৈরি, চার্ট প্রেজেন্টেশন এমনকি মডার্ন UI ইন্টার্যাকশন তৈরি করতে পারেন। এটি একটি পারফরমেন্স-ভিত্তিক টুল যা HTML এবং JavaScript-এর মিশেলে ওয়েবকে আরও চিত্রবহ করে তোলে।