canvas绘制圆、圆环、文字、坐标系

什么是canvas?

HTML5canvas元素用于图形的绘制，通过脚本 (通常是JavaScript)来完成.
canvas标签只是图形容器，您必须使用脚本来绘制图形。
你可以通过多种方法使用 canvas 绘制路径,盒、圆、字符以及添加图像

代码实现：

代码实现：
效果主要使用canvas来实现。
html：

        <div style='background:#000000;margin-left:2px;width:180px;'>
              <canvas id='draw_phar' width='180' height='132'></canvas>
              </div>

js:
js主要实现数据处理、绘制2步。
数据获取及处理：数据通过请求api获取，由于原始获取数据是经纬度，需要通过相关代码来转换计算漂移点与实际基准位置的距离。具体实现参考代码。
//获取雷达图数据

function getRtuLatlngHist(){
  api
  .callApi("/navmark/sx_phar/rtu_latlng_hist",   {
      code: data.rtuCode
  })
  .then((res) => {
      if(res.code==200){
      drawLatlng(res.data);
      }else{ proxy.$modal.msgErroe(res.msg);}
  });
}
//绘制雷达图
function drawLatlng(arr){
 let dis =[];let length =arr.length-1;
 for(let i =0;i<length;i++){
   dis.push([parseFloat(arr[length].Lat),parseFloat(arr[length].Lng),parseFloat(arr[i].Lat),parseFloat(arr[i].Lng)])
 }
 if(dis.length>0){
 let _data =getDisData(dis);
 drawPharAdr(_data);
 }else{
   let _data ={
     LngLatData:[],PharDis:0
   };
   drawPharAdr(_data);
 }
}
//计算位置偏移 获取偏移数据
function getDisData(dis) {
  var obj = {};
  //obj.phar_latlng = data.LngLatData;
  obj.PharDis = getDisByLatlng(dis[0][1], dis[0][0], dis[0][3], dis[0][2]);
  obj.LngLatData = [];
  for (let i = 0; i < dis.length; i++) {
    var _point = {};
    _point.X = getDisByLatlng(dis[i][1], dis[i][0], dis[i][3], dis[i][0]);
    if (_point.X > 85.0)
      _point.X = 85.0;
    _point.Y = getDisByLatlng(dis[i][1], dis[i][0], dis[i][1], dis[i][2]);
    if (_point.Y > 85.0)
      _point.Y = 85.0;
    if (dis[i][0] >= dis[i][2]) {//第二、三象限
      if (dis[i][1] >= dis[i][3]) {//第3象限
        _point.X = 0.00 - _point.X;
        _point.Y = 0.00 - _point.Y;
      }
      else {//第2象限
        _point.X = 0.00 - _point.X;
        _point.Y = _point.Y;
      }
    }
    else {//第一、四象限
      if (dis[i][1] >= dis[i][3]) {//第4象限
        _point.X = _point.X;
        _point.Y = 0.00 - _point.Y;
      }
      else {//第1象限
        _point.X = _point.X;
        _point.Y = _point.Y;
      }
    }
    obj.LngLatData.push(_point);
  }
  return obj;
}
//距离计算
function getDisByLatlng(lat1, lng1, lat2, lng2) {
  var radLat1 = lat1 * Math.PI / 180.0;
  var radLat2 = lat2 * Math.PI / 180.0;
  var a = radLat1 - radLat2;
  var b = lng1 * Math.PI / 180.0 - lng2 * Math.PI / 180.0;
  var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) + Math.cos(radLat1) * Math.cos(radLat2) * Math.pow(Math.sin(b / 2), 2)));
  s = s * 6378.137;
  s = Math.round(s * 10000) / 10;
  s = Math.abs(s);
  s = s.toFixed(1);
  return s;
}

绘制：
绘制先绘制文字、再绘制圆环和分割线、最后绘制飘移点。具体坐标和距离计算参考代码。

function drawPharAdr(_data) {
  var obj = {};
  obj.phar_latlng = _data.LngLatData;
  obj.leng = _data.PharDis;
  //距离
  var length = obj.leng + "m";
  var c = document.getElementById("draw_phar");
  c.height = c.height;  //清空
  var draw = c.getContext("2d");
  draw.font = "12px bold 黑体";
  draw.fillStyle = "#ff0";
  draw.textAlign = "center";
  draw.textBaseline = "middle";
  // 绘制文字（参数：要写的字，x坐标，y坐标）
  draw.fillText(length, 30, 10);
  draw.font = "10px bold 黑体"; draw.fillStyle = "#B32BD5"; draw.textAlign = "center"; draw.textBaseline = "middle"; draw.fillText("15-", 10, 30);
  draw.font = "10px bold 黑体"; draw.fillStyle = "#EE1111"; draw.textAlign = "center"; draw.textBaseline = "middle"; draw.fillText("50-", 10, 50);
  draw.font = "10px bold 黑体"; draw.fillStyle = "#ffffff"; draw.textAlign = "center"; draw.textBaseline = "middle"; draw.fillText("85-", 10, 80);
  //绘制圆环
  var ring = "#B32BD5";
  draw.strokeStyle = ring;
  draw.lineWidth = 1;
  draw.beginPath();
  var _obj = {x: 90, y: 70, r: 60};
  draw.arc(_obj.x, _obj.y, _obj.r / 3, 0, Math.PI * 2, false);
  // 设置圆环
  draw.stroke();
  ring = "#EE1111";
  draw.strokeStyle = ring;
  draw.beginPath();
  draw.arc(_obj.x, _obj.y, _obj.r * 2 / 3, 0, Math.PI * 2, false);
  draw.stroke();
  ring = "#ffffff"; draw.strokeStyle = ring; draw.beginPath(); draw.arc(_obj.x, _obj.y, _obj.r, 0, Math.PI * 2, false); draw.stroke();
  draw.moveTo(_obj.x - _obj.r, _obj.y);
  draw.lineTo(_obj.x + _obj.r, _obj.y);
  draw.stroke()
  draw.moveTo(_obj.x, _obj.y - _obj.r); draw.lineTo(_obj.x, _obj.y + _obj.r); draw.stroke()
  //画漂移点
  for (let i = 0; i < obj.phar_latlng.length; i++) {
    draw.fillStyle = "yellow";
    draw.beginPath();let x=_obj.x + obj.phar_latlng[i].X * _obj.r / 170;let y=_obj.y - obj.phar_latlng[i].Y * _obj.r / 170;
    draw.arc(x, y, i + 2, 0, Math.PI * 2, true);        //坐标系旋转90度，变换+x,-y
    draw.closePath();                        //结束
    draw.fill();
  }
}