HTML DOM ক্যানভাস অবজেক্টটি HTML5 এ প্রবর্তিত
সম্পত্তি
ক্যানভাস অবজেক্ট -
-এর জন্য নিম্নলিখিত বৈশিষ্ট্যগুলি রয়েছে৷| সম্পত্তি | বিবরণ |
|---|---|
| ফিল স্টাইল | রং, গ্রেডিয়েন্ট বা প্যাটার্ন সেট করতে বা ফেরত দিতে যা অঙ্কন পূরণ করতে ব্যবহৃত হয়। |
| স্ট্রোক স্টাইল | স্ট্রোকের জন্য ব্যবহৃত রঙ, গ্রেডিয়েন্ট বা প্যাটার্ন সেট করতে বা ফেরত দিতে। |
| ছায়ার রঙ | ছায়ার জন্য ব্যবহার করা রঙ সেট করতে বা ফেরত দিতে। |
| ছায়া ব্লার | ছায়ার ব্লার লেভেল সেট করতে বা ফেরত দিতে। |
| shadowOffsetX | আকৃতি থেকে ছায়ার অনুভূমিক দূরত্ব সেট করতে বা ফেরত দিতে। |
| শ্যাডোঅফসেটওয়াই | আকৃতি থেকে ছায়ার উল্লম্ব দূরত্ব সেট করতে বা ফেরত দিতে। |
পদ্ধতি
ক্যানভাস অবজেক্ট -
এর পদ্ধতিগুলো নিচে দেওয়া হল| পদ্ধতি | বিবরণ |
|---|---|
| createLinearGradient() | একটি লিনিয়ার গ্রেডিয়েন্ট তৈরি করতে। |
| createPattern() | একটি নির্দেশিত উপাদান পুনরাবৃত্তি করে একটি প্যাটার্ন তৈরি করতে৷ |
| ছায়ার রঙ | শ্যাডোর জন্য ব্যবহার করা রঙ সেট করতে বা ফেরত দিতে। |
| createRadialGradient() | একটি বৃত্তাকার গ্রেডিয়েন্ট তৈরি করতে। |
| addColorStop() | আকৃতি থেকে ছায়ার অনুভূমিক দূরত্ব সেট করতে বা ফেরাতে৷ |
সিনট্যাক্স
−
-এর সিনট্যাক্স নিচে দেওয়া হলএকটি ক্যানভাস অবজেক্ট তৈরি করা -
var x=document.createElement("CANVAS"); উদাহরণ
আসুন HTML DOM ক্যানভাস অবজেক্ট -
-এর একটি উদাহরণ দেখি<!DOCTYPE html>
<html>
<head>
<style>
canvas {
border: 1px double blue;
margin:1em;
}
</style>
</head>
<body>
<h1>CANVAS</h1>
<button onclick="createCanvas()">CREATE</button>
<p>Click the above button to create a CANVAS element with a green circle in it</p>
<script>
function createCanvas() {
var x = document.createElement("CANVAS");
var ctx = x.getContext("2d");
ctx.fillStyle = "#C7EA46";
ctx.beginPath();
ctx.arc(100, 75, 50, 0, 2 * Math.PI);
ctx.fill();
ctx.stroke();
document.body.appendChild(x);
}
</script>
</body>
</html> আউটপুট
এটি নিম্নলিখিত আউটপুট −
তৈরি করবে
CREATE -
-এ ক্লিক করলে
উপরের উদাহরণে -
আমরা প্রথমে একটি CREATE বাটন তৈরি করেছি, যেটিতে ক্লিক করলে createCanvas() পদ্ধতি কার্যকর হবে।
<button onclick="createCanvas()">CREATE</button>
createCanvas() পদ্ধতি একটি
এর পরে, বৃত্তের কো-অর্ডিনেটগুলিকে সংজ্ঞায়িত করতে arc() পদ্ধতি ব্যবহার করুন এবং ফিলস্টাইল রঙ দিয়ে সেই বৃত্তটি পূরণ করুন। অবশেষে আমরা ক্যানভাসে আঁকতে স্ট্রোক() পদ্ধতি ব্যবহার করি এবং ডকুমেন্টের appendChild() পদ্ধতি ব্যবহার করে বডি এলিমেন্টের চাইল্ড হিসেবে ক্যানভাস যুক্ত করি।
function createCanvas() {
var x = document.createElement("CANVAS");
var ctx = x.getContext("2d");
ctx.fillStyle = "#C7EA46";
ctx.beginPath();
ctx.arc(100, 75, 50, 0, 2 * Math.PI);
ctx.fill();
ctx.stroke();
document.body.appendChild(x);
} 