前言
使用canvas来绘制,无动画过程的版本,支持圆形和线条,支持多角,但数值位置定位不够精确可供参考。
准备
回顾一下类的使用,打算用类来实现一个
class CanvasCapabilityMap {
// 构造函数
constructor(mapRef, mapOption) {
this.mapOption = mapOption
this.mapRef = mapRef
}
// 类方法
initCapabilityMap() {
}
}
const canvasMap = new CanvasCapabilityMap();
canvasMap.initCapabilityMap(list)
再看一眼canvas
const ctx = canvas.getContext('2d') // 获取画笔
ctx.beginPath(); // 开始路径
ctx.moveTo(0, 0) // 移动到开始位置
ctx.lineTo(x, y) // 画线
ctx.closePath(); // 结束路径
ctx.stroke(); // 描边
ctx.fill(); // 填充
// 画圆/圆弧
// x,y表示圆弧的圆心坐标;
// radius表示圆弧的半径;
// startAngle表示圆弧的起始弧度,与x轴正方向的夹角;
// endAngle表示圆弧的终止弧度,与x轴正方向的夹角;
// anticlockwise表示是否逆时针,取值为true或false。
ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise);
开整
画个圆
// 画虚线圆
drawDashRound (x, y, radius, step, ctx) {
const count = Math.floor(360 / step);
step = step / 180 * Math.PI * 2;
for (let b = 0, e = step / 2; e <= 360; b += step, e += step) {
ctx.beginPath()
ctx.arc(x, y, radius, b, e);
ctx.stroke();
}
}
// 画实线圆
drawArc(half, r, ctx) {
ctx.beginPath();
ctx.arc(half, half, r, 0, 2*Math.PI)
ctx.stroke();
ctx.closePath();
}
获取圆弧上的点的位置(能力形状)
// 圆等分半径点
getPoint(r, sx, sy, count){
let point = [];
let radians = (Math.PI / 180) * Math.round(360 / count);
for(let i = 0; i < count; i++){
let x = sx + r * Math.sin(radians * i),
y = sy + r * Math.cos(radians * i);
point.push({ x, y } );
}
return point
}
加上连线,再加上一点点细节。