canvas是手动画雷达图最可控方案，因其能精准控制顶点、角度、填充与文字对齐；需动态计算宽高、平移坐标系、用弧度转换角度、居中对齐文字，避免常见错位、失真问题。
用 <canvas></canvas> 手动画雷达图最可控
纯 HTML 没有原生雷达图标签，<div> 堆叠或 CSS 旋转模拟容易错位、缩放失真、响应式崩溃。真要静态示意五维能力（比如编程、调试、设计、协作、文档），<code><canvas></canvas> 是唯一能精准控制顶点、角度、填充和文字对齐的方案。
常见错误现象：ctx.fillText() 文字跑出扇区、坐标系没平移导致图形偏左上、半径没按容器宽高动态计算导致拉伸。
- 先用
getBoundingClientRect()拿到<canvas></canvas>实际宽高，别信width/height属性值 - 用
ctx.translate(centerX, centerY)把原点移到画布中心，否则所有角度计算全乱 - 五个维度对应 0°、72°、144°、216°、288°，别手算弧度，直接用
angle * Math.PI / 180 - 文字用
ctx.textAlign = 'center'+ctx.textBaseline = 'middle'对齐顶点，不然会悬空或压线
svg 方案适合需要打印或缩放不失真的场景
svg 雷达图本质是 <polygon></polygon> + <text></text> 组合，DOM 可访问、CSS 可样式化、打印时自动矢量化。但注意：IE11 不支持 transform: rotate() 在 <text></text> 上的精确应用，文字角度会漂移。
使用场景：生成 PDF 报告、嵌入企业内网静态页、需被屏幕阅读器读出维度名称。
- 每个轴用
<line></line>从中心画到外圈，长度由最大分值归一化（如 5 分制 → 半径 × value/5） -
<text></text>的x/y必须基于极坐标转直角坐标计算，不能靠transform硬旋，否则 Safari 下文字模糊 - 如果数据要后期修改，把数值存在
data-value属性里，比写死在d属性里更易维护
别碰 CSS + clip-path 画雷达图
有人用五个 <div> 旋转叠加再裁剪，看似“纯 CSS”，实际是陷阱。Chrome 最新版已限制 <code>clip-path: polygon() 的顶点数，超 8 个点就截断；更麻烦的是，百分比坐标在不同容器尺寸下无法保持等角分布，五边形立刻变歪。
性能影响：每改一个维度值就要重排版 + 重绘全部 <div>，动画卡顿明显；兼容性上，Firefox 对 <code>clip-path 的 SVG 引用路径解析不稳定。
- 就算只做静态图，也避免用
clip-path模拟填充色——它不支持渐变或透明度叠加 - 如果非要用 CSS 表达“五维”概念，改用带图标的横向进度条组，语义清晰且无渲染风险
数据映射到图形前必须做归一化
五维能力值往往单位不同（如“文档”是篇数，“调试”是平均修复时长），直接画图会导致某一项完全盖住其他项。归一化不是简单除以最大值，而是按业务意义锚定基准线。
例如：“协作”分值 1–5，“设计”是像素精度误差值 0–100，这时得把两者都映射到 0–1 区间，再乘以统一半径。
- 别用
Math.min()/Math.max()动态算范围——静态示意图的数据是固定的，硬编码阈值反而稳定 - 警惕 0 值：如果某维度为 0，对应顶点应落在圆心，但
ctx.lineTo(0, 0)容易让路径闭合异常，建议显式判断并跳过该点 - 雷达图天生夸大差异，若五维中四项接近满分、一项偏低，视觉上会显得极度失衡——这是图表特性，不是代码 bug
真正难的不是画出五边形，而是让每个顶点承载准确的业务含义，又不让文字挤在一起。坐标算错一次，整个图就得重来。
