基于vue 在平面图上画路线图 canvas

效果图：

**实现思路：**搜了很多都是在地图上做轨迹图，所以想到了用canvas画线，平面图是作为背景图展示，只需要提供各个巡逻点的坐标信息，就可以完成路线的绘制，具体代码中也有注释

完整代码：

<template>
  <div class="bg">
      <canvas id="mycanvas" width="1000" height="700"></canvas>
  </div>
</template>
<script>
export default {
  data() {
    return {
      pointData: [
        {
          x1: 900,
          y1: 100,
          x2: 80,
          y2: 75,
          text: '巡逻点1',
        },
        {
          x1: 80,
          y1: 75,
          x2: 200,
          y2: 300,
          text: '巡逻点2',
        },
        {
          x1: 200,
          y1: 300,
          x2: 580,
          y2: 500,
          text: '巡逻点3',
        },
        {
          x1: 580,
          y1: 500,
          x2: 900,
          y2: 100,
          text: '巡逻点4',
        },
      ],
    };
  },
  created() {
    this.doDraw();
  },
  methods: {
    doDraw() {
      // 获取canvas
      let canvas = document.getElementById('mycanvas');
      // 由于弹窗，确保已获取到
      let a = setInterval(() => {
        // 重复获取
        canvas = document.getElementById('mycanvas');
        if (!canvas) {
          return false;
        } else {
          clearInterval(a);
          // 可以理解为一个画笔，可画路径、矩形、文字、图像
          let context = canvas.getContext('2d');
          this.clearCanvas(context, canvas);
          this.pointData.forEach((item) => {
            const { x1, y1, x2, y2, text } = item;

            context.lineWidth = 3; //线条的宽度
            context.lineCap = 'round'; //线帽效果
            context.strokeStyle = 'rgb(20, 20, 235)'; //线条颜色
            context.beginPath();

            // 添加阴影
            context.shadowColor = 'rgb(20, 20, 235)';
            context.shadowOffsetX = 0;
            context.shadowOffsetY = 0;
            context.shadowBlur = 6;

            context.setLineDash([5, 10]); // [1,0]为实线

            context.moveTo(x1, y1);
            context.lineTo(x2, y2);

            //文字
            context.font = '16px Arial bolder';
            context.fillStyle = 'red';
            context.fillText(text, x1, y1);

            context.stroke();
          });
          //   绘制矩形
          //   context.strokeStyle = 'red';
          //   context.lineWidth = 3;
          //   context.strokeRect(0, 0, 300, 300);
          // 绘制线条
          //   context.moveTo(0, 0);
          //   context.lineTo(100, 50);
          //   context.strokeStyle = 'red';
          //   context.lineWidth = 3;
          //   context.stroke();
            
        }
      }, 1);
    },
    clearCanvas(ctx, canvas) {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
    },
  },
};
</script>
<style lang="scss" scoped>
#mycanvas {
  border: 1px solid rgb(199, 198, 198);
}
.bg {
  width: 1000px;
  height: 700px;
  background: url('../assets/images/plat.jpg');
  background-size: 100% 100%;
}
</style>