Vue项目实现图片标注的功能（绘制矩形，圆，直线和点，撤销上一步和清空画布）

 项目中包含绘制矩形，圆，直线和点，撤销上一步和清空画布功能。

技术使用canvas实现，废话不多说上代码：

1.公共方法

var history = []
function Point (x, y, type) {
  this.x = x
  this.y = y
  this.type = type // 左击 1  右击 3
}
function windowToCanvas (e, mycanvas) {
  // 返回元素的大小以及位置
  var rect = mycanvas.getBoundingClientRect()
  // rect 的宽度会加上 canvas 的 border 会影响精度
  return new Point(e.clientX - rect.left * (mycanvas.width / rect.width),
    e.clientY - rect.top * (mycanvas.height / rect.height), e.which)
}
function showLastHistory (ctx, history) {
  ctx.putImageData(history[history.length - 1]['data'], 0, 0)
}
function addHistoy (history, ctx, mycanvas) {
  history.push({
    data: ctx.getImageData(0, 0, mycanvas.width, mycanvas.height)
  })
}

2.图形绘制方法抽取

// 绘制矩形
drawerRect (ctx, left, top, w, h) {
      ctx.strokeStyle = '#f00000'// 画笔颜色
      ctx.lineWidth = '2' // 画笔粗细
      ctx.save()
      ctx.beginPath()
      ctx.rect(left, top, w, h)
      ctx.stroke()
      ctx.restore()
      return {
        data: [left, top, w, h]
      }
    },
// 绘制圆
drawerCircle (ctx, x, y, r) {
      ctx.strokeStyle = '#f00000'// 画笔颜色
      ctx.lineWidth = '2' // 画笔粗细
      ctx.beginPath()// 开始路径
      ctx.arc(x, y, r, 0, Math.PI * 2, true)// 参数依次为圆心坐标x,y，半径，开始结束角，绘制方向顺时针
      ctx.stroke()
      ctx.restore()
      return {
        data: [x, y, r]
      }
},
// 绘制直线
drawerLine (ctx, x, y, z, n) {
      ctx.save()
      ctx.fillStyle = '#f00000'
      ctx.lineWidth = '2' // 画笔粗细
      ctx.strokeStyle = '#f00000'// 画笔颜色
      ctx.beginPath()
      ctx.moveTo(x, y)
      ctx.lineTo(z, n)
      ctx.stroke()
      ctx.restore()
      return {
        data: [x, y, z, n]
      }
},
// 绘制点
drawerPoint (ctx, x, y) {
      ctx.save()
      ctx.fillStyle = '#f00000'
      ctx.strokeStyle = '#f00000'// 画笔颜色
      ctx.beginPath()
      ctx.arc(x, y, 3, 0, Math.PI * 2, true)  
      ctx.closePath()
      ctx.fill()
      ctx.restore()
      this.posArray.push({data: [x, y]})
},

3.具体绘制的方法及事件

