ตำแหน่ง HTML Canvas
- หน้าก่อน การวาด Canvas
- หน้าต่อไป เส้น Canvas
কার্টেজ কোণ
HTML কার্টেজ একটি দুইমাত্রিক গ্রিড।
কার্টেজের ডানদিকের উপরের কোণ (0,0)।
পূর্ববর্তী চাপে, আমরা নিচের মেথডগুলি ব্যবহার করেছিলাম: fillRect(0,0,150,75)。
মানে: ডানদিকের উপরের কোণ (0,0) থেকে 150x75 পিক্সেলের আকৃতি আঁকুন。
কোণ উদাহরণ
নিচের আকৃতিটির উপর মাউস লাগানোর মাধ্যমে, x এবং y কোণ দেখতে পারেন:
লাইন আঁকুন
কার্টেজে লাইন আঁকতে, নিচের মেথডগুলি ব্যবহার করুন:
- moveTo(x,y) - লাইনের শুরুত অবস্থান
- lineTo(x,y) - লাইনের শেষ অবস্থান
লাইনটি আকর্ষণ করতে, 'পালক' মেথডের একটি ব্যবহার করুন, যেমন stroke()。
উদাহরণ
অবস্থান (0,0) থেকে শুরুত নির্ধারণ করুন, (200,100) থেকে শেষত নির্ধারণ করুন। তারপর stroke() মেথড দিয়ে লাইনটি আকর্ষণ করুন:
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.moveTo(0, 0);
ctx.lineTo(200, 100);
ctx.stroke();
একটি বৃত্ত আঁকুন
কার্টেজে বৃত্ত আঁকতে, নিচের মেথডগুলি ব্যবহার করুন:
- beginPath() - একটি পথ শুরু করুন
- arc(x,y,r,startangle,endangle) - বৃত্ত আর্ক/কার্ভার
arc() দিয়ে বৃত্ত তৈরি করতে: 0 ডিগ্রি থেকে শুরু কোণ নির্ধারণ করুন, 2 * Math.PI ডিগ্রি থেকে শেষ কোণ নির্ধারণ করুন। x এবং y পারামিটার বৃত্তের কেন্দ্রের x এবং y কোণ নির্ধারণ করে। r পারামিটার বৃত্তের ব্যাস নির্ধারণ করে。
উদাহরণ
arc() মেথড দিয়ে একটি বৃত্ত নির্ধারণ করুন। তারপর arc() মেথড দিয়ে বৃত্তকে আকর্ষণ করুন:
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.arc(95, 50, 40, 0, 2 * Math.PI);
ctx.stroke();
ดูเพิ่มเติม
- หน้าก่อน การวาด Canvas
- หน้าต่อไป เส้น Canvas
