Share
Facebook
Twitter
LinkedIn
Whatsapp
Instagram
Messenger

এইচটিএমএল ক্যানভাস রেফারেন্স - HTML Canvas Ref.


কোন ওয়েব পেজে এইচটিএমএল ৫.০ এর <canvas> এলিমেন্ট ব্যবহার করে জাভাস্ক্রিপ্টের মাদ্ধমে গ্রাফিক্স অংকন করা জায়। । <canvas> এলিমেন্ট হল গ্রাফিক্সের জন্য সুধুমাত্র একটি ধারক বা container. কোন গ্রাফিক্স অংকন করতে হলে অবসসয় আপনাকে জাভাস্ক্রিপ্ট ব্যবহার করতে হবে। বক্স, বৃত্ত, টেক্সট বা কন ছবি যুক্ত করার জন্য ক্যানভাসের বিভিন্ন মেথড রয়েছে।

ক্যানভাসের উপর অঙ্কনের মেথড এবং প্রোপার্টি সবরাহ করার জন্য getContext() মেথড একটি অবজেক্টকে রিটার্ন করে। এইচটিএমএল ক্যানভাস রেফারেন্স টিউটোরিয়ালের এই অংশে getContext("2d") অবজেক্ট এর প্রোপার্টি এবং মেথড সম্পর্কে জানবো। যেগুলো ক্যানভাসে লেখা, রেখা, বক্স, বৃত্ত এবং এছাড়াও অনেক কিছু আকঁতে ব্যবহার করা হয়।


ব্রাউজার সাপোর্ট

টেবিলে প্রদর্শিত সংখ্যাগুলো ব্রাউজারের সেই প্রথম ভার্সন নির্দেশ করে যেগুলো সম্পূর্ণ ভাবে <canvas> এলিমেন্ট সমর্থন বা support করে।

এলিমেন্ট
<canvas> 4.09.02.03.19.0

ইন্টারনেট এক্সপ্লোরার 8 এবং এর আগের ভার্সনগুলো <canvas> ট্যাগ সমর্থন বা support করে না।


Color, Style এবং Shadow

প্রপার্টি বর্ণনা
fillStyle এটি কোন অংকনকে পূরণ করতে কালার, গ্র্যাডিয়েন্ট বা প্যাটার্ন ব্যবহার করে।
strokeStyle এটি কোন রেখা বা line কে পূরণ করতে কালার, গ্র্যাডিয়েন্ট বা প্যাটার্ন ব্যবহার করে।
shadowColor এটি কোন অংকনের ছায়া বা shadow এর রঙ নির্দেশ করে।
shadowBlur এটি কোন অংকনের ছায়াকে অস্পষ্ট বা blur করে।
shadowOffsetX< /td> এটি কোন অংকন থেকে ছায়ার অনুভূমিক বা horizontal দূ্রত্ব নির্দেশ করে।
shadowOffsetY এটি কোন অংকন থেকে ছায়ার উলম্বিক বা vertical দূ্রত্ব নির্দেশ করে।

মেথড বর্ণনা
createLinearGradient() এটি একটি লিনিয়ার গ্র্যাডিয়ান্ট তৈরী করে।
createPattern() এটি অংকনের একটি এলিমেন্টকে নির্দিষ্ট দিকে পুনরায় অংকনের মাধ্যমে একটি প্যাটার্ন তৈরী করে।
createRadialGradient() এটি একটি রেডিয়াল বা circular গ্র্যাডিয়ান্ট তৈরী করতে পারে।
addColorStop() এটি গ্রাডিয়েন্ট অবজেক্টে রঙ এবং রঙের অবস্থান নির্দেশ করে।


লাইন স্টাইল

প্রপার্টি বর্ণনা
lineCap এটি লাইনের প্রান্ত গুলোর স্টাইল নির্দেশ করে।
lineJoin এটি একাধিক লাইনের মিলিত প্রান্তের স্টাইল নির্দেশ করে।
lineWidth এটি অংকন করা লাইনের প্রস্থ নির্দেশ করে।
miterLimit এটি একাধিক লাইনের মিলিত প্রান্তের পূরুত্ব নির্দেশ করে।


Rectangle বা আয়তক্ষেত্র

মেথড বর্ণনা
rect() এটি একটি আয়তক্ষেত্র তৈরি করতে পারে।
fillRect() এটি একটি রঙে পরিপূর্ণ আয়তক্ষেত্র তৈরি করে।
strokeRect() এটি একটি রং হীন আয়তক্ষেত্র অংকন করে।
clearRect() এটি তৈরী করা কোন আয়তক্ষেত্রের নির্দিষ্ট কোন অংশ মুছে ফেলতে পারে।


Path

