HTML5 Canvas绘制雷达扫描图教程与交互实现

如何通过HTML5中Canvas绘制极坐标系实现动态的雷达扫描雷达图交互

想在Canvas上实现一个既有科技感又能交互的雷达图？这事儿听起来复杂，但拆解开来，核心无非是几个关键步骤：用三角函数精准定位每个点，用arc和lineTo勾勒出坐标骨架，再用rotate配合clearRect让扫描线“活”起来，最后靠requestAnimationFrame驱动流畅动画。至于交互，本质上就是监听鼠标，把屏幕坐标换算回极坐标，然后实时更新数据点。下面，咱们就一步步把它实现出来。

绘制基础极坐标系（圆心+同心圆+射线）

一切从设定原点开始。把画布的中心点(cx, cy)作为极坐标的原点，最大半径r决定了图表的边界。接下来，需要构建两个视觉元素：代表数值层级的同心圆，和划分维度的放射状轴线。

• 同心圆：通常绘制5到8层就足够了。通过一个循环，计算每一层的半径（例如r * i / levelCount），然后调用ctx.arc(cx, cy, radius, 0, Math.PI * 2)即可画出完美的圆环。
• 射线：这是维度的骨架。根据维度数量（比如6个或8个），等分360度。对于每个角度angle，用Math.cos和Math.sin计算出射线终点的笛卡尔坐标，再用moveTo和lineTo从圆心连线过去。
• 角度标注：别忘了让图表会“说话”。在每条射线的末端稍外侧，使用ctx.fillText标注上维度名称，比如“性能”、“安全性”或“用户体验”。

实现雷达扫描线（旋转光束效果）

扫描线是动态雷达的灵魂。它的本质是一条从圆心出发、长度周期性变化的射线，配合透明度和尾迹效果，就能模拟出那种专业的扫描感。

• 绘制旋转线：这里有个小技巧，用ctx.sa ve()保存画布状态，然后使用ctx.rotate(angle)旋转整个坐标系。接着，从圆心(cx, cy)到(cx, cy - r)画一条线即可。因为坐标系旋转了，这条线自然就变成了扫描线。
• 样式优化：颜色可以选用科技蓝如rgba(0, 180, 255, 0.8)，线宽设为2-3像素，并加上ctx.lineCap = 'round'让线头更圆润，视觉效果更柔和。
• 动画与性能：每次更新动画帧时，不需要清空整个画布。只需用ctx.clearRect精准清除扫描线经过的区域（通常是包含扫描线的一个矩形区域），然后重绘静态的坐标系。这里有个性能提升点：可以将静态的坐标系预先绘制到一个离屏Canvas上，每次直接复制过来，能有效减少重绘开销。

将数据映射到极坐标并绘制雷达图多边形

坐标系搭好了，接下来就是把数据“画”上去。假设我们有N个维度的数据，每个值都归一化到0到1之间，对应着半径的比例。

立即学习“前端免费学习笔记（深入）”；

• 坐标计算：首先预计算每个维度对应的角度。然后，对于每个维度的值value[i]，套用公式：x = cx + value[i] * r * Math.cos(angle[i])，y = cy + value[i] * r * Math.sin(angle[i])，就能得到多边形的一个顶点。
• 绘制与填充：使用beginPath()开始路径，moveTo()移动到第一个顶点，然后循环lineTo()到后续各个顶点，最后closePath()闭合路径。先fill()填充半透明颜色，再stroke()描边，一个数据多边形就完成了。
• 动态更新：这是Canvas雷达图的优势所在。当数据变化时，只需更新value[]数组，然后重新绘制这个多边形即可，完全不需要重绘底层复杂的坐标系，效率非常高。

添加鼠标交互：悬停获取极坐标值 & 点击编辑

静态图表已经不错，但加上交互才够“酷”。监听画布上的鼠标事件，可以实现悬停提示和点击编辑。

• 坐标转换：这是交互的核心。通过canvas.getBoundingClientRect()获取画布相对视口的位置，计算出鼠标相对于圆心原点的偏移量(dx, dy)。
• 解算极坐标：利用公式，半径rad = Math.sqrt(dx*dx + dy*dy)，角度theta = Math.atan2(dy, dx)。注意，Math.atan2返回的范围是[-π, π]，通常需要转换为[0, 2π)以便使用。
• 映射到维度：根据角度theta和维度总数n，可以计算出最近的维度索引。结合半径与最大半径的比例，就能估算出该维度当前的值。悬停时，就可以在对应位置显示这个值。
• 点击与拖拽：在点击事件中，可以触发一个编辑面板来修改该维度数据。更高级的交互，可以直接拖拽多边形顶点来实时调整数据，体验非常直观。

最后，提一个容易踩坑的细节：Canvas的坐标系Y轴是向下的，而数学中极坐标的Y轴是向上的。这意味着，在计算点的Y坐标时，如果想让0度方向朝上（符合常规视觉习惯），公式应该是y = cy - value * r * Math.sin(angle)，而不是简单的+。把这个细节处理好，你的雷达图方向就对了。