Cách vẽ hình tròn trong trang HTML

Có 3 cách chính vẽ hình tròn trong HTML:

1. SVG: Dùng <circle> – vector, scale tốt.
2. Canvas: Dùng arc() trong JavaScript – bitmap, phù hợp game/animation.
3. CSS: Dùng border-radius: 50% trên phần tử block – đơn giản nhất cho UI.

Ví dụ: CSS border-radius

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

Chọn cách nào? UI đơn giản → CSS. Đồ họa vector phức tạp → SVG. Game/đồ họa động bitmap → Canvas.