জাভাস্ক্রিপ্ট জেকুয়েরি এঙ্গুলার জেএস এইচটিএমএল সিএসএস বুটস্ট্রাপ পিএইচপি সি প্রোগ্রামিং
ফোরাম
×

জাভাস্ক্রিপ্ট রেফারেন্স

রেফারেন্স

জাভাস্ক্রিপ্ট

অপারেটর-Operator স্টেটমেন্ট-Statement অ্যারে-Array বুলিয়ান-Boolean স্ট্রিং-String সংখ্যা-Number রেগুলার এক্সপ্রেশন-RegExp গণিত-Math তারিখ-Date গ্লোবাল-Global কনভার্শন-Conversion

এইচটিএমএল ডোম-DOM

ডোম ডকুমেন্ট-DOMDocument ডোম এলিমেন্ট-DOMElement ডোম এট্রিবিউট-DOMAttribute ডোম স্টাইল-DOMStyle ডোম ইভেন্ট-DOMEvent

ব্রাউজার বোম-BOM

উইনডো-Window হিস্টোরি-History লোকেশন-Location ন্যভিগেটর-Navigator স্ক্রিনScreen

এইচটিএমএল অবজেক্ট

<a> <abbr> <address> <area> <article> <aside> <audio> <b> <base> <bdo> <blockquote> <body> <br> <button> <canvas> <caption> <cite> <code> <col> <colgroup> <datalist> <dd> <del> <details> <dfn> <dialog> <div> <dl> <dt> <em> <embed> <fieldset> <figcaption> <figure> <footer> <form> <head> <header> <h1> - <h6> <hr> <html> <i> <iframe> <img> <ins> <input> button <input> checkbox <input> color <input> date <input> datetime <input> datetime-local <input> email <input> file <input> hidden <input> image <input> month <input> number <input> password <input> radio <input> range <input> reset <input> search <input> submit <input> text <input> time <input> url <input> week <kbd> <keygen> <label> <legend> <li> <link> <map> <mark> <menu> <menuitem> <meta> <meter> <nav> <object> <ol> <optgroup> <option> <output> <p> <param> <pre> <progress> <q> <s> <samp> <script> <section> <select> <small> <source> <span> <strong> <style> <sub> <summary> <sup> <table> <td> <th> <tr> <textarea> <time> <title> <track> <u> <ul> <var> <video>


 

এইচটিএমএল ডোম Canvas অবজেক্ট


ক্যানভাস অবজেক্ট

ক্যানভাস অবজেক্ট এইচটিএমএল(৫)এ নতুন

এইচটিএমএল(৫) <canvas> ট্যাগ গ্রাফিক্স আকাঁর জন্য ব্যবহার করা হয়।


ক্যানভাস অবজেক্ট তৈরি

আপনি document.createElement() মেথড ব্যবহার করে <canvas> এলিমেন্ট তৈরি করতে পারেনঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
<title>জাভাস্ক্রিপ্ট উদাহরণ</title>
<style>
canvas {
    border: 1px solid black;
}
</style>
</head>
<body>

<p><button onclick="myFunc()">ক্লিক করুন</button></p>

<script>
function myFunc() {
    var a = document.createElement("canvas");
    var ctx = a.getContext("2d");
    ctx.fillStyle = "#FF0000";
    ctx.fillRect(20, 20, 150, 100);
    document.body.appendChild(a);
}
</script>
</body>
</html>

ফলাফল



নোটঃ <canvas> এলিমেন্টের অঙ্কন করার নিজস্ব সামর্থ্য নেই। এটা শুধুমাত্র গ্রাফিক্সের একটি কন্টেইনার। গ্রাফিক্স আঁকার জন্য আপনাকে অবশ্যই স্ক্রিপ্ট ব্যবহার করতে হবে।

getContext() মেথড একটি অবজেক্ট রিটার্ন করে যা ক্যানভাসে আঁকার জন্য মেথড এবং প্রোপার্টি সরবরাহ করে।

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


ক্যানভাস অবজেক্ট এক্সেস

আপনি getElementById() ব্যবহার করে <canvas> এলিমেন্টকে এক্সেস করতে পারেনঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
<title>জাভাস্ক্রিপ্ট উদাহরণ</title>
</head>
<body>
<canvas id="test" width="300" height="150" style="border:1px solid #d3d3d3;">
আপনার ব্রাউজার এইচটিএমএল(৫) ক্যানভাস ট্যাগ সাপোর্ট করে না।</canvas>
<p><button onclick="myFunc()">ক্লিক করুন</button></p>

<script>
function myFunc() {
    var a = document.getElementById("test");
    var ctx = a.getContext("2d");
    ctx.fillStyle = "#FF0000";
    ctx.fillRect(20, 20, 150, 100);
}
</script>
</body>
</html>

ফলাফল




কালার,স্টাইল এবং শ্যাডো(Shadows)

প্রোপার্টি বর্ণনা
fillStyle কালার, গ্রেডিয়েন্ট, প্যাটার্ন সেট বা রিটার্ন করে যা ড্রয়িং পূর্ন করতে ব্যবহৃত হয়।
strokeStyle কালার, গ্রেডিয়েন্ট, প্যাটার্ন সেট বা রিটার্ন করে যা strokes এর জন্য ব্যবহৃত হয়।
shadowColor shadows এ ব্যবহারের জন্য কালার সেট বা রিটার্ন করে।
shadowBlur shadows এ ব্যবহারের জন্য blur লেভেল সেট বা রিটার্ন করে।
shadowOffsetX shape হতে shadow এর অনুভূমিক দূরত্ব সেট বা রিটার্ন করে।
shadowOffsetY shape হতে shadow এর উলম্ব দূরত্ব সেট বা রিটার্ন করে।

