1、创建画布
<canvas
id="canvas"
width="800"
height="600"
@mousedown="canvasDown($event)"
@mousemove="canvasMove($event)"
@mouseup="canvasUp($event)"
@mouseleave="canvasLeave($event)"
ref="canvas"
>抱歉，您的浏览器不支持canvas元素</canvas> //canvas 标签内部的元素指的是当你的浏览器不支持canvas是所展示的内容
2、在 mounted 中展示
内容还是放在methods中，由mounted展示
mounted() {
this.show();
}
methods:{
show(){
this.canvas = this.$refs.canvas;//指定canvas
this.ctx = this.canvas.getContext("2d");//设置2D渲染区域
this.ctx.lineWidth = 5;//设置线的宽度
}
}
3、根据canvas中所提供的鼠标事件做相应的事
这里有一处很多人在写的签字版的时候都会遇到的问题，当签字版的功能大致完成之后你会发现，如果当你点下鼠标的时候，并不是在canvas区域内部触发的mouseup事件，而是将鼠标移出canvas区域外在松开的时候，之后必须要在点击下canvan事件来触发up事件，否则会出现不点击鼠标也会签字的情况，这是就用到mouseleave，在mouseleave中做mouseup相同的事，就可以避免类似的事情发生
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) {
// 只有允许移动时调用
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、额外按钮
当然，你也可以做一些额外且常见的功能，比如重画，清空，提交等。
下面我们来实现清空功能，只需要设置一个按钮，搭配上相应的时间即可
<button @click="clear">
清空
</button>
clear(){
this.ctx.clearRect(0, 0, this.ctx.canvas.width, this.ctx.canvas.height)
},
提交的时候，通过toDataURL('image/jpg') 可以将canvas转化为base64数据
var base64Img = this.canvas.toDataURL('image/jpg');
console.log(base64Img);
5、另外各位小伙伴在做提交的时候，要注意设置判断不能提交空页面，以及图片格式问题。有问题欢迎在屏幕下方的留言板对我进行评价留言，喜欢的点个关注，点关注，不迷路哦亲亲。
qinqin.gif
