1、創(chuàng)建畫布

<canvas
      id="canvas"
      width="800"
      height="600"
      @mousedown="canvasDown($event)"
      @mousemove="canvasMove($event)"
      @mouseup="canvasUp($event)"
      @mouseleave="canvasLeave($event)"
      ref="canvas"
    >抱歉，您的瀏覽器不支持canvas元素</canvas> //canvas 標(biāo)簽內(nèi)部的元素指的是當(dāng)你的瀏覽器不支持canvas是所展示的內(nèi)容

2、在 mounted 中展示

內(nèi)容還是放在methods中，由mounted展示

mounted() {
  this.show();
}
methods:{
  show(){
      this.canvas = this.$refs.canvas;//指定canvas
      this.ctx = this.canvas.getContext("2d");//設(shè)置2D渲染區(qū)域
      this.ctx.lineWidth = 5;//設(shè)置線的寬度
  }
}

3、根據(jù)canvas中所提供的鼠標(biāo)事件做相應(yīng)的事

這里有一處很多人在寫的簽字版的時候都會遇到的問題，當(dāng)簽字版的功能大致完成之后你會發(fā)現(xiàn)，如果當(dāng)你點下鼠標(biāo)的時候，并不是在canvas區(qū)域內(nèi)部觸發(fā)的mouseup事件，而是將鼠標(biāo)移出canvas區(qū)域外在松開的時候，之后必須要在點擊下canvan事件來觸發(fā)up事件，否則會出現(xiàn)不點擊鼠標(biāo)也會簽字的情況，這是就用到mouseleave，在mouseleave中做mouseup相同的事，就可以避免類似的事情發(fā)生

    canvasDown(e) {
      this.canvasMoveUse = true;
      const canvasX = e.clientX - e.target.offsetLeft;
      const canvasY = e.clientY - e.target.offsetTop + document.documentElement.scrollTop;
      this.ctx.beginPath():  // 移動的起點
      this.ctx.moveTo(canvasX, canvasY);
      
    },
    canvasMove(e) {
      if (this.canvasMoveUse) {
        // 只有允許移動時調(diào)用
        const t = e.target;
        let canvasX;
        let canvasY;
        canvasX = e.clientX - t.offsetLeft;
        canvasY = e.clientY - t.offsetTop + document.documentElement.scrollTop;
        this.ctx.lineTo(canvasX, canvasY);
        this.ctx.stroke();
      }
    },
    canvasUp(e) {
      this.canvasMoveUse = false;
    },
    canvasLeave(e) {
      this.canvasMoveUse = false; 
    },

4、額外按鈕

當(dāng)然，你也可以做一些額外且常見的功能，比如重畫，清空，提交等。
下面我們來實現(xiàn)清空功能，只需要設(shè)置一個按鈕，搭配上相應(yīng)的時間即可

<button @click="clear">
        清空
 </button>

clear(){
        this.ctx.clearRect(0, 0, this.ctx.canvas.width, this.ctx.canvas.height)
    },

提交的時候，通過toDataURL('image/jpg') 可以將canvas轉(zhuǎn)化為base64數(shù)據(jù)

      var base64Img = this.canvas.toDataURL('image/jpg');
      console.log(base64Img);

5、另外各位小伙伴在做提交的時候，要注意設(shè)置判斷不能提交空頁面，以及圖片格式問題。有問題歡迎在屏幕下方的留言板對我進(jìn)行評價留言，喜歡的點個關(guān)注，點關(guān)注，不迷路哦親親。

qinqin.gif