canvas api 2d 畫法：

let ctx = tar_ctx.getContext("2d");

1. 使用 .arc 函式畫點

2. 使用 .stroke 函式連線點

幾何特性：

1. 正凸多邊形，多有點到重心距離相等

2. 正凸多邊形，所有點都可以落在同一圓上

3. 該圓的圓心就是正凸多邊形的重心

示例：

步驟：

1. 繪製正凸多邊形

2. 繪製雷達圖區域

// 帶填充資料
let list = [  // 並非為圖例資料，可自由分配 0~1 之間
.9,
.8,
1,
.7,
.8,
.8
]

// 參考圓引數
let x = 200;
let y = 200;
let r = 80;

// 多邊形邊數目
let edges = list.length;

/** 正多邊形背景部分 **/
ctx.beginPath(); // 路徑記錄開始

for (let i = 0; i < edges; i++) {
    // .5 * Math.PI 為旋轉偏移量
    ctx.arc(x, y, r, 2 * Math.PI * i / edges - .5 * Math.PI, 2*Math.PI * i / edges - .5 * Math.PI);
}

ctx.closePath(); // 關閉路徑
ctx.stroke();       // 點連線

/** 雷達填充部分 **/
ctx.fillStyle = 'yellow';
ctx.beginPath();

for (let i = 0; i < list.length; i++) {
     // 畫點，頂點到重心的距離上擷取百分比
     ctx.arc(x, y, r * list[i], 2*Math.PI * i / list.length - .5 * Math.PI,2*Math.PI * i / list.length - .5 * Math.PI);

}

ctx.closePath();
ctx.fill();
 

注：基本思想，canvas api 畫圖，是根據點位，進行連線；用畫圓函式確定點位，根據閉合連線進行內部填充；