এইচটিএমএল(৫)-এ < canvas > ট্যাগটি ব্যবহার করে জাভাস্ক্রিপ্টের মাধ্যমে ব্রাউজারে অঙ্কন করা সম্ভব। < canvas > এলিমেন্টের কোনো নিজস্ব অঙ্কন ক্ষমতা নেই। এটি শুধুমাত্র অঙ্কনের জন্য একটি ধারক। < canvas > ব্যবহার করে ব্রাউজারে আঁকতে হলে আপনাকে অবশ্যই স্ক্রিপ্ট ব্যবহার করতে হবে।
ক্যানভাসের উপর অঙ্কনের মেথড এবং প্রোপার্টি সবরাহ করার জন্য getContext() মেথড একটি অবজেক্টকে রিটার্ন করে। রেফারেন্সের এই টিউটোরিয়ালে getContext("2d") অবজেক্ট এর প্রোপার্টি এবং মেথড সম্পর্কে জানবো। যা ক্যানভাসে টেক্সট, লাইন, বক্স, বৃত্ত এবং আরো অনেক কিছু আকঁতে ব্যবহার করা যায়।
ব্রাউজার সাপোর্ট
| প্রোপার্টি | Google Chrome | Edge / IE | Mozila Firefox | Safari | Opera |
|---|---|---|---|---|---|
| align-content: | ৪.০ | ৯.০ | ২.০ | ৩.১ | ৯.০ |
কালার, স্টাইল এবং স্যাডো(shadow)
| প্রোপার্টি | বর্ণনা |
|---|---|
| fillStyle | অঙ্কনকে পূরণ করতে কালার, গ্র্যাডিয়েন্ট বা প্যাটার্ন ব্যবহার করে। |
| strokeStyle | রেখা বা লাইনকে পূরণ করতে কালার, গ্র্যাডিয়েন্ট বা প্যাটার্ন ব্যবহার করে। |
| shadowColor | অঙ্কনের ছায়া/স্যাডোর কালার নির্ধারণ করে। |
| shadowBlur | অঙ্কনের স্যাডোকে অস্পষ্ট করে। |
| shadowOffsetX | অঙ্কন থেকে স্যাডোর অনুভূমিক(horizontal) দূ্রত্ব নির্ধারণ করে। |
| shadowOffsetY | অঙ্কন থেকে স্যাডোর উলম্বিক(vertical) দূ্রত্ব নির্ধারণ করে। |
| মেথড | বর্ণনা |
|---|---|
| createLinearGradient() | অঙ্কনে একটি লিনিয়ার গ্র্যাডিয়ান্ট তৈরী করে। |
| createRadialGradient() | অঙ্কনে একট রেডিয়াল গ্র্যাডিয়ান্ট তৈরী করে। |
| createPattern() | অঙ্কনে একটি এলিমেন্টকে নির্দিষ্ট দিকে রিপিট করার মাধ্যমে একটি প্যাটার্ন তৈরী করে। |
| addColorStop() | গ্রাডিয়েন্ট অবজেক্টে কালার এবং কালারের অবস্থান নির্ধারণ করে। |
লাইন স্টাইল
| প্রোপার্টি | বর্ণনা |
|---|---|
| lineCap | লাইনের প্রান্ত গুলোর স্টাইল নির্ধারণ করে। |
| lineJoin | একাধিক লাইনের মিলিত প্রান্তের স্টাইল নির্ধারণ করে। |
| lineWidth | অঙ্কিত লাইনের প্রস্থ নির্ধারণ করে। |
| miterLimit | একাধিক লাইনের মিলিত প্রান্তের পূরুত্ব নির্ধারণ করে। |
আয়তক্ষেত্র
| মেথড | বর্ণনা |
|---|---|
| rect() | একটি আয়তক্ষেত্র অঙ্কন করে। |
| fillRect() | একটি কালারযুক্ত আয়তক্ষেত্র অঙ্কন করে। |
| strokeRect() | একটি কালারবিহীন আয়তক্ষেত্র অঙ্কন করে। |
| clearRect() | তৈরীকৃত আয়তক্ষেত্রের নির্দিষ্ট অংশ মুছে ফেলে। |
পাথ
| মেথড | বর্ণনা |
|---|---|
| fill() | চলমান অঙ্কনে কালার, গ্র্যাডিয়েন্ট বা প্যাটার্ন দ্বারা পূর্ণ করে। |
| stroke() | নির্ধারণকৃত পথকে অঙ্কন করে। |
| beginPath() | একটি নতুন লাইন অঙ্কন শুরু করে। |
| moveTo() | নতুন লাইন তৈরী করা ছাড়াই ক্যানভাসের একটি লাইনকে নির্দিষ্ট পয়েন্টে নেয়। |
| closePath() | একটি লাইনের শুরু এবং শেষ প্রান্তকে একটি নতুন লাইনের মাধ্যমে যুক্ত করে। |
| lineTo() | সর্বশেষ নির্ধারণকৃত পয়েন্ট থেকে নতুন একটি পয়েন্ট পর্যন্ত লাইন তৈরী করে। |
| clip() | অঙ্কনের জন্য অরিজিনাল ক্যানভাসের যেকোন আকার এবং সাইজের এলাকাকে নির্দিষ্ট করে। |
| quadraticCurveTo() | একটি দ্বিঘাত বক্ররেখা তৈরী করে। |
| bezierCurveTo() | একটি ঘনক আকৃতির বক্ররেখা তৈরী করে। |
| arc() | একটি বৃত্ত বা বৃত্তচাপ তৈরী করে। |
| arcTo() | দুটি স্পর্শকের মাঝে একটি বৃত্ত বা বৃত্তচাপ তৈরী করে। |
| isPointInPath() | যদি নির্দিষ্ট পয়েন্টটি বর্তমান লাইনের হয় তাহলে সঠিক অন্যথায় ভুল। |
রূপান্তর
| মেথড | বর্ণনা |
|---|---|
| scale() | অঙ্কিত চিত্রকে বড়-ছোট করে। |
| rotate() | অঙ্কিত চিত্রকে ঘুরায়। |
| translate() | ক্যানভাসে অঙ্কন শুরুর(০,০) অবস্থান পুনরায় নির্ধারণ করে। |
| transform() | অঙ্কনের জন্য বর্তমান ট্রান্সফরমেশনকে ম্যাট্রিক্স দ্বারা প্রতিস্থাপন করে। |
| setTransform() | বর্তমান ট্রান্সফর্মকে নির্দিষ্ট ম্যাট্রিক্সে রিসেট করে, তারপর transform() রান করে। |
টেক্সট
| প্রোপার্টি | বর্ণনা |
|---|---|
| font | টেক্সট কন্টেন্টের জন্য ফন্ট(Font)-প্রোপার্টি নির্ধারণ করে। |
| textAlign | টেক্সট কন্টেন্টের অবস্থান নির্ধারণ করে। |
| textBaseline | লাইনের উপর নির্ভর করে টেক্সটের অবস্থান নির্ধারণ করে। |
| মেথড | বর্ণনা |
|---|---|
| fillText() | ক্যানভাসে টেক্সটকে কালার, গ্র্যাডিয়েন্ট বা প্যাটার্ন দ্বারা পূর্ণ করে। |
| strokeText() | ক্যানভাসের উপর টেক্সট অঙ্কন করে। |
| measureText() | নির্দিষ্ট টেক্সটের প্রস্থ্য পিক্সেল আকারে নির্ধারণ করে। |
ইমেজ ড্রয়িং
| মেথড | বর্ণনা |
|---|---|
| drawImage() | ক্যানভাসে একটি ছবি, ভিডিও অথবা ক্যানভাস অঙ্কন করে। |
পিক্সেল ম্যানিপুলেশন
| প্রোপার্টি | বর্ণনা |
|---|---|
| width | ImageData অবজেক্টের মাধ্যমে একটি ছবির প্রস্থ্যকে পিক্সেলে রিটার্ণ করে। |
| height | ImageData অবজেক্টের মাধ্যমে একটি ছবির দৈর্ঘ্যকে পিক্সেলে রিটার্ণ করে। |
| data | নির্দিষ্ট ImageData অবজেক্টের মধ্যে ছবির তথ্য ধারন করে। |
| মেথড | বর্ণনা |
|---|---|
| createImageData() | নতুন একটি খালি ImageData অবজেক্ট তৈরী করে। |
| getImageData() | ক্যানভাসের নির্দিষ্ট আয়তক্ষেত্রের পিক্সেলকে ImageData অবজেক্টের মাধ্যমে কপি করে। |
| putImageData() | ইমেজের তথ্য সমূহ নির্দিষ্ট ImageData অবজেক্ট থেকে ক্যানভাসে নিয়ে আসে। |
কম্পোজিং
| প্রোপার্টি | বর্ণনা |
|---|---|
| globalAlpha | অঙ্কনের ট্রান্সপারেন্সি/স্বচ্ছতার মান নির্ধারণ বা রিটার্ণ করে। |
| globalCompositeOperation | ক্যানভাসে বিদ্যমান ইমেজের উপর নতুন একটি ইমেজের অঙ্কনের অবস্থান নির্ধারণ করে। |
অন্যান্য
| মেথড | বর্ণনা |
|---|---|
| save() | বর্তমান কনটেক্সটের অবস্থান সংরক্ষন করে। |
| restore() | পূর্বে সংরক্ষিত অবস্থান এবং এট্রিবিউট সমুহকে ফেরত দেয়। |
| createEvent() | একটি ইভেন্ট তৈরী করার জন্য ব্যবহার করে। |
| getContext() | কন্টেক্সট পাওয়া জন্য ব্যবহার করে। |
| toDataURL() | তথ্যের URL পাওয়ার জন্য ব্যবহার করে। |
Content added By
Read more
