canvas<canvas> 标签是 html 5 中的新标签。<canvas> 标签只是图形容器，您必须使用脚本来绘制图形。
canvas标签本身是没有绘图能力的，所有的绘制工作必须在 javascript 内部完成。
使用canvas绘图有几个必要的步骤：
获取canvas元素通过canvas元素创建context对象通过context对象来绘制图形在当前电子签名需求中，由于签名其实是由一条条线组成的，因此我们会用到以下几个方法：
beginpath() ：开始一条路径或重置当前的路径moveto()：把路径移动到画布中的指定点，不创建线条lineto()：添加一个新点，然后在画布中创建从该点到最后指定点的线条stroke()：绘制已定义的路径closepath()：创建从当前点回到起始点的路径事件想要在canvas中绘图，还需要绑定几个特定的事件，而这些事件在pc端和手机端不尽相同
pc端事件mousedownmousemovemouseup手机端事件touchstarttouchmovetouchend核心代码初始化canvas标签并绑定事件<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//电脑设备事件 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);//记录点 }},
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);//记录点 } },
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);//记录点 } },
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; } },
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 });//记录点 } },
重写发现自己写错字了，擦掉画板重新写过
//重写 overwrite() { this.canvastxt.clearrect( 0, 0, this.$refs.canvasf.width, this.$refs.canvasf.height ); this.points = []; this.isdraw = false; //签名标记 },
用到的datadata() { 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 //签名标记 }; },
相关推荐：
2020年前端vue面试题大汇总（附答案）
vue教程推荐：2020最新的5个vue.js视频教程精选
更多编程相关知识，请访问：编程入门！！
以上就是vue如何实现一个电子签名组件？的详细内容。