HTML পেজে বৃত্ত কীভাবে আঁকবেন?

HTML পেজে বৃত্ত আঁকার পদ্ধতিগুলো

HTML পেজে বৃত্ত আঁকতে SVG বা Canvas ব্যবহার করতে পারেন। আপনি CSS-ও ব্যবহার করতে পারেন, border-radius প্রপার্টি দিয়ে।

উদাহরণ (CSS ব্যবহার করে)

নিচের কোডটি চালিয়ে HTML-এ বৃত্ত আঁকতে শিখুন:

<!DOCTYPE html>
<html>
  <head>
    <style>
      #circle {
        width: 50px;
        height: 50px;
        -webkit-border-radius: 25px;
        -moz-border-radius: 25px;
        border-radius: 25px;
        background: blue;
      }
    </style>
  </head>
  <body>
    <div id="circle"></div>
  </body>
</html>

বিকল্প পদ্ধতিগুলো:

• SVG: <circle cx="50" cy="50" r="40" fill="blue" />
• Canvas: ctx.arc(50, 50, 40, 0, 2 * Math.PI); ctx.fill();
• CSS: border-radius: 50% দিয়ে স্কয়ার এলিমেন্টকে বৃত্তে রূপান্তর

CSS পদ্ধতিটি সবচেয়ে সহজ এবং পারফরম্যান্সের দিক থেকে ভালো সাধারণ UI এলিমেন্টের জন্য। জটিল গ্রাফিক্সের জন্য SVG বা Canvas ভালো।