এইচটিএমএল(৫) ক্যানভাস
এইচটিএমএল <canvas> এলিমেন্ট ব্যবহার করে ওয়েব পেজে চিত্র অংকন করা যায়।
বাম দিকের চিত্রটি <canvas> দিয়ে তৈরি করা হয়েছে, এটির চারটি উপাদানঃ একটি লাল আয়তক্ষেত্র, একটি গ্রেডিয়েন্ট আয়তক্ষেত্র, একটি মাল্টিকালার আয়তক্ষেত্র এবং একটি মাল্টিকালার টেক্সট।
এইচটিএমএল ক্যানভাস কি?
জাভাস্ক্রিপ্ট-এর মাধ্যমে আমরা এইচটিএমএল <canvas> এলিমেন্ট ব্যবহার করে যেকোন ধরনের চিত্র অংকন করতে পারি।
<canvas> এলিমেন্ট শুধুমাত্র চিত্র রাখার একটি ধারক বা পাত্র। আপনি যদি একটি চিত্র অংকন করতে চান, তাহলে আপনার জাভাস্ক্রিপ্ট ব্যবহার করা আবশ্যক।
পথ, বক্স, বৃত্ত, টেক্সট অঙ্কন এবং ইমেজ যোগ করার জন্য ক্যানভাসের বিভিন্ন মেথড রয়েছে।
ব্রাউজার সাপোর্ট
যে সকল ব্রাউজার <canvas> এলিমেন্ট সমর্থন করে তা নিম্নে উল্লেখ করা হলঃ
| এলিমেন্ট | |||||
|---|---|---|---|---|---|
| <canvas> | ৪.০ | ৯.০ | ২.০ | ৩.১ | ৯.০ |
ক্যানভাস উদাহরণ
ক্যানভাস এইচটিএমএল পেজে একটি আয়তক্ষেত্রাকার এলাকা। ডিফল্টরূপে, একটি ক্যানভাসের কোন সীমানা এবং কন্টেন্ট নেই।
মার্কআপ(markup) এই রকম দেখায়ঃ
<canvas id="myCanvas" width="200" height="100"></canvas>
দ্রষ্টব্যঃ সর্বদা একটি নির্দিষ্ট id অ্যাট্রিবিউট উল্লেখ করতে হবে ( জাভাস্ক্রিপ্টের সাথে সম্পর্ক যুক্ত হত্তয়ার জন্য), এবং width আর height অ্যাট্রিবিউট উল্লেখ করতে হবে ক্যানভাসের আকার নির্ধারণ করার জন্য।
বর্ডার যোগ করার জন্য, style অ্যাট্রিবিউট ব্যবহার করতে হবেঃ
ক্যানভাসের একটি উদাহরণ
<canvas id="myCanvas" width="200" height="100"
style="border:1px solid
#000000;">
</canvas>
নিজে চেষ্টা করি »
জাভাস্ক্রিপ্ট দ্বারা চিত্র-অংকন
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0,0,150,75);
নিজে চেষ্টা করি »
একটি লাইন অঙ্কন করুন
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();
নিজে চেষ্টা করি »
একটা বৃত্ত অঙ্কন করুন
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();
নিজে চেষ্টা করি »
একটি টেক্সট অঙ্কন করুন
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Hello World",10,50);
নিজে চেষ্টা করি »
স্ট্রোক(Stroke) টেক্সট
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.strokeText("Hello World",10,50);
নিজে চেষ্টা করি »
লিনিয়ার গ্রেডিয়েন্ট অঙ্কন করুন
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
// গ্রেডিয়েন্ট তৈরি করুন
var grd = ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
// গ্রেডিয়েন্ট দ্বারা ভরাট করুন
ctx.fillStyle = grd;
ctx.fillRect(10,10,150,80);
নিজে চেষ্টা করি »
সার্কুলার গ্রেডিয়েন্ট অঙ্কন করুন
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
// গ্রেডিয়েন্ট তৈরি করুন
var grd = ctx.createRadialGradient(75,50,5,90,60,100);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
// গ্রেডিয়েন্ট দ্বারা ভরাট করুন
ctx.fillStyle = grd;
ctx.fillRect(10,10,150,80);
নিজে চেষ্টা করি »
একটি ছবি অঙ্কন করুন
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("scream");
ctx.drawImage(img,10,10);
নিজে চেষ্টা করি »
এইচটিএমএল ক্যানভাস টিউটোরিয়াল
এইচটিএমল <canvas> সম্পর্কে আরো জানার জন্য আমাদের পূর্ণ এইচটিএমএল ক্যানভাস টিউটোরিয়াল দেখুন।