HTML Canvas আকার
- পূর্ববর্তী পৃষ্ঠা Canvas লাইন
- পরবর্তী পৃষ্ঠা Canvas রেক্টাঞ্জল
প্রকল্প
উদাহরণ ১
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()
এই পদ্ধতিটি লাইনকে চিত্রিত করে।ডিফল্ট পেন্সিল রঙ কালো
আরও উদাহরণ
উদাহরণ ২
ctx.beginPath(); ctx.moveTo(100,20); ctx.lineTo(175,100); ctx.lineTo(20,100); ctx.lineTo(100,20); ctx.stroke();
উদাহরণ ৩
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()
এটা সেট করুন
প্রকল্প
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();
অন্যান্য দেখুন:
- পূর্ববর্তী পৃষ্ঠা Canvas লাইন
- পরবর্তী পৃষ্ঠা Canvas রেক্টাঞ্জল