মেথড বর্ণনা
createLinearGradient() একটি লিনেয়ার গ্রাডিয়েন্ট তৈরি করে (ক্যানভাস কন্টেন্টে ব্যবহারের জন্য)
createPattern() একটি নির্দিষ্ট এলিমেন্টকে একটি নির্দিষ্ট দিকে রিপিট করে।
createRadialGradient() একটি radial/circular গ্রাডিয়েন্ট তৈরি করে (ক্যানভাস কন্টেন্ট-এর উপর ব্যবহারের জন্য)।
addColorStop() গ্রাডিয়েন্ট অবজেক্ট-এ কালার এবং stop পজিশন নির্দিষ্ট করে।

লাইন স্টাইল

প্রোপার্টি বর্ণনা
lineCap একটি লাইনের শেষের অংশের স্টাইল সেট বা রিটার্ন করে।
lineJoin যখন দুটি লাইন মিলিত হয়, তখন তাদের কর্নার কেমন হবে তা সেট বা রিটার্ন করে।
lineWidth বর্তমান লাইনের প্রস্থ সেট বা রিটার্ন করে।
miterLimit সর্বোচ্চ মিটার দৈর্ঘ্য সেট বা রিটার্ন করে।

Rectangles

মেথড বর্ণনা
rect() একটি আয়তকার তৈরি করে।
fillRect() একটি ভরাট আয়তকার আঁকে।
strokeRect() একটি ফাঁকা আয়তক্ষেত্র আঁকে।
clearRect() একটি আয়তক্ষেত্রের মধ্যে নির্দিষ্ট পিক্সেল মুছে ফেলে।

পথ (Path)

মেথড বর্ণনা
fill() বর্তমান আঁকা পথ ভরাট করে।
stroke() যে পথ নির্ধারন করা হয় সেই পথ আঁকে।
beginPath() পথ শুরু হয় বা বর্তমান পথ রিসেট করে।
moveTo() একটি লাইন তৈরি করা ছাড়াই ক্যানভাসের মধ্যে নির্দিষ্ট পয়েন্ট থেকে পথ Move করে।
closePath() বর্তমান পয়েন্ট হতে শুরুর পয়েন্টে মিলিত হয়ে একটি পথ তৈরি করে।
lineTo() একটি নতুন পয়েন্ট যুক্ত করে, সেখান থেকে ক্যানভাসের শেষ পয়েন্ট পর্যন্ত একটি লাইন তৈরি করে।
clip() মূল ক্যানভাস হতে যেকোনো সেপ বা সাইজের অংশ ক্লিপ করে।
quadraticCurveTo() একটি quadratic Bézier curve তৈরি করে।
bezierCurveTo() একটি cubic Bézier curve তৈরি করে।
arc() একটি arc/curve তৈরি করে। এটা বৃত্ত বা বৃত্তের একটি অংশ তৈরি করতে ব্যবহার করে।
arcTo() দুইটি স্পর্শকের মধ্যে একটি arc/curve তৈরি করে।
isPointInPath() যদি নির্দিষ্ট পয়েন্ট বর্তমান পথ হয় তাহলে true রিটার্ন করে, অন্যথায় false হবে।

Transformations

মেথড বর্ণনা
scale() বর্তমান ড্রয়িং বড় হবে, না ছোট হবে তা নির্ধারণ করে।
rotate() বর্তমান ড্রয়িং রোটেট করে।
translate() ক্যানভাসের উপর পজিশন (0,0) Remaps করে।
transform() ড্রয়িং-এর জন্য বর্তমান ট্রান্সফরমেশন ম্যাট্রিক্স রিপ্লেস করে।
setTransform() আইডেন্টিটি ম্যাটিক্স থেকে বর্তমান ট্রান্সফর্ম রিসেট করে। করে। তারপর transform() রান করে।

টেক্সট

প্রোপার্টি বর্ণনা
font টেক্সট কন্টেন্ট-এর জন্য বর্তমান ফন্ট প্রোপার্টি সেট বা রিটার্ন করে।
textAlign টেক্সট কন্টেন্ট-এর জন্য বর্তমান এলাইনমেন্ট সেট বা রিটার্ন করে।
textBaseline বর্তমান টেক্সট বেজলাইন সেট বা রিটার্ন করে যখন টেক্সট ড্রয়িং-এ ব্যবহার করা হয়।

মেথড বর্ণনা
fillText() ক্যানভাসের উপর "filled" টেক্সট আঁকে।
strokeText() ক্যানভাসের উপর টেক্সট আঁকে।এটা fill হবে না।
measureText() একটি অবজেক্ট রিটার্ন করে যা নির্দিষ্ট টেক্সটের width ধারন করে।

ইমেজ আঁকা

মেথড বর্ণনা
drawImage() ক্যানভাসের মধ্যে ইমেজ, ক্যানভাস বা ভিডিও আঁকে।

Pixel Manipulation

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

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

Compositing

প্রোপার্টি বর্ননা
globalAlpha ড্রয়িং-এর বর্তমান alpha বা transparency ভ্যালু সেট বা রিটার্ন করে।
globalCompositeOperation একটি বিদ্যমান ইমেজে কিভাবে একটি নতুন ইমেজ আঁকা যায় সেট বা রিটার্ন করে।

Other

মেথড বর্ণনা
save() বর্তমান context এর অবস্থা সেভ করে।
restore() পূর্বে সংরক্ষিত পথ state এবং এট্রিবিউট রিটার্ণ করে।
createEvent()  
getContext()  
toDataURL()  

স্ট্যান্ডার্ড প্রোপার্টি এবং ইভেন্ট

প্রোপার্টি ইভেন্ট
সাপোর্ট করে। এখানে দেখুন সাপোর্ট করে। এখানে দেখুন