Canvas通过arc()方法绘制圆形，适用于动态图形和游戏；2. SVG使用标签绘制矢量圆，适合可缩放和交互场景；3. 选择依据：Canvas用于高性能渲染，SVG用于清晰缩放与CSS操作。
在HTML5中绘制圆形，主要有两种方式：使用Canvas和SVG。两者各有特点，适用于不同场景。下面分别介绍如何用这两种技术实现圆形绘制。
1. 使用Canvas绘制圆形
Canvas 是一个基于JavaScript的位图画布，适合动态绘图、动画或游戏等场景。
要绘制圆形，可以通过 arc() 方法来实现：
立即学习“前端免费学习笔记（深入）”；
说明：
-
arc(x, y, radius, startAngle, endAngle, anticlockwise)是绘制圆弧的核心方法，画整圆时角度从 0 到2*Math.PI。 -
fill()填充颜色，stroke()绘制边框。 - Canvas 是基于像素的，放大后可能模糊。
2. 使用SVG绘制圆形
SVG 是矢量图形，基于XML标签，适合图标、响应式设计和需要缩放清晰的图形。
使用
立即学习“前端免费学习笔记（深入）”；
说明：
-
cx和cy是圆心坐标。 -
r是半径。 - SVG是矢量图，无论缩放多少都清晰。
- 可以直接用CSS控制样式，也支持事件绑定（如点击、悬停）。
Canvas vs SVG：怎么选？
根据项目需求选择合适方案：
- 需要高性能动画或实时渲染（比如游戏）→ 选 Canvas。
- 需要可缩放、交互性强的图形（如图表、图标）→ 选 SVG。
- 想用HTML/CSS方式操作图形 → SVG 更直观。
- 处理大量图形对象时注意性能差异。
基本上就这些。两种方法都能很好地实现圆形绘制，关键是看你的应用场景。
