canvas图层添加拖拽事件

<template>
  <div style="height: 100%;text-align: center">
    <canvas id="cvs" width="600" height="600"></canvas>
  </div>
</template>

<script>
  export default {
    name: "a6",
    data() {
      return {};
    },
    mounted() {
      this.drawCanvas()
    },
    methods: {
      drawCanvas() {
        let cvs = document.getElementById('cvs')
        let ctx = cvs.getContext("2d")
        let eles = [{
          type: 'Circle',
          x: 300,
          y: 300,
          r: 10,
          isPointInPath: false,
          ev: null
        }]
        this.beginDraw(ctx, eles)

        cvs.onmousedown = dev => {
          eles.map(ele => {
            ele.ev = dev
          })
          this.beginDraw(ctx, eles)
          eles.map(ele => {
            ele.ev = null
          })
          cvs.onmousemove = mev => {
            eles.map(ele => {
              if (ele.isPointInPath) {
                ele.x = mev.offsetX
                ele.y = mev.offsetY
              }
            })
            this.beginDraw(ctx, eles)
          }
        }
        document.onmouseup = cvs.onmouseup = function (uev) {
          cvs.onmousemove = null
          eles.map(ele => {
            ele.isPointInPath = false
            ele.ev = null
          })
        }
      },
      beginDraw(ctx, eles) {
        ctx.clearRect(0, 0, 600, 600)
        eles.map(ele => {
          this[`draw${ele.type}`](ctx, ele)
        })
      },
      drawCircle(ctx, ele) {
        ctx.save()
        ctx.beginPath()
        ctx.arc(ele.x, ele.y, ele.r, 0, -2 * Math.PI, true);
        ele.ev && (ele.isPointInPath = ctx.isPointInPath(ele.ev.offsetX, ele.ev.offsetY))
        ctx.strokeStyle = 'red';
        ctx.stroke();
        ctx.restore()
      }
    }
  }
</script>

<style scoped>
  #cvs {
    border: 1px solid black;
    margin-top: 20px;
  }
</style>