HTML Canvas আকার

প্রকল্প

আপনার ব্রাউজার HTML5 ক্যানভাস ট্যাগটি সমর্থন করে না。

উদাহরণ ১

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

স্বয়ং প্রয়াস করুন

Canvas লাইন চিত্রিত

লাইন চিত্রিত করতে ক্যানভাসের পথ ব্যবহার করা হয়

এই বর্ণনা চিত্রিত করুন
beginPath() একটি নতুন পথ শুরু করুন নেই
moveTo() একটি পয়েন্টে স্থানান্তর নেই
lineTo() অন্য একটি পয়েন্টে লাইন চিত্রিত করুন নেই
stroke() চিত্র তৈরি আছে

এই

beginPath() এই পদ্ধতিটি একটি নতুন পথ শুরু করে।এটা কিছুই চিত্রিত করে না, এটা শুধুমাত্র একটি নতুন পথ নির্বাচন করে

moveTo() এই পদ্ধতিটি লাইনের ভাবগত শুরুদিক নির্বাচন করে।এটা কিছুই চিত্রিত করে না, এটা শুধুমাত্র একটি ভাবগত শুরুদিক নির্বাচন করে

lineTo() এই পদ্ধতিটি লাইনের শেষ দিক নির্বাচন করে।এটা কিছুই চিত্রিত করে না, এটা শুধুমাত্র একটি শেষ দিক নির্বাচন করে

stroke() এই পদ্ধতিটি লাইনকে চিত্রিত করে।ডিফল্ট পেন্সিল রঙ কালো

আরও উদাহরণ

উদাহরণ ২

আপনার ব্রাউজার HTML5 ক্যানভাস ট্যাগটি সমর্থন করে না。
ctx.beginPath();
ctx.moveTo(100,20);
ctx.lineTo(175,100);
ctx.lineTo(20,100);
ctx.lineTo(100,20);
ctx.stroke();

স্বয়ং প্রয়াস করুন

উদাহরণ ৩

আপনার ব্রাউজার HTML5 ক্যানভাস ট্যাগটি সমর্থন করে না。
ctx.beginPath();
ctx.moveTo(20,20);
ctx.lineTo(175,20);
ctx.lineTo(175,100);
ctx.lineTo(20,100);
ctx.lineTo(20,20);
ctx.stroke();

স্বয়ং প্রয়াস করুন

সুঝান

যদি চতুর্ভুজ চিত্রিত করতে হয়, তবে আপনাকে ৪টি লাইন চিত্রিত করতে হবে না

পরবর্তী চাপে আপনি এই পদ্ধতিটি শিখবেন drawRect() এই পদ্ধতিটি চতুর্ভুজ চিত্রিত করতে ব্যবহার করা হয়

strokeStyle একটি বৈশিষ্ট্য

strokeStyle ক্যানভাসে চিত্রিত করার সময় ব্যবহার করা হবে এই শৈলীর নির্বাচন

বাধ্যতামূলক stroke() এটা সেট করুন

আপনার ব্রাউজার HTML5 ক্যানভাস ট্যাগটি সমর্থন করে না。

প্রকল্প

ctx.beginPath();
// চতুর্ভুজ নির্বাচন
ctx.moveTo(20,20);
ctx.lineTo(175,20);
ctx.lineTo(175,100);
ctx.lineTo(20,100);
ctx.lineTo(20,20);
// ত্রিকোণ নির্বাচন
ctx.moveTo(100,20);
ctx.lineTo(175,100);
ctx.lineTo(20,100);
ctx.lineTo(100,20);
ctx.strokeStyle = "red";
ctx.stroke();

স্বয়ং প্রয়াস করুন

অন্যান্য দেখুন:

CodeW3C.com-এর সমস্ত Canvas পরিচিতি হান্ডবুক