canvas 的 arc() 方法是绘制饼图和环形进度条的核心，需准确计算圆心、半径、起始角、终止角及方向；饼图用 lineto(圆心) 闭合扇形，环形进度条需内外双弧反向绘制并连线闭合。

Canvas 的 arc() 方法是绘制饼图和环形进度条的核心，关键在于准确计算起始角、终止角与半径，并结合 stroke() 或 fill() 实现视觉呈现。

理解 arc() 的基本参数

context.arc(x, y, radius, startAngle, endAngle, anticlockwise)

• x, y：圆心坐标（相对于 canvas 左上角）
• radius：圆弧半径
• startAngle / endAngle：以弧度为单位，0 表示 3 点钟方向（正 x 轴），逆时针递增；常用 Math.PI * 2 * ratio 将百分比转为弧度
• anticlockwise：布尔值，false（默认）为顺时针绘图 —— 注意：饼图通常设为 false，但需统一方向避免缺口错位

绘制标准饼图

饼图本质是多个首尾相接的扇形。需先计算各数据占比，再累加角度确定每个扇形的起止位置：

html-to-pptx-converter

使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。

下载

• 总和为 sum，第 i 项占比 ratio = data[i] / sum
• 对应圆心角 angle = ratio * Math.PI * 2
• 起始角为前几项角度之和（初始为 0），终止角 = 起始角 + angle
• 每次调用 beginPath() → arc() → lineTo(圆心) → closePath() → fill() 完成一个扇形

注意：必须用 lineTo(x, y) 连回圆心，否则只是空心圆弧，不是实心扇形。

实现环形进度条

环形进度条是“空心扇形”，即两个同心圆弧 + 两端连线构成的环形扇区：

• 外圆半径 R，内圆半径 r（如 r = R * 0.7）
• 用 arc(x, y, R, start, end, false) 画外弧
• 用 arc(x, y, r, end, start, true) 逆向画内弧（注意方向相反，保证路径闭合）
• 两次 lineTo() 连接内外弧端点，形成封闭环形路径
• 最后 stroke() 或 fill() 即可；若仅描边，可用单圆弧 + stroke() 配合 lineCap: 'round' 模拟粗环效果

实用细节与避坑提示

提升稳定性和表现力的关键操作：

• 始终在绘图前调用 ctx.clearRect(0, 0, canvas.width, canvas.height) 清屏，避免重叠残留
• 使用 ctx.save() / ctx.restore() 隔离样式（如 fillStyle、lineWidth）影响
• 角度计算推荐统一用 start = accumulated * Math.PI * 2，避免累计浮点误差；必要时对 endAngle 做 Math.min(end, Math.PI * 2) 保护
• 为提升可读性，可在扇形内用 fillText() 添加文字标签，位置可通过三角函数算出弧中点坐标：x + Math.cos(midAngle) * (R + 10)

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！