canvas绘制多维度雷达图需分层：先静态绘制坐标系（同心圆+轴线+标签），再为每组数据独立创建径向渐变填充路径，最后叠加纯色描边；数据须归一化，渐变预生成以提升性能。
用 Canvas 绘制多维度雷达对比图并带渐变填充，关键不是“画多个多边形”，而是分层绘制：先画静态坐标系，再为每组数据单独生成带渐变的填充路径，避免颜色混叠，同时保持各组轮廓清晰可辨。
准备数据与画布基础
定义维度标签、多组数据（如“候选人A”“候选人B”），确保每组 data 数组长度一致、顺序严格对应 labels。Canvas 设置固定宽高（比如 500×500），获取 2D 上下文后，算出中心点和最大半径：
- 中心点：cx = canvas.width / 2，cy = canvas.height / 2
- 最大半径建议取 Math.min(cx, cy) − 40，留出文字空间
- 所有数值需归一化到 [0, 1] 区间（例如 value / maxValue 或用 (value − min) / (max − min) 统一缩放）
绘制同心网格与角度轴线
这部分是背景，只画一次，不参与渐变。用 ctx.arc() 画 4–5 层同心圆（代表 25%、50%、75%、100% 等层级），再用 ctx.moveTo() → ctx.lineTo() 绘制放射状轴线：
- 每条轴线角度为 i × 2π / n（n 是维度数）
- 末端坐标：x = cx + r × cos(angle)，y = cy + r × sin(angle)
- 在轴线末端外侧用
ctx.fillText()标注维度名（如“沟通”“技术”）
为每组数据创建独立渐变填充
不能直接用一个全局渐变 fill 所有图形——那样会覆盖彼此。正确做法是：对每一组数据，动态创建一个从中心发散的径向渐变，并仅用于该组多边形：
- 调用
ctx.createRadialGradient(cx, cy, 0, cx, cy, radius)，起始半径为 0，结束半径为最大半径 - 添加 2–3 个色标：
addColorStop(0, 'rgba(60,150,255,0.7)')、addColorStop(1, 'rgba(60,150,255,0.1)') - 用
beginPath()→ 按角度顺序计算各顶点 →lineTo()连线 →closePath()→fill() - 再用纯色描边（
strokeStyle）强化边界，提升对比度
叠加描边与交互优化
渐变填充之后，立即用不透明描边勾勒轮廓，让不同数据组不粘连。若需对比更直观，可加简单交互：
- 鼠标移入某区域时，临时提高该组 fillStyle 的 alpha 值（重绘一次）
- 点击图例切换显示/隐藏某组数据，只需控制是否执行其 fill 路径
- 避免在 requestAnimationFrame 中反复创建 gradient 对象——应在数据加载时预生成，复用即可
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
