canvas 正多邊形及其雷達圖畫的一種畫法
阿新 • • 發佈:2018-12-15
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 畫圖,是根據點位,進行連線;用畫圓函式確定點位,根據閉合連線進行內部填充;