用Canvas绘制雷达图并填充半透明多边形的关键是：正确转换极坐标为像素点、构建闭合路径、设置rgba填充色；需先获取上下文、定义中心点与归一化逻辑，再计算顶点、绘制路径并清空画布以支持动态更新。
用 Canvas 绘制雷达图并填充半透明多边形，关键在三步：正确转换极坐标为像素点、构建闭合路径、设置带 alpha 通道的填充色。不需要第三方库，纯原生 Canvas 即可实现清晰、可复用的效果。
准备画布与基础参数
先在 HTML 中声明 canvas，并通过 JavaScript 获取上下文：
<canvas id="radar" width="500" height="500"></canvas>
接着定义中心点、最大半径、维度数据和归一化逻辑：
立即学习“前端免费学习笔记（深入）”；
- 中心坐标取 canvas.width / 2 和 canvas.height / 2
- 半径建议设为 Math.min(centerX, centerY) - 40，留出标签空间
- 每个维度值需归一化到 [0, 1] 区间，例如 value[i] / maxValue
- 角度按均匀分布：第 i 维对应角度为 i × 2π / 数据长度
计算顶点并绘制填充多边形
遍历每个维度，把归一化后的值转成屏幕坐标：
x = centerX + radius × normalizedValue × Math.cos(angle)
y = centerY + radius × normalizedValue × Math.sin(angle)
然后用 Canvas 路径 API 连接所有点：
- 调用 ctx.beginPath()
- 用 ctx.moveTo(x0, y0) 定位起点
- 对后续点依次调用 ctx.lineTo(x, y)
- 最后 ctx.closePath() 封闭路径
此时路径已就绪，可直接填充。
设置半透明填充色
避免使用 globalAlpha（它会影响后续所有绘制），推荐直接用 rgba 颜色值：
- ctx.fillStyle = 'rgba(70, 130, 180, 0.4)' —— 蓝色系，40% 不透明度
- 也可用十六进制加 alpha，如 '#4682b466'（末两位 66 ≈ 40%）
- 填充后可叠加描边：ctx.strokeStyle = '#4682b4'; ctx.lineWidth = 2; ctx.stroke();
这样填充区域柔和不刺眼，又不影响网格线或文字的清晰度。
补充说明
若需支持动态更新（比如切换数据），只需修改数值数组，重新执行顶点计算和 fill 即可。注意每次重绘前应调用 ctx.clearRect(0, 0, canvas.width, canvas.height) 清空画布，否则会残留旧图形。
