用 border-radius 画圆需宽高相等且设为 50%，SVG 用 可精确定位和缩放，Canvas 适合动态绘制但需注意路径和高清屏适配。
用 border-radius 画圆最直接
HTML 本身没有“画圆”标签，得靠 CSS 控制形状。最常用、兼容性最好的方式是让一个正方形元素的四个角完全圆角化：border-radius: 50%。它不依赖 SVG 或 Canvas，写几行就能出效果。
关键点在于：必须保证宽高相等，否则会变成椭圆。
-
width和height必须设为相同值（比如都设100px） -
border-radius推荐写50%，不是100%（后者在某些老浏览器里行为不一致） - 如果父容器有
overflow: hidden，记得检查是否意外裁剪了边缘
<div style="width: 100px; height: 100px; background: #3498db; border-radius: 50%;"></div>
用 <svg></svg> 画圆更精确可控
当需要指定圆心坐标、半径、描边、透明度，或后续要动画/交互时，<svg></svg> 是更合适的选择。它本质是矢量图形，缩放不糊，且原生支持 CSS 和 JS 操作。
注意：<circle></circle> 的 cx 和 cy 是从 SVG 画布左上角算起的绝对位置，不是相对父容器。
立即学习“前端免费学习笔记（深入）”；
-
cx和cy默认是 0，不设的话圆心会落在左上角，可能看不见 - 想居中显示，得手动计算：比如
<svg width="200" height="200"></svg>里画圆，cx="100" cy="100" -
r是半径，不是直径；设成负数会报错，浏览器直接忽略该元素
<svg width="200" height="200"> <circle cx="100" cy="100" r="50" fill="#e74c3c" /> </svg>
用 <canvas></canvas> 动态画圆适合复杂逻辑
如果圆的位置、大小、颜色要实时变化（比如鼠标跟随、数据驱动），或者要叠加多层图形、做像素级操作，<canvas></canvas> 更灵活。但它不自动响应式，缩放时需手动重绘。
容易漏掉的关键步骤：必须调用 beginPath()，否则多次绘制会连成路径，导致意外描边或填充异常。
- 忘记
ctx.beginPath()→ 上次路径残留，圆变成带尾巴的怪形 - 没调
ctx.fill()或ctx.stroke()→ 什么也看不到（只定义了路径，没渲染） - Canvas 默认分辨率是 96dpi，高分屏下模糊？得按
window.devicePixelRatio缩放 canvas 元素尺寸和绘图坐标
<canvas id="myCanvas" width="200" height="200"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.arc(100, 100, 50, 0, Math.PI * 2);
ctx.fillStyle = '#2ecc71';
ctx.fill();
</script>别踩这些常见坑
三种方式看着简单，但实际项目里最容易栽在细节上：比如圆没显示、边缘发虚、响应式错位。
- 用
border-radius时设了padding或border却没考虑盒模型 → 实际宽高超预期，圆变椭圆 - SVG 中用了
viewBox却忘了同步调整cx/cy/r值 → 圆跑出可视区 - Canvas 在高清屏上没适配
devicePixelRatio→ 圆边缘锯齿明显，尤其小圆 - 所有方式里，透明背景下的圆如果边缘发灰，大概率是亚像素渲染问题，加
shape-rendering: crispEdges（SVG）或强制整数坐标（Canvas）能缓解
圆本身很简单，但它的“存在感”高度依赖上下文——尺寸、坐标系、设备像素、盒模型，少对一环，就不是你想要的那个圆。