মেথড বর্ণনা
fill() এটি চলমান অংকনে রঙ, গ্র্যাডিয়েন্ট বা প্যাটার্ন দ্বারা পূর্ণ করে।
stroke() এটি নির্ধারণ করা পথকে অংকন করে।
beginPath() এটি একটি নতুন লাইন অংকন শুরু করে।
moveTo() এটি কোন নতুন লাইন তৈরী করা ছাড়াই ক্যানভাসের একটি লাইনকে নির্দিষ্ট কোন পয়েন্টে নেয়।
closePath() এটি একটি লাইনের শুরু এবং শেষ প্রান্তকে একটি নতুন লাইনের মাধ্যমে যুক্ত করতে পারে।
lineTo() এটি সর্বশেষ নির্ধারণকৃত কোন পয়েন্ট থেকে নতুন একটি পয়েন্ট পর্যন্ত লাইন তৈরী করে।
clip() অংকনের জন্য মুল ক্যানভাসের যেকোন আকার এবং আকৃতির স্থানকে নির্ধারণ করে।
quadraticCurveTo() এটি কোন দ্বিঘাত বাকারেখা তৈরী করে।
bezierCurveTo() এটি একটি ঘনক আকৃতির বাকারেখা তৈরী করে।
arc() এটি একটি বৃত্ত বা বৃত্তচাপ বা arc/curve তৈরী করে।
arcTo() এটি দুটি স্পর্শকের মাঝে একটি বৃত্ত বা বৃত্তচাপ তৈরী করতে পারে।
isPointInPath() এটি যদি নির্দিষ্ট পয়েন্টটি বর্তমান লাইনের হয় তাহলে সঠিক অথবা ভুল বলে ছিনহিত করতে পারে।


Transformation বা রূপান্তর

মেথড বর্ণনা
scale() এটি অংকন করা কোন চিত্রকে বড়-ছোট করে।
rotate() এটি অংকন করা চিত্রকে বৃত্তাকারে ঘোরায়।
translate() এটি কোন ক্যানভাসে অংকন করা শুরুর (০,০) অবস্থান পুনরায় নির্দেশ করে।
transform() এটি অংকনের জন্য বর্তমান ট্রান্সফরমেশনকে ম্যাট্রিক্স ব্যাবহার করে প্রতিস্থাপন করে।
setTransform() এটি বর্তমান ট্রান্সফর্মকে নির্দিষ্ট ম্যাট্রিক্সে reset করে, তারপর transform() মেথড execute করে।


Text বা লেখা

প্রপার্টি বর্ণনা
font এটি কোন লেখা বা text কন্টেন্টের জন্য ফন্ট বা Font প্রোপার্টি নির্দেশ করে।
textAlign এটি কোন লেখা বা text কন্টেন্টের অবস্থান নির্দেশ করে।
textBaseline এটি লাইনের উপর নির্ভর করে লেখা বা text এর অবস্থান নির্দেশ করে।

মেথড বর্ণনা
fillText() এটি ক্যানভাসে কোন লেখাকে রঙ, গ্র্যাডিয়েন্ট বা প্যাটার্ন দিয়ে পরিপূর্ণ করে।
strokeText() এটি ক্যানভাসের উপর কোন লেখাকে অংকন করে।
measureText() এটি কোন নির্দিষ্ট প্রস্থ বা width এর একটি object তৈরি করে।


ছবি অংকন

মেথড বর্ণনা
drawImage() এটি ক্যানভাসে কোন ছবি, ভিডিও অথবা ক্যানভাস অংকন করতে পারে।


Pixel Manipulation

প্রপার্টি বর্ণনা
width এটি ImageData অবজেক্ট ব্যাবহার করে একটি ছবির প্রস্থ্যকে পিক্সেলে return করে।
height এটি ImageData অবজেক্ট ব্যাবহার করে একটি ছবির দৈর্ঘ্যকে পিক্সেলে return করে।
data এটি নির্দিষ্ট ImageData অবজেক্টের মধ্যে ছবির তথ্য ধারন করতে পারে।

মেথড বর্ণনা
createImageData() এটি নতুন একটি খালি ImageData অবজেক্ট তৈরী করতে পারে।
getImageData() এটি ক্যানভাসের নির্দিষ্ট আয়তক্ষেত্রের পিক্সেলকে ImageData অবজেক্ট ব্যাবহার করে copy করে।
putImageData() এটি কোন ছবির তথ্য সমূহ নির্দিষ্ট ImageData অবজেক্ট থেকে ক্যানভাসে নিয়ে আসে।


Compositing

প্রপার্টি বর্ণনা
globalAlpha এটি অংকন করা আকৃতির transparency বা স্বচ্ছতার মান নির্দেশ করে।
globalCompositeOperation এটি ক্যানভাসে বিদ্যমান ছবির উপর নতুন একটি ছবি অংকনের অবস্থান নির্দেশ করে।


আরও কিছু মেথড

মেথড বর্ণনা
save() এটি বর্তমান কোন লেখা বা text এর অবস্থান সংরক্ষন করে।
restore() এটি আগে সংরক্ষিত কোন অবস্থান এবং এট্রিবিউট গুলকে ফেরত দেয়।
createEvent() এটি কোন ইভেন্ট তৈরী করার জন্য ব্যবহার করা হয়।
getContext() এটি কন্টেক্সট পাওয়ার জন্য বাবহ্রিত হয়।
toDataURL() এটি কোন তথ্যের URL পেতে বাবহ্রিত হয়।

এইচটিএমএল এর canvas সম্পর্কে জানতে W3C এর HTML Canvas 2D Context ওয়েব পেজটি ব্রাউজ করুন।