在《Canvas 线性图形（五）：多边形》实现了绘制多边形的函数。本篇文章将记录如何绘制雷达图。最终实现的效果是这样的：

绘制雷达图

雷达图里外层

如动图中所示，雷达图从里到外一共有 6 层，所以，我们需要改造绘制多边形的函数：

点击查看绘制基础雷达图代码

function calcPolygonX(radarX, radius, increaseAngle) {
	return radarX + radius * Math.cos(increaseAngle);
}

function calcPolygonY(radarY, radius, increaseAngle) {
	return radarY - radius * Math.sin(increaseAngle);
}

// 绘制多边形的函数
function drawPolygon(radarMapTotalSides, radius, radarX, radarY, ctx) {
	let averageAngle = Math.PI * 2 / sides;
	let increaseAngle = 0;
	let targetX, targetY;

	ctx.beginPath();
	for ( let i = 0; i < radarMapTotalSides; i++ ) {
		targetX = calcPolygonX(radarX, radius, increaseAngle);
		targetY = calcPolygonY(radarY, radius, increaseAngle);
		ctx.lineTo(targetX, targetY);
		increaseAngle += averageAngle;
	}

	ctx.closePath();
	ctx.stroke();
}

// 绘制雷达图的函数
function drawRadarMap(radarLayers, polygonPerStep, radarMapTotalSides, radarX, radarY, ctx) {
	let radius = polygonPerStep;

	for ( let j = 0; j < radarLayers; j++ ) {
		drawPolygon(radarMapTotalSides, radius, radarX, radarY, ctx);
		radius = radius + polygonPerStep;
	}
}

polygonPerStep的意思是每一个多边形之间相差多少距离，radarMapTotalSides的意思是雷达图的多边形是几边形：

let canvas = document.getElementById("radar-map");
let ctx = canvas.getContext("2d");
drawRadarMap(5, 40, 10, 300, 300, ctx);

到目前为止我们就利用绘制多边形的函数drawPolygon成功绘制了一个雷达图的雏形：

当前的雷达图还缺少了最外层每一个点的文本，以及连接雷达图中心到最外层点的直线。

连接雷达图里外层

连接雷达图里外层时，要在绘制多边形的时候保存每一层每一个点的坐标，也就是在drawPolygon函数中保存坐标信息。

保存点坐标

在drawRadarMap函数里面声明一个数组axis数组，它专门用于保存每层多边形的每个点坐标信息：

function drawRadarMap(radarLayers, polygonPerStep, radarMapTotalSides, radarX, radarY, ctx) {
	let axis = []; // 用于保存每一个多边形的每一个点坐标
	let radius = polygonPerStep;

	for ( let j = 0; j < radarLayers; j++ ) {
		drawPolygon(radarMapTotalSides, radius, radarX, radarY, axis, j, ctx);
		radius = radius + polygonPerStep;
	}
}

从顺时针开始的第一个点的坐标到最后一个点坐标，以及这些点坐标在第几层多边形上：

function drawPolygon(radarMapTotalSides, radius, radarX, radarY, axis, currentPolygonLayer, ctx) {
	let averageAngle = Math.PI * 2 / sides;
	let increaseAngle = 0;
	let targetX, targetY;

	ctx.beginPath();
	axis.push({ layer: currentPolygonLayer, coords: [] }); // 保存点坐标的数组，
	for ( let i = 0; i < radarMapTotalSides; i++ ) {
		targetX = calcPolygonX(radarX, radius, increaseAngle);
		targetY = calcPolygonY(radarY, radius, increaseAngle);
		ctx.lineTo(targetX, targetY);
		increaseAngle += averageAngle;
		axis[currentPolygonLayer].coords.push({ x: targetX, y: targetY }); // 添加点坐标到数组中
	}

	ctx.closePath();
	ctx.stroke();
}

drawPolygon函数新增了两个参数：axis 和 currentPolygonLayer。axis 就是保存没层多边形点的坐标数组；currentPolygonLayer 就是当前多边形在第几层多边形，比如第一层就是 0。

绘制直线函数

上面的工作是点坐标，目的就是连接雷达图中心点到最外层多边形的每一个点。所以，在这里我们新增一个函数，这个函数专门处理连接直线的函数drawStria：

function drawStria(radarLayers, axis, radarX, radarY, ctx) {
	let coords = axis[axis.length - 1].coords;
	for ( let i = 0; i < radarLayers; i++ ) {
		ctx.beginPath();
		ctx.moveTo(radarX, radarY);
		ctx.lineTo(coords[i].x, coords[i].y);
		ctx.closePath();
		ctx.stroke();
		drawPointText(data, coords, i, radarX, ctx);
	}
}

axis[length - 1].coords代表雷达图中最外层的多边形的所有点坐标。顺时针遍历其中元素，ctx.lineTo(coords[i].x, coords[i].y)从圆点开始依次连接最外层的多边形的点，从而构成一条条直线。