请帮我使用js Canvas写一个正五边形雷达图，每个点需要显示一个名字

好的，以下是使用 Canvas 绘制正五边形雷达图，并在每个点上显示名称的示例代码：

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

const center_x = 200;
const center_y = 200;
const radius = 150;
const n = 5;
const attributes = ['属性1', '属性2', '属性3', '属性4', '属性5'];
const data = [0.6, 0.8, 0.5, 0.7, 0.9]; // 数据值，范围为 [0, 1]

// 绘制正五边形
ctx.beginPath();
for (let i = 0; i < n; i++) {
  const x = center_x + radius * Math.sin(2 * Math.PI * i / n);
  const y = center_y - radius * Math.cos(2 * Math.PI * i / n);
  ctx.lineTo(x, y);
}
ctx.closePath();
ctx.stroke();

// 连接数据点
ctx.beginPath();
for (let i = 0; i < n; i++) {
  const x = center_x + radius * Math.sin(2 * Math.PI * i / n) * data[i];
  const y = center_y - radius * Math.cos(2 * Math.PI * i / n) * data[i];
  ctx.lineTo(x, y);
}
ctx.closePath();
ctx.stroke();

// 添加属性名称和数据点名称
for (let i = 0; i < n; i++) {
  const x = center_x + (radius + 20) * Math.sin(2 * Math.PI * i / n);
  const y = center_y - (radius + 20) * Math.cos(2 * Math.PI * i / n);
  // 添加属性名称
  ctx.fillText(attributes[i], x, y);
  // 添加数据点名称
  const point_x = center_x + radius * Math.sin(2 * Math.PI * i / n) * data[i];
  const point_y = center_y - radius * Math.cos(2 * Math.PI * i / n) * data[i];
  ctx.fillText(`${attributes[i]}：${data[i]}`, point_x, point_y);
}

注意，以上代码仅作为示例参考，具体实现方式可以根据需要进行调整和优化。