canvas画布制作签名

使用canvas画布绘制签名，可撤回上一步、重新绘画、保存签名到电脑，先看效果....

 一、基本结构

<template>
  <div class="signature">
    <canvas class="my-canvas"></canvas>
    <div class="btn-group">
      <el-button type="primary" @click="reStart">重新开始</el-button>
      <el-button type="primary" @click="reCall">撤回</el-button>
      <el-button type="primary" @click="downloadSignature">下载签名</el-button>
    </div>
  </div>
</template>

二、绘制

2.1 鼠标事件监听

通过监听鼠标的按下、移动事件，通过canvas来连接移动过程中所经过的点来形成线条，这样就可以绘制出签名了

methods:{
    addListener(){
      const canvas = document.querySelector(".my-canvas")
      canvas.width = 900
      canvas.height = 400
      const context = canvas.getContext("2d")
      let isStartClick = false
      let isStartMove = false //是否有绘制操作
      canvas.addEventListener("mousedown",(e)=>{
        isStartClick = true
        context.beginPath()
        //canvas以画布左上角为(0,0)点
        context.moveTo(e.pageX - canvas.offsetLeft, e.pageY  - canvas.offsetTop)
      })
      canvas.addEventListener("mousemove",(e)=>{
        if(isStartClick){
          context.lineTo(e.pageX  - canvas.offsetLeft, e.pageY - canvas.offsetTop)
          //移动的过程中连线
          context.stroke()
          isStartMove = true
        }
      })
      canvas.addEventListener("mouseup",()=>{
        //完成一次绘制操作 记录对应的索引和canvas的base64值
        if(isStartMove){
            this.stepIndex++
            this.base64HistoryList.push(canvas.toDataURL())
        }
        isStartClick = false
        isStartMove = false
      })
    },
}

2.2 重新开始

 调用context.clearRect(0, 0, canvas.width, canvas.height)方法 可以清空画布；

重置canvas画布的宽度或者高度属性也可以清空画布==> canvas.width = canvas.width

reStart(){
  let canvas = document.querySelector(".my-canvas")
  let context = canvas.getContext("2d")
  context.clearRect(0, 0, canvas.width, canvas.height);
  this.stepIndex = -1
  this.base64HistoryList = []
},

2.3 撤回

使用一个索引变量stepIndex 和base64历史记录数组base64HistoryList，索引变量和数组里历史记录值的索引相对应。base64HistoryList数组记录了每一次绘画动作结束之后的base64

 data(){
    return{
      stepIndex:-1, //base64HistoryList数组索引
      base64HistoryList:[], //存储每一次绘制操作完成之后当前canvas的base64
    }
  },

 将上一步存储的图像绘制在canvas画布上

reCall(){
  if(this.stepIndex >= 0){
    //去掉当前绘制历史记录,并将索引-1
    this.base64HistoryList.pop()
    this.stepIndex--
    let canvas = document.querySelector(".my-canvas")
    let context = canvas.getContext("2d")
    //在新画布上绘制图像
    context.clearRect(0, 0, canvas.width, canvas.height);
    if(this.stepIndex !== -1){
      const canvasImage =  new Image()
      canvasImage.src =this.base64HistoryList[this.stepIndex]
      canvasImage.addEventListener("load",()=>{
        context.drawImage(canvasImage,0,0)
      })
    }
  }else{
    this.$message.info("不能再撤回了!")
  }
}

2.4 下载签名

downloadSignature(){
  let linkElement = document.createElement("a")
  let finishedCanvas =  document.querySelector(".my-canvas")
  linkElement.download = "签名"
  //将canvas对象转换为base64位编码
  linkElement.href = finishedCanvas.toDataURL("image/png")
  linkElement.click()
},

 如图：