canvas 正多边形及其雷达图画的一种画法

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 画图，是根据点位，进行连线；用画圆函数确定点位，根据闭合连线进行内部填充；