1、页面代码

<canvas id="canvas" width="800" height="600" ref="canvas"></canvas>

 2、初始化绘制信息

img: new Image(), // 背景图片缓存
context: {}, // canvas对象

/**
* describe 初始化绘制信息
* @author JKD
* @data 2019/4/20 16:56
*/
initDraw () {
  // 初始化画布
  this.img.src = this.imageUrl
  const canvas = this.$refs.canvas
  this.context = canvas.getContext('2d')
  this.context.drawImage(this.img, 0, 0, 800, 600)
  this.context.strokeStyle = '#FF0000'
}

 3、在画布上画图

/**
* describe 在画布上画图
* @author JKD
* @data 2019/4/20 16:57
*/
showMaterialMark (start_x, start_y, end_x, end_y, mark_type) {
  if (mark_type === 'line') {
    this.context.beginPath()
    this.context.moveTo(start_x, start_y)
    this.context.lineTo(end_x, end_y)
    this.context.stroke()
    this.context.closePath()
  }
  if (mark_type === 'circular') {
    this.paramEllipse(this.context, (start_x + end_x) / 2, (start_y + end_y) / 2,
      (end_x - start_x) / 2, (end_y - start_y) / 2)
  }
  if (mark_type === 'rectangle') {
    this.context.beginPath()
    this.context.strokeRect(start_x, start_y, (end_x - start_x), (end_y - start_y))
    this.context.stroke()
    this.context.closePath()
  }
}

4、画圆的方法

/**
* describe 画圆方法
* @author JKD
* @data 2019/4/20 16:57
*/
paramEllipse (context, x, y, a, b) {
  var step = (a > b) ? 1 / a : 1 / b
  context.beginPath()
  context.moveTo(x + a, y)
  for (var i = 0; i < 2 * Math.PI; i += step) {
    context.lineTo(x + a * Math.cos(i), y + b * Math.sin(i))
  }
  context.closePath()
  context.stroke()
}