canvas绘制雷达图的核心是将多维数据映射到极坐标再转笛卡尔坐标：先按维度数确定正多边形顶点角度，归一化各维数据至[0,1]后计算实际半径与坐标，用beginpath→moveto→lineto→closepath绘制闭合填充路径。
Canvas绘制雷达图的核心在于将多维数据映射到极坐标系中，再转换为笛卡尔坐标绘制路径。关键不是画线本身，而是准确算出每个维度对应的顶点位置。
确定雷达图的几何结构
雷达图本质是正多边形，顶点数等于数据维度数（如5个指标就画五边形）。所有顶点均匀分布在以圆心为中心的圆周上，相邻顶点夹角为 2π / 维度数。
- 设圆心为
(cx, cy)，最大半径为r - 第
i个维度（从0开始）对应的角度为：angle = i * 2π / n - 该维度上数据值归一化后为
normValue ∈ [0, 1]，则实际半径为：rad = normValue * r - 对应顶点坐标：
x = cx + rad * cos(angle)，y = cy + rad * sin(angle)
处理数据归一化与缩放
原始数据量纲不同，必须统一映射到 [0, 1] 区间，否则某些维度会完全压制其他维度。
- 对每个维度独立计算：取该维度所有样本中的最大值
maxVal和最小值minVal - 归一化公式：
norm = (value - minVal) / (maxVal - minVal || 1)（分母为0时防错设为1） - 若需强调差异，可改用非线性缩放（如平方根或对数），但需保持单调性和可逆性
构建闭合路径并绘制
Canvas中用 beginPath() → moveTo() → 多次 lineTo() → closePath() 构成填充区域。
- 起始点设为第一个维度顶点：
ctx.moveTo(x0, y0) - 依次连接其余顶点：
ctx.lineTo(x1, y1)、ctx.lineTo(x2, y2)… - 调用
ctx.closePath()自动连回起点，形成闭合多边形 - 用
ctx.fill()填充，ctx.stroke()描边；若要透明叠加，设置ctx.fillStyle = "rgba(60, 120, 255, 0.4)"
支持多组数据与动态更新
多个数据系列可叠加绘制，每组使用不同颜色和透明度；动画更新只需清空重绘，无需复杂插值。
- 每次重绘前调用
ctx.clearRect(0, 0, canvas.width, canvas.height) - 为提升性能，可预先计算所有角度和基础坐标（如单位圆上顶点），运行时只乘归一化半径
- 若需平滑过渡，对每个维度的归一化值做简单线性插值（
current = current + (target - current) * 0.1）
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
