html5怎么出现圆_html5用border-radius设50%或SVG画圆形【绘制】

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、在 内添加 ，其中 cx 和 cy 表示圆心位置，r 表示半径。

3、可为 添加 fill 或 stroke 属性定义填充色或描边。

三、使用 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(); 渲染图形。