Canvas绘制饼图的核心是用arc()方法画扇形，需将百分比换算为弧度（2Math.PIpercent），从圆心出发按起止角度逐段绘制并填充颜色，支持边框、文字标签及高亮交互。
Canvas 绘制饼图的核心是用 arc() 方法画扇形，关键在于把百分比换算成对应的角度（弧度），再结合圆心、半径和起止角度逐个绘制。
计算角度：把百分比转成弧度
Canvas 的 arc(x, y, r, startAngle, endAngle) 使用的是**弧度**，不是角度。一个完整圆是 360° = 2π 弧度，所以：
- 1% 对应
2 * Math.PI * 0.01弧度 - 某数据占比
percent（如 0.25 表示 25%），其弧度 =2 * Math.PI * percent - 每个扇形的
startAngle是前一个扇形的endAngle，初始为 0
逐段绘制扇形并填充颜色
用循环遍历数据数组，累积角度，每次调用 arc() + fill()：
const ctx = canvas.getContext('2d');
const centerX = canvas.width / 2;
const centerY = canvas.height / 2;
const radius = Math.min(centerX, centerY) - 20;
<p>let startAngle = 0;
data.forEach(item => {
const angle = 2 <em> Math.PI </em> item.percent; // 如 0.3 → 108°
const endAngle = startAngle + angle;</p><p>ctx.beginPath();
ctx.moveTo(centerX, centerY); // 从圆心出发
ctx.arc(centerX, centerY, radius, startAngle, endAngle);
ctx.closePath(); // 封闭成扇形
ctx.fillStyle = item.color;
ctx.fill();</p><p>startAngle = endAngle; // 更新下一段起始角
});可选：加边框、文字标签或高亮效果
提升可读性的小技巧：
立即学习“前端免费学习笔记（深入）”；
- 绘制边框：在
fill()前加ctx.strokeStyle = '#fff'; ctx.lineWidth = 2; ctx.stroke(); - 显示百分比文字：用
ctx.fillText(`${Math.round(item.percent * 100)}%`, x, y)，x/y 可按角度算在扇形中点外侧 - 悬停高亮：监听
mousemove，根据鼠标与圆心夹角判断落在哪个扇形区间（需记录每段的startAngle和endAngle）
注意坐标系和方向细节
Canvas 默认 0 弧度指向正右方，逆时针增长 —— 这和常规数学极坐标一致，但和“钟表式”直觉相反。如果想让第一块从顶部开始（12 点方向），把起始角设为 -Math.PI / 2（即 -90°），后续所有角度都加上这个偏移即可。
