canvas坐标点连接，生成圆点，箭头方向

canvasDraw.vue

<template>
  <div class="canvasDrawer">
    <canvas id="canvas" width="500" height="500" @mouseenter="showCabInfo($event,true)" @mouseleave="showCabInfo($event,false)" @mousedown="dragCabinet($event)"></canvas>
    鼠标悬浮在画布中当前坐标
    <div class="btns">
      <button id='start' @click="start">开始</button>
      <button id='continue' @click="continues">手动连接点</button>
    </div>
  </div>
</template>
<script>
//获取指定的canvas元素
var canvas
//调用canvas元素的getContext 方法访问获取2d渲染的上下文
var context
import myCanvas from "./canvasDraw.js";
export default {
  mixins: [myCanvas],
  data () {
    return {
      dotarr: [
        { "x": 280, "y": 200 },
        { "x": 180, "y": 150 },
        { "x": 100, "y": 250 },
        { "x": 280, "y": 300 },
        { "x": 180, "y": 400 },
        { "x": 80, "y": 350 }
      ],
    }
  },
  props: {},
  computed: {

  },
  mounted () {
    canvas = document.getElementById('canvas');
    context = canvas.getContext('2d');
    //this.context = this.$refs.canvas.getContext('2d');
    this.start()
  },
  methods: {
    /* $ ("p").mouseleave(function () {
      $("p").css("background-color", "#E9E9E4");
    }); */
    showCabInfo (event, bl) {
      /* offsetX: 510
      offsetY: 40 */
      if (bl) {
        console.log(event.offsetX, event.offsetY, '移入', event)
      } else {
        console.log(event.offsetX, event.offsetY, '移出', event)
      }
    },
    dragCabinet (event, bl) {
      console.log('移入移出2', event)
    },
    start () {
      context.clearRect(0, 0, canvas.width, canvas.height);
      this.drawline(context, this.dotarr);
    },
    continues () {
      var index = parseInt(localStorage.getItem('index'));
      var newdots = dotarr.slice(index + 1);
      console.log(newdots);
      drawline(newdots);
      console.log('继续');
    }
  }
}
/* $("#app").on("mousedown", function (event) {
  event = event || window.event;
  if (event.target.className.indexOf("navigationDiv") < 0 && event.target.className.indexOf("zoomNavigation") < 0) {
    return;
  }
  isDown = true;
  clientX = event.clientX;
  clientY = event.clientY;
  offsetLeft = navigationDiv.offsetLeft;
  offsetTop = navigationDiv.offsetTop;
}); */
</script>
<style lang="less" scoped>
  #canvas {
    border: 1px solid red;
  }
</style>

canvasDraw.js

export default {
  data () {
    return {
    }
  },
  created () {
  },
  mounted () {
  },
  methods: {
    /* 坐标点线连接函数 */
    drawline (context, dots) {
      for (var i in dots) {
        var dot = dots[i];
        var todot = dots[i];
        var time = '';
        localStorage.setItem('length', dots.length);
        if ((parseInt(i) + 1) < dots.length) {
          todot = dots[parseInt(i) + 1];
        }
        context.beginPath();
        context.moveTo(dot.x, dot.y); //开始点坐标
        context.lineTo(todot.x, todot.y);//下一个点坐标
        context.closePath();
        context.stroke();
        if (i != dots.length - 1) {
          this.drawArrow(context, dot.x, dot.y, (dot.x + todot.x) / 2, (dot.y + todot.y) / 2, 35, 10, 2, 'black');
        }
        this.makearc(context, dot.x, dot.y, 4, 0, 180, 'black')
      }
    },
    /* 绘制圆点函数
     ctx：Canvas绘图环境
     x, y：坐标
     r,     圆的半径//请把起始角设置为 0，结束角设置为 2*Math.PI。
     s  起始角，以弧度计。（弧的圆形的三点钟位置是 0 度）。
     e     结束角，以弧度计。
     color：颜色 */
    makearc (ctx, x, y, r, s, e, color) {
      ctx.beginPath();
      ctx.fillStyle = color;
      ctx.arc(x, y, r, s, e);
      ctx.fill();
    },
    /* 绘制箭头函数
    ctx：Canvas绘图环境
    fromX, fromY：起点坐标（也可以换成p1，只不过它是一个数组）
    toX, toY：终点坐标 (也可以换成p2，只不过它是一个数组)
    theta：三角斜边一直线夹角
    headlen：三角斜边长度
    width：箭头线宽度
    color：箭头颜色 */
    drawArrow (ctx, fromX, fromY, toX, toY, theta, headlen, width, color) {
      width = 1;//箭头宽度设置为1
      var theta = theta || 30,
        headlen = headlen || 10,
        width = width || 1,
        color = color || '#000',
        angle = Math.atan2(fromY - toY, fromX - toX) * 180 / Math.PI,
        angle1 = (angle + theta) * Math.PI / 180,
        angle2 = (angle - theta) * Math.PI / 180,
        topX = headlen * Math.cos(angle1),
        topY = headlen * Math.sin(angle1),
        botX = headlen * Math.cos(angle2),
        botY = headlen * Math.sin(angle2);
      ctx.save();
      ctx.beginPath();
      var arrowX, arrowY;
      arrowX = toX + topX;
      arrowY = toY + topY;
      ctx.moveTo(arrowX, arrowY);
      ctx.lineTo(toX, toY);
      arrowX = toX + botX;
      arrowY = toY + botY;
      ctx.lineTo(arrowX, arrowY);
      ctx.strokeStyle = color;
      ctx.lineWidth = width;
      ctx.stroke();
      ctx.restore();
    },
  }
}