// 绘制的方法及事件，根据当前选择的工具进行不同的方法绘制图形
drawer () {
      var mycanvas = document.getElementById('mycanvas')
      var ctx = mycanvas.getContext('2d')
      let that = this
      if (this.renameInfo.tool === '1') {
        mycanvas.onclick = null
        mycanvas.onmousedown = function (e) {
          that.tempPos = []
          e.preventDefault()
          var mousedown = windowToCanvas(e, mycanvas)
          mycanvas.onmousemove = function (e) {
            e.preventDefault()
            showLastHistory(ctx, history) // 每次绘制先清除上一次
            let point = windowToCanvas(e, mycanvas)
            let w = Math.abs(point.x - mousedown.x)
            let h = Math.abs(point.y - mousedown.y)
            let left = point.x > mousedown.x ? mousedown.x : point.x
            let top = point.y > mousedown.y ? mousedown.y : point.y
            let pos = that.drawerRect(ctx, left, top, w, h)
            that.tempPos.push(pos)
          }
          mycanvas.onmouseup = function (e) {
            e.preventDefault()
            addHistoy(history, ctx, mycanvas) // 保存上一次数据
            mycanvas.onmousemove = null
            that.posArray.push(that.tempPos[that.tempPos.length - 1])
          }
        }
        addHistoy(history, ctx, mycanvas) // 添加一张默认的数据
      } else if (this.renameInfo.tool === '2') {
        // 清除事件
        mycanvas.onmousedown = null
        mycanvas.onmousemove = null
        mycanvas.onmouseup = null
        mycanvas.onclick = null
        mycanvas.onmousedown = function (e) {
          that.tempPos = []
          e.preventDefault()
          var mousedown = windowToCanvas(e, mycanvas)
          mycanvas.onmousemove = function (e) {
            e.preventDefault()
            showLastHistory(ctx, history) // 每次绘制先清除上一次
            let point = windowToCanvas(e, mycanvas)
            var rx = (point.x - mousedown.x) / 2
            var ry = (point.y - mousedown.y) / 2
            var r = Math.sqrt(rx * rx + ry * ry)
            let pos = that.drawerCircle(ctx, rx + mousedown.x, ry + mousedown.y, r)
            that.tempPos.push(pos)
          }
          mycanvas.onmouseup = function (e) {
            e.preventDefault()
            addHistoy(history, ctx, mycanvas) // 保存上一次数据
            mycanvas.onmousemove = null
            that.posArray.push(that.tempPos[that.tempPos.length - 1])
          }
        }
        addHistoy(history, ctx, mycanvas) // 添加一张默认的数据
      } else if (this.renameInfo.tool === '3') {
        mycanvas.onmousedown = null
        mycanvas.onmousemove = null
        mycanvas.onmouseup = null
        mycanvas.onclick = null
        mycanvas.onmousedown = function (e) {
          that.tempPos = []
          e.preventDefault()
          var mousedown = windowToCanvas(e, mycanvas)
          mycanvas.onmousemove = function (e) {
            e.preventDefault()
            showLastHistory(ctx, history) // 每次绘制先清除上一次
            let point = windowToCanvas(e, mycanvas)
            let pos = that.drawerLine(ctx, mousedown.x, mousedown.y, point.x, point.y)
            that.tempPos.push(pos)
            console.log(that.tempPos)
          }
          mycanvas.onmouseup = function (e) {
            e.preventDefault()
            addHistoy(history, ctx, mycanvas) // 保存上一次数据
            mycanvas.onmousemove = null
            that.posArray.push(that.tempPos[that.tempPos.length - 1])
          }
        }
        addHistoy(history, ctx, mycanvas) // 添加一张默认的数据
      } else if (this.renameInfo.tool === '4') {

      } else if (this.renameInfo.tool === '5') {
        mycanvas.onmousedown = null
        mycanvas.onmousemove = null
        mycanvas.onmouseup = null
        mycanvas.onclick = function (event) {
          var rect = mycanvas.getBoundingClientRect()
          var CanvasPos = {
            x: event.clientX - rect.left * (mycanvas.width / rect.width),
            y: event.clientY - rect.top * (mycanvas.height / rect.height)
          }
          that.drawerPoint(ctx, CanvasPos.x, CanvasPos.y)
        }
      }
    },

4.重置画布和撤销上一步

// 重置
resetMap () {
      // 标注的信息都放在这个数组中
      this.posArray = []
      history = [history[0]]
      var mycanvas = document.getElementById('mycanvas')
      var ctx = mycanvas.getContext('2d')
      ctx.clearRect(0, 0, mycanvas.width, mycanvas.height)
      addHistoy(history, ctx, mycanvas)
},
// 取消上一步操作
cancel () {
      if (history.length > 1) {
        console.log(history)
        this.posArray.pop()
        history.pop()
        var mycanvas = document.getElementById('mycanvas')
        var ctx = mycanvas.getContext('2d')
        showLastHistory(ctx, history)
      }
},

以上便是全部代码，可根据自己的需求进行调整。