Canvas绘制雷达图和拓扑图的核心在于坐标组织、状态管理和交互响应：雷达图需基于中心原点用弧度计算极坐标点并填充多边形；拓扑图须手动布局节点、分组定位、绘制连线与标签；两者均需优化悬停检测、坐标转换及重绘策略以保障性能。
网页端用 Canvas 绘制雷达图和结构拓扑图，核心不是“能不能画”，而是“怎么组织坐标、怎么更新、怎么响应交互”。Canvas 本身不提供布局或图表逻辑，所有图形都要手动算点、连路径、管状态。但好处是轻量、可控、性能好——尤其适合定制化仪表盘或嵌入式数据看板。
雷达图：从极坐标到填充多边形
雷达图本质是把 N 个维度的数值映射到圆周上的 N 条射线，再连成闭合区域。关键步骤是统一用弧度做角度计算，并始终以画布中心为原点：
- 先设 centerX = canvas.width / 2、centerY = canvas.height / 2，所有坐标都基于它偏移，避免图形贴左上角
- 每个维度的角度为 angle = i × 2π / N（i 从 0 开始），别用角度制漏乘 Math.PI / 180
- 归一化数据后，点坐标是：x = centerX + radius × value × Math.cos(angle)，y = centerY + radius × value × Math.sin(angle)
- 网格线用多层同心多边形绘制：循环 3–5 层，每层按比例缩放半径，复用同一套顶点角度计算逻辑
- 填充区域用 beginPath → moveTo → lineTo × N → closePath → fill()，轮廓加 stroke() 更清晰
结构拓扑图：不能靠 Canvas 自动排版
Canvas 没有节点自动定位能力，拓扑图必须自己决定每个节点在哪。中小规模图推荐“手动+约束”方式，比纯力导向更稳定、易调试：
- 按语义分组：比如“前端”“后端”“数据库”节点分别放在画布左、中、右区域，用 fillRect 加背景色区分区块
- 固定关键节点：如 root 或 gateway 设为固定坐标，其余节点以它为锚点偏移（例如子节点 y += 60，x += (i % 2 ? -40 : 40) 错开）
- 连线用 beginPath → moveTo(start) → lineTo(end)，箭头可手动画三角形，或用 lineCap = 'round' 让末端柔和
- 文字标签用 ctx.textAlign = 'center' 和 ctx.textBaseline = 'middle' 对齐节点中心，避免飘出
- 拖拽时监听 mousedown/mousemove，实时更新节点对象的 x/y，并保存到 JSON 供下次加载复用
共性要点：交互与性能
两类图都面临鼠标交互和重绘效率问题，处理不好会卡顿或失准：
- 悬停检测不用 isPointInPath() 做实时判定——它只对最近一次路径有效。更可靠的是对每个扇区或多边形用射线法判断点是否在内，或预先缓存扇区顶点做包围盒粗筛
- 鼠标坐标要转成 Canvas 坐标：用 canvas.getBoundingClientRect() 获取位置，再减去 event.clientX/Y 的偏移
- 高频重绘（如雷达扫描动画）用 requestAnimationFrame；但悬停高亮这类离散状态切换，用 setTimeout 或节流就够了，避免无谓帧消耗
- 静态部分（如网格、坐标轴）可提前画到离屏 canvas，主 canvas 只负责动态内容（数据多边形、扫描线、节点移动），大幅减少重复计算
