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，但需统一方向避免缺口错位
绘制标准饼图
饼图本质是多个首尾相接的扇形。需先计算各数据占比，再累加角度确定每个扇形的起止位置：
- 总和为
sum，第 i 项占比ratio = data[i] / sum - 对应圆心角
angle = ratio * Math.PI * 2 - 起始角为前几项角度之和（初始为 0），终止角 = 起始角 +
angle - 每次调用
beginPath()→arc()→lineTo(圆心)→closePath()→fill()完成一个扇形
注意：必须用 lineTo(x, y) 连回圆心，否则只是空心圆弧，不是实心扇形。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
实现环形进度条
环形进度条是“空心扇形”，即两个同心圆弧 + 两端连线构成的环形扇区：
- 外圆半径
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)
