在生活中我們使用到電子簽名最多的地方可能就是銀行了，每次都會(huì)讓你留下大名。今天我們就要用vue實(shí)現(xiàn)一個(gè)電子簽名的面板

想要繪制圖形，第一步想到的就是使用canvas標(biāo)簽，在之前的文章里我們使用canvas實(shí)現(xiàn)了一個(gè)前端生成圖形驗(yàn)證碼的組件，被吐槽不夠安全，那么這個(gè)電子簽名組件想必不會(huì)被吐槽了吧~

canvas

<canvas> 標(biāo)簽是 HTML 5 中的新標(biāo)簽。<canvas> 標(biāo)簽只是圖形容器，您必須使用腳本來(lái)繪制圖形。

canvas標(biāo)簽本身是沒(méi)有繪圖能力的，所有的繪制工作必須在 JavaScript 內(nèi)部完成。

使用canvas繪圖有幾個(gè)必要的步驟：

1. 獲取canvas元素
2. 通過(guò)canvas元素創(chuàng)建context對(duì)象
3. 通過(guò)context對(duì)象來(lái)繪制圖形

在當(dāng)前電子簽名需求中，由于簽名其實(shí)是由一條條線組成的，因此我們會(huì)用到以下幾個(gè)方法：

1. beginPath() ：開(kāi)始一條路徑或重置當(dāng)前的路徑
2. moveTo()：把路徑移動(dòng)到畫布中的指定點(diǎn)，不創(chuàng)建線條
3. lineTo()：添加一個(gè)新點(diǎn)，然后在畫布中創(chuàng)建從該點(diǎn)到最后指定點(diǎn)的線條
4. stroke()：繪制已定義的路徑
5. closePath()：創(chuàng)建從當(dāng)前點(diǎn)回到起始點(diǎn)的路徑

事件

想要在canvas中繪圖，還需要綁定幾個(gè)特定的事件，而這些事件在pc端和手機(jī)端不盡相同

pc端事件

• mousedown
• mousemove
• mouseup

手機(jī)端事件

• touchstart
• touchmove
• touchend

核心代碼

初始化canvas標(biāo)簽并綁定事件

<canvas         @touchstart="touchStart"         @touchmove="touchMove"         @touchend="touchEnd"         ref="canvasF"         @mousedown="mouseDown"         @mousemove="mouseMove"         @mouseup="mouseUp"       ></canvas>

獲取畫筆

在mounted生命周期初始化

mounted() {     let canvas = this.$refs.canvasF;     canvas.height = this.$refs.canvasHW.offsetHeight - 100;     canvas.width = this.$refs.canvasHW.offsetWidth - 10;     this.canvasTxt = canvas.getContext("2d");     this.canvasTxt.strokeStyle = this.color;     this.canvasTxt.lineWidth = this.linewidth;   }

事件處理

mouseDown

//電腦設(shè)備事件     mouseDown(ev) {       ev = ev || event;       ev.preventDefault();        let obj = {         x: ev.offsetX,         y: ev.offsetY       };       this.startX = obj.x;       this.startY = obj.y;       this.canvasTxt.beginPath();//開(kāi)始作畫       this.points.push(obj);//記錄點(diǎn)       this.isDown = true;     },

touchStart

//移動(dòng)設(shè)備事件 touchStart(ev) { ev = ev || event; ev.preventDefault();   if (ev.touches.length == 1) {     this.isDraw = true; //簽名標(biāo)記     let obj = {       x: ev.targetTouches[0].clientX,       y:         ev.targetTouches[0].clientY -         (document.body.offsetHeight * 0.5 +           this.$refs.canvasHW.offsetHeight * 0.1)     };      //y的計(jì)算值中：document.body.offsetHeight*0.5代表的是除了整個(gè)畫板signatureBox剩余的高，     //this.$refs.canvasHW.offsetHeight*0.1是畫板中標(biāo)題的高     this.startX = obj.x;     this.startY = obj.y;     this.canvasTxt.beginPath();//開(kāi)始作畫     this.points.push(obj);//記錄點(diǎn)   } },

mouseMove

//電腦設(shè)備事件     mouseMove(ev) {       ev = ev || event;       ev.preventDefault();       if (this.isDown) {         let obj = {           x: ev.offsetX,           y: ev.offsetY         };         this.moveY = obj.y;         this.moveX = obj.x;         this.canvasTxt.moveTo(this.startX, this.startY);//移動(dòng)畫筆         this.canvasTxt.lineTo(obj.x, obj.y);//創(chuàng)建線條         this.canvasTxt.stroke();//畫線         this.startY = obj.y;         this.startX = obj.x;         this.points.push(obj);//記錄點(diǎn)       }     },

touchMove

//移動(dòng)設(shè)備事件     touchMove(ev) {       ev = ev || event;       ev.preventDefault();       if (ev.touches.length == 1) {         let obj = {           x: ev.targetTouches[0].clientX,           y:             ev.targetTouches[0].clientY -             (document.body.offsetHeight * 0.5 +               this.$refs.canvasHW.offsetHeight * 0.1)         };         this.moveY = obj.y;         this.moveX = obj.x;         this.canvasTxt.moveTo(this.startX, this.startY);//移動(dòng)畫筆         this.canvasTxt.lineTo(obj.x, obj.y);//創(chuàng)建線條         this.canvasTxt.stroke();//畫線         this.startY = obj.y;         this.startX = obj.x;         this.points.push(obj);//記錄點(diǎn)       }     },

mouseUp

//電腦設(shè)備事件     mouseUp(ev) {       ev = ev || event;       ev.preventDefault();       if (1) {         let obj = {           x: ev.offsetX,           y: ev.offsetY         };         this.canvasTxt.closePath();//收筆         this.points.push(obj);//記錄點(diǎn)         this.points.push({ x: -1, y: -1 });         this.isDown = false;       }     },

touchEnd

//移動(dòng)設(shè)備事件     touchEnd(ev) {       ev = ev || event;       ev.preventDefault();       if (ev.touches.length == 1) {         let obj = {           x: ev.targetTouches[0].clientX,           y:             ev.targetTouches[0].clientY -             (document.body.offsetHeight * 0.5 +               this.$refs.canvasHW.offsetHeight * 0.1)         };         this.canvasTxt.closePath();//收筆         this.points.push(obj);//記錄點(diǎn)         this.points.push({ x: -1, y: -1 });//記錄點(diǎn)       }     },

重寫

發(fā)現(xiàn)自己寫錯(cuò)字了，擦掉畫板重新寫過(guò)

//重寫     overwrite() {       this.canvasTxt.clearRect(         0,         0,         this.$refs.canvasF.width,         this.$refs.canvasF.height       );       this.points = [];       this.isDraw = false; //簽名標(biāo)記     },

用到的data

data() {     return {       points: [],       canvasTxt: null,       startX: 0,       startY: 0,       moveY: 0,       moveX: 0,       endY: 0,       endX: 0,       w: null,       h: null,       isDown: false,       color: "#000",       linewidth: 3,       isDraw: false //簽名標(biāo)記     };   },