在生活中我们使用到电子签名最多的地方可能就是银行了，每次都会让你留下大名。今天我们就要用vue实现一个电子签名的面板
想要绘制图形，第一步想到的就是使用canvas标签，在之前的文章里我们使用canvas实现了一个前端生成图形验证码的组件，被吐槽不够安全，那么这个电子签名组件想必不会被吐槽了吧~canvas
canvas
canvas
标签是 HTML 5 中的新标签。
标签只是图形容器，您必须使用脚本来绘制图形。
canvas标签本身是没有绘图能力的，所有的绘制工作必须在 JavaScript 内部完成。使用canvas绘图有几个必要的步骤：

获取canvas元素

通过canvas元素创建context对象

通过context对象来绘制图形
获取canvas元素通过canvas元素创建context对象通过context对象来绘制图形在当前电子签名需求中，由于签名其实是由一条条线组成的，因此我们会用到以下几个方法：

beginPath() ：开始一条路径或重置当前的路径

moveTo()：把路径移动到画布中的指定点，不创建线条

lineTo()：添加一个新点，然后在画布中创建从该点到最后指定点的线条

stroke()：绘制已定义的路径

closePath()：创建从当前点回到起始点的路径
beginPath() ：开始一条路径或重置当前的路径moveTo()：把路径移动到画布中的指定点，不创建线条lineTo()：添加一个新点，然后在画布中创建从该点到最后指定点的线条stroke()：绘制已定义的路径closePath()：创建从当前点回到起始点的路径事件
事件
事件
想要在canvas中绘图，还需要绑定几个特定的事件，而这些事件在pc端和手机端不尽相同pc端事件

mousedown

mousemove

mouseup
mousedownmousemovemouseup手机端事件

touchstart

touchmove

touchend
touchstarttouchmovetouchend核心代码
核心代码核心代码初始化canvas标签并绑定事件
初始化canvas标签并绑定事件

@touchstart="touchStart"

@touchmove="touchMove"

@touchend="touchEnd"

ref="canvasF"

@mousedown="mouseDown"

@mousemove="mouseMove"

@mouseup="mouseUp"

>


@touchstart="touchStart"

@touchmove="touchMove"

@touchend="touchEnd"

ref="canvasF"

@mousedown="mouseDown"

@mousemove="mouseMove"

@mouseup="mouseUp"

>
获取画笔
获取画笔在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;
}
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

//电脑设备事件

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();//开始作画

this.points.push(obj);//记录点

this.isDown = true;

},


//电脑设备事件

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();//开始作画

this.points.push(obj);//记录点

this.isDown = true;

},

touchStart

//移动设备事件

touchStart(ev) {

ev = ev || event;

ev.preventDefault();

if (ev.touches.length == 1) {

this.isDraw = true; //签名标记

let obj = {

x: ev.targetTouches[0].clientX,

y:

ev.targetTouches[0].clientY -

(document.body.offsetHeight * 0.5 +

this.$refs.canvasHW.offsetHeight * 0.1)

}; //y的计算值中：document.body.offsetHeight*0.5代表的是除了整个画板signatureBox剩余的高，this.$refs.canvasHW.offsetHeight*0.1是画板中标题的高

this.startX = obj.x;

this.startY = obj.y;

this.canvasTxt.beginPath();//开始作画

this.points.push(obj);//记录点

}

},

//移动设备事件

touchStart(ev) {

ev = ev || event;

ev.preventDefault();

if (ev.touches.length == 1) {

this.isDraw = true; //签名标记

let obj = {

x: ev.targetTouches[0].clientX,

y:

ev.targetTouches[0].clientY -

(document.body.offsetHeight * 0.5 +

this.$refs.canvasHW.offsetHeight * 0.1)

}; //y的计算值中：document.body.offsetHeight*0.5代表的是除了整个画板signatureBox剩余的高，this.$refs.canvasHW.offsetHeight*0.1是画板中标题的高

this.startX = obj.x;

this.startY = obj.y;

this.canvasTxt.beginPath();//开始作画

this.points.push(obj);//记录点

}

},
mouseMove

//电脑设备事件

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);//移动画笔

this.canvasTxt.lineTo(obj.x, obj.y);//创建线条

this.canvasTxt.stroke();//画线

this.startY = obj.y;

this.startX = obj.x;

this.points.push(obj);//记录点

}

},

//电脑设备事件

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);//移动画笔

this.canvasTxt.lineTo(obj.x, obj.y);//创建线条

this.canvasTxt.stroke();//画线

this.startY = obj.y;

this.startX = obj.x;

this.points.push(obj);//记录点

}

},
touchMove

//移动设备事件

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);//移动画笔

this.canvasTxt.lineTo(obj.x, obj.y);//创建线条

this.canvasTxt.stroke();//画线

this.startY = obj.y;

this.startX = obj.x;

this.points.push(obj);//记录点

}

},

//移动设备事件

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);//移动画笔

this.canvasTxt.lineTo(obj.x, obj.y);//创建线条

this.canvasTxt.stroke();//画线

this.startY = obj.y;

this.startX = obj.x;

this.points.push(obj);//记录点

}

},
mouseUp

//电脑设备事件

mouseUp(ev) {

ev = ev || event;

ev.preventDefault();

if (1) {

let obj = {

x: ev.offsetX,

y: ev.offsetY

};

this.canvasTxt.closePath();//收笔

this.points.push(obj);//记录点

this.points.push({ x: -1, y: -1 });

this.isDown = false;

}

},

//电脑设备事件

mouseUp(ev) {

ev = ev || event;

ev.preventDefault();

if (1) {

let obj = {

x: ev.offsetX,

y: ev.offsetY

};

this.canvasTxt.closePath();//收笔

this.points.push(obj);//记录点

this.points.push({ x: -1, y: -1 });

this.isDown = false;

}

},
touchEnd

//移动设备事件

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);//记录点

this.points.push({ x: -1, y: -1 });//记录点

}

},

//移动设备事件

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);//记录点

this.points.push({ x: -1, y: -1 });//记录点

}

},
重写
重写重写发现自己写错字了，擦掉画板重新写过
//重写

overwrite() {

this.canvasTxt.clearRect(

0,

0,

this.$refs.canvasF.width,

this.$refs.canvasF.height

);

this.points = [];

this.isDraw = false; //签名标记

},

//重写

overwrite() {

this.canvasTxt.clearRect(

0,

0,

this.$refs.canvasF.width,

this.$refs.canvasF.height

);

this.points = [];

this.isDraw = false; //签名标记

},
用到的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 //签名标记

};
},

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 //签名标记

};
},
以上就是本文的全部内容，希望对大家的学习有所帮助。