CSS中用border-radius:50%可使等宽高等尺寸元素呈正圆；SVG通过标签以cx、cy、r精确绘圆，缩放无损；Canvas则用arc()方法配合fill()/stroke()动态绘圆。
一、使用 border-radius 属性绘制圆形
当元素的宽度与高度相等时，将 border-radius 设置为 50%，可使该元素呈现为正圆形。该方法依赖于盒模型的尺寸约束，适用于 div、button 等块级或行内块级元素。
1、创建一个具有固定宽高的 HTML 元素，例如 width: 100px; height: 100px;。
2、为其添加 CSS 样式 border-radius: 50%;。
3、可选地添加 background-color 或 border 以增强视觉效果。
立即学习“前端免费学习笔记（深入）”；
二、使用 SVG 的 circle 元素绘制圆形
SVG 是基于 XML 的矢量图形语言，
1、在 HTML 中插入 svg> 标签，并设置其 width 和 height 属性。
2、在 内添加
3、可为
三、使用 canvas API 绘制圆形路径
Canvas 提供了低层级的绘图接口，通过 arc() 方法可绘制任意角度的圆弧，设起始角为 0、结束角为 2π 即可生成完整圆形，适合需要动态计算或动画的场景。
1、在 HTML 中添加 。
2、通过 JavaScript 获取 canvas 上下文：const ctx = document.getElementById('myCanvas').getContext('2d');。
3、调用 ctx.arc(x, y, radius, startAngle, endAngle);，例如 ctx.arc(100, 100, 50, 0, Math.PI * 2);。
4、执行 ctx.fill(); 或 ctx.stroke(); 渲染图形。
