এইচটিএমএল ডোম 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() |
|
স্ট্যান্ডার্ড প্রোপার্টি এবং ইভেন্ট
