HTML5绘制正圆有三种方式：一、Canvas的arc()方法通过指定圆心、半径和完整角度绘制位图圆；二、SVG的<circle>元素用cx、cy、r属性声明矢量圆；三、CSS的border-radius:50%使等宽高等块元素视觉呈圆。
如果您希望在网页中绘制一个正圆图形，HTML5 提供了两种主流方式：使用 Canvas 的 arc() 方法或 SVG 的 <circle> 元素。以下是实现这两种方法的具体步骤：
一、使用 Canvas 的 arc() 方法绘制正圆
Canvas 是基于像素的位图绘图环境，arc() 方法通过指定圆心坐标、半径、起始角、终止角和绘制方向来绘制圆弧；当起始角为 0、终止角为 2 * Math.PI 且顺时针绘制时，即可得到完整正圆。
1、在 HTML 中添加一个 <canvas> 元素，并设置其 id 属性（例如 id="myCanvas"）和宽高属性。
2、使用 JavaScript 获取该 canvas 元素的 2D 渲染上下文：const ctx = document.getElementById('myCanvas').getContext('2d');
立即学习“前端免费学习笔记（深入）”；
3、调用 ctx.arc(x, y, radius, 0, 2 * Math.PI);，其中 x 和 y 为圆心坐标，radius 为半径值。
4、设置描边或填充样式：ctx.strokeStyle = '#000'; 或 ctx.fillStyle = '#ff6347';
5、执行绘制：ctx.stroke(); 绘制轮廓，或 ctx.fill(); 填充内部。
二、使用 SVG 的 circle 元素绘制正圆
SVG 是矢量图形格式，<circle> 元素通过声明式属性直接定义圆心位置与半径，天然支持缩放不失真，且无需 JavaScript 即可渲染。
1、在 HTML 中插入 <svg> 标签，并设置其 width 和 height 属性（例如 width="200" height="200"）。
2、在 <svg> 内部添加 <circle> 元素。
3、为 <circle> 设置 cx 和 cy 属性，分别表示圆心横纵坐标，单位为像素。
4、设置 r 属性为所需半径值，确保 cx、cy、r 均为数值且单位一致。
5、可选添加 fill 或 stroke 属性控制填充色或边框色，例如 fill="lightblue" stroke="navy" stroke-width="2"。
三、使用 CSS + border-radius 绘制正圆容器
虽然非原生绘图 API，但利用块级元素配合 border-radius: 50% 可快速生成视觉上的正圆区域，适用于图标背景、头像等场景，本质是通过样式变形实现。
1、创建一个具有明确宽高相等的 HTML 元素，例如 <div class="circle"></div>。
2、为其设置 CSS 样式：width: 100px; height: 100px;，确保宽高等值。
3、添加 border-radius: 50%;，使四角完全圆化。
4、设定 background-color 或 background-image 实现填充效果。
5、注意：该方法生成的是带背景的块容器，不生成路径数据或可编程绘图上下文，不可用于动态图形计算。
