ক্যানভাস এপিআই

<canvas> ইলেমেন্ট এইমডিউল এলইডি এর একটি বিটম্যাপ এলাকা নির্দিষ্ট করে।

ক্যানভাস এপিআই জাভাস্ক্রিপ্ট ক্যানভাসে গ্রাফিক্স রেকর্ড করতে পারে。

ক্যানভাস এপিআই গঠন, লাইন, কার্ভ, বাক্স, টেক্সট এবং ছবি, এবং রঙ, পুরুষীকরণ, স্বচ্ছতা এবং অন্যান্য পিক্সেল অপারেশন করতে পারে।

ক্যানভাস যোগ করা হলে এইমডিউল

আপনি কোনও জায়গায় <canvas> ট্যাগ দ্বারা ক্যানভাস ইলেমেন্ট যোগ করতে পারেন:

উদাহরণ

<canvas id="myCanvas" width="300" height="150"></canvas>

আপনার হাতে চেষ্টা করুন

কিভাবে ক্যানভাস ইলেমেন্ট পাঠাতে হয়

আপনি এইমডিউল এলইডি মেথড গেটইডিবাইআইডি() দ্বারা <canvas> ইলেমেন্ট পাঠাতে পারেন:

const myCanvas = document.getElementById("myCanvas");

কাভাসে আঁকার জন্য, আপনি 2D কনটেক্সট অবজেক্ট তৈরি করতে হবে

const ctx = myCanvas.getContext("2d");

নোট

HTML <canvas> ইলেমেন্টটি স্বতঃস্ফূর্তভাবে ড্রাইং ফাংশন নেই

আপনি কোনও গ্রাফিক্স আঁকতে জাভাস্ক্রিপ্ট ব্যবহার করতে হবে

getContext() পদ্ধতিটি একটি ড্রাইং টুলস (পদ্ধতি) সহ একটি অবজেক্ট ফিরিয়ে দেয়

কাভাসে আঁকা

2D কনটেক্সট অবজেক্ট তৈরি করার পরে, আপনি কাভাসে আঁকতে পারবেন

নিচের fillRect() পদ্ধতিটি একটি কালো চতুর্ভুজ আঁকেছে, যার উপরিভুজ পয়েন্ট 20,20-এ অবস্থিত। এই চতুর্ভুজটির প্রস্থ 150 পিক্সেল, ওয়াইডথ 100 পিক্সেল

উদাহরণ

const myCanvas = document.getElementById("myCanvas");
const ctx = myCanvas.getContext("2d");
ctx.fillRect(20, 20, 150, 100);

আপনার হাতে চেষ্টা করুন

ব্যবহার করে

fillStyle এক্সপ্রোপার্টি ড্রাইং অবজেক্টের পূর্ণ রঙ সমায়াও ফিরিয়ে দিতে

উদাহরণ

const myCanvas = document.getElementById("myCanvas");
const ctx = myCanvas.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(20, 20, 150, 100);

আপনার হাতে চেষ্টা করুন

আপনি document.createElement() পদ্ধতিটি ব্যবহার করে একটি নতুন <canvas> ইলেমেন্ট তৈরি করতে পারেন এবং তা সম্প্রতি হিংস্ব এইচটিএমএল পৃষ্ঠায় যুক্ত করতে পারেন:

উদাহরণ

const myCanvas = document.createElement("canvas");
document.body.appendChild(myCanvas);
const ctx = myCanvas.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(20, 20, 150, 100);

আপনার হাতে চেষ্টা করুন

ক্ষেত্রটিকে ড্রাইব করুন (ফাইল না করা)

কাভাসে আঁকার সাধারণ পদ্ধতি হল:

1. পথ শুরু - beginPath()
2. একটি পয়েন্টে চলে যাও - moveTo()
3. পথে আঁকা - lineTo()
4. পথ আঁকা - stroke()

উদাহরণ

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(20, 20);
ctx.lineTo(20, 100);
ctx.lineTo(70, 100);
ctx.stroke();

আপনার হাতে চেষ্টা করুন