canvas 直角坐标系 雷达

### 如何在HTML5 Canvas上绘制基于直角坐标系的雷达图表

为了实现在Canvas中创建基于直角坐标系的雷达图，首先要理解Canvas的工作原理以及如何通过JavaScript对其进行编程。Canvas提供了一个二维绘图环境，在这个环境中能够定义各种形状并通过脚本动态改变这些图形的位置、颜色和其他属性。

对于构建一个基于直角坐标系的雷达图而言，主要步骤涉及设置画布尺寸、配置绘图上下文、建立网格线表示X轴和Y轴方向上的刻度标记，并最终依据给定的数据集描绘出代表不同指标值的多边形区域[^1]。

考虑到直接按照极坐标的思路去计算每一个顶点位置会比较复杂，因此可以采用一种简化的方法——先将整个坐标体系平移到屏幕中央作为新的原点，再利用`rotate()`函数调整角度以便更容易地完成后续的操作。这种方法允许我们在不考虑实际物理距离的情况下轻松连接各个端点形成闭合路径[^3]。

下面给出一段具体的代码片段用来展示怎样用Canvas API实现上述描述的功能：

function drawRadarChart(ctx, dataPoints) {
    const centerX = 250;
    const centerY = 250;
    const radius = 200;

    ctx.save();
    
    // 移动到中心点
    ctx.translate(centerX, centerY);

    // 绘制背景圆圈
    ctx.beginPath();
    ctx.arc(0, 0, radius, 0, Math.PI * 2);
    ctx.strokeStyle = "#ddd";
    ctx.stroke();

    let angleStep = (Math.PI * 2) / dataPoints.length;
    for(let i=0;i<dataPoints.length;i++){
        var angle = i*angleStep - Math.PI/2; // 调整起始角度
        
        // 计算当前数据对应的半径长度
        var r = (dataPoints[i]/maxValue)*radius;

        // 连接各点构成多边形
        if(i===0){
            ctx.moveTo(r*Math.cos(angle),r*Math.sin(angle));
        }else{
            ctx.lineTo(r*Math.cos(angle),r*Math.sin(angle));
        }
        
        // 可选：添加辅助线条指向每个维度
        ctx.beginPath();
        ctx.moveTo(0,0);
        ctx.lineTo(radius*Math.cos(angle),radius*Math.sin(angle));
        ctx.lineWidth = 0.5;
        ctx.stroke();
    }

    // 封闭多边形并填充颜色
    ctx.closePath();
    ctx.fillStyle="#8ed6ff";  
    ctx.fill(); 

    ctx.restore();
}

此段代码接受两个参数：一个是Canvas的绘图上下文对象(`ctx`)；另一个是要可视化的数值列表(`dataPoints`)。这里假设所有的输入都是正数，并且已经预先确定好了最大可能取值(maxValue)，这有助于比例缩放使得所有数据显示在一个合理的范围内[^4]。