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



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

<canvas> এলিমেন্টের কোনো নিজস্ব অঙ্কন ক্ষমতা নেই। এটি শুধুমাত্র অঙ্কনের জন্য একটি ধারক। <canvas> ব্যবহার করে ব্রাউজারে কিছু অংকন করতে হলে অবশ্যই স্ক্রিপ্ট ব্যবহার করতে হবে।

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


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

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

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

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


Color, Style এবং Shadow

প্রপার্টি বর্ণনা
fillStyle অঙ্কনকে পূরণ করতে কালার, গ্র্যাডিয়েন্ট বা প্যাটার্ন ব্যবহার করে।
strokeStyle রেখা বা লাইনকে পূরণ করতে কালার, গ্র্যাডিয়েন্ট বা প্যাটার্ন ব্যবহার করে।
shadowColor অঙ্কনের ছায়া/স্যাডোর কালার নির্ধারণ করে।
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() বর্তমান ট্রান্সফর্মকে নির্দিষ্ট ম্যাট্রিক্সে রিসেট করে, তারপর transform() রান করে।


Text বা লেখা

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

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


ছবি অংকন

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


Pixel Manipulation

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

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


Compositing

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


আরও কিছু মেথড

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







এই ওয়েব সাইট এর সমস্ত টিউটোরিয়াল, সার্কিট ডায়াগ্রাম, উদাহরণ ইত্যাদি খুব সহজ ও সাধারণ ভাবে তৈরি করা হয়েছে। টিউটোরিয়াল, সার্কিট ডায়াগ্রাম, উদাহরণ ইত্যাদির ভুল পরিহার করার জন্য বার বার যাচাই করা হয়েছে, কিন্তু আমরা এর পূর্ণ নিশ্চয়তা ও দায়ভার বহন করি না। যখন আপনি এই সাইটটি ব্যবহার করেন, আমরা ধরে নেই যে আপনি পড়েছেন এবং সম্মত আছেন আমাদের টার্মস অফ ইউস (Terms of use) এবং প্রাইভেসি পলিসি( Privacy policy) সম্পর্কে।

Report or suggest about this page

Copyright 2016-2018 by websschool.com, All Rights Reserved.