X

X

X

HTML5 ক্যানভাস ও প্রোগ্রামিং এর মাধ্যমে ড্রয়িং



HTML <canvas> ইলামেন্ট দিয়ে ওয়েব পেজ এ গ্রাফিক্স অবজেক্ট তৈরি করা হয়।

উপরে যে গ্রাফিক্স অবজেক্টটি রয়েছে সেটি ক্যানভাস দিয়ে তৈরি করা। এটিতে চারটি ইলামেন্ট তৈরি করা হয়েছে। লাল আয়তক্ষেত্র, গ্রেডিয়েন্ট আয়তক্ষেত্র, বহুরং বিশিষ্ট আয়তক্ষেত্র এবং একটি বহুরং বিশিষ্ট টেক্সট।


HTML Canvas বলতে কি বোঝায়?

HTML <canvas> ইলামেন্ট দিয়ে জাভাস্ক্রিপ্ট ব্যবহার করে গ্রাফিক্স অবজেক্ট তৈরি করা হয়। এটি শুধুমাত্র গ্রাফিক্স অবজেক্টের কন্টেইনার হিসেবে কাজ করে। তবে ড্রয়িং করার জন্য অবশ্যই জাভাস্ক্রিপ্ট ব্যবহার করতে হবে।

ক্যানভাস দিয়ে বিভিন্ন উপায়ে রেখা, বক্স, বৃত্ত, টেক্সট, ছবি ইত্যাদি তৈরি করা যায়। এমনকি এটি দিয়ে অনলাইন ছবি এডিটর সফওয়্যারও তৈরি করা যায়। যেমন, https://pixlr.com/ এটি ক্যানভাস দিয়ে তৈরি।


Browser সাপোর্ট

নিচে ক্যানভাস সাপোর্ট করে এমন ব্রাউজারের সর্বনিম্ন ভার্শনগুলো উল্লেখ্য করা হলো। অর্থাৎ, এসব ব্রাউজারে এই ভার্শনগুলো থেকে পরবর্তী ভার্শনে ক্যানভাস সাপোর্ট করে।

Element
<canvas> 4.0 9.0 2.0 3.1 9.0

Canvas – এর উদাহরণ

ক্যানভাস মূলত একটি আয়তক্ষেত্র, যেখানে বিভিন্ন গ্রাফিক্স অবজেক্ট জাভাস্ক্রিপ্টের মাধ্যমে তৈরি করা হয়। স্বাভাবিক অবস্থায় এর কোনো বর্ডার এবং কন্টেন্ট থাকে না।
নিচে উল্লেখিত উপায়ে ক্যানভাস কোনো ওয়েব পেজে তৈরি করা হয়:

<canvas id=”myCanvas” width=”200″ height=”100″></canvas>

লক্ষ্যনীয়: সবসময় ক্যানভাস ইলামেন্টের id, width এবং height attribute এর মান সেট করতে হবে। যদি ক্যানভাসের চারপশে বর্ডার ব্যবহার করার প্রয়োজন হয়, তবে সিএসএস ব্যবহার করে এটি করতে পারবেন। 
নিচে কন্টেন্ট ছাড়া একটি বেসিক ক্যানভাস ইলামেন্টের উদাহরণ দেওয়া হলো:

Code Example

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
Your browser does not support the HTML5 canvas tag.
</canvas>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


রেখা অংকন

Code Example

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();
</script>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


বৃত্ত অংকন

Code Example

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();
</script> 

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


টেক্সট অংকন

Code Example

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Hello World",10,50);
</script>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


স্ট্রোক অংকন

Code Example

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.strokeText("Hello World",10,50);
</script>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


রৈখিক গ্রেডিয়েন্ট অংকন

Code Example

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
// Create gradient
var grd = ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
// Fill with gradient
ctx.fillStyle = grd;
ctx.fillRect(10,10,150,80);
</script>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


বৃত্তাকার গ্রেডিয়েন্ট অংকন

Code Example

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

// Create gradient
var grd = ctx.createRadialGradient(75,50,5,90,60,100);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");

// Fill with gradient
ctx.fillStyle = grd;
ctx.fillRect(10,10,150,80);
</script>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


Code Example

<script>
function myCanvas() {
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    var img = document.getElementById("scream");
    ctx.drawImage(img,10,10);
}
</script>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


HTML Canvas টিউটোরিয়াল

HTML <canvas> সম্পর্কে বিস্তারিত জানার জন্য Visit w3school’s full HTML Canvas Tutorial লিংকটি অনুসরণ করুন।