猜猜看，咱们每天都得签在哪儿？没错，就是银行！各种事情总需要留下咱大名。今儿个，我就分享下怎么使用Vue做一个电子签名板，感兴趣的话就继续往下看~
告诉你个简单的事，就是用Canvas画图，就像用HTML 5做画板那样。可是，画画这回事，主要得靠那个…对了，JavaScript。上次我们聊过那个验证码，虽然有点小问题，但还算可以防止黑客攻击。你知道这个电子签名组件吗？感觉真的不错！
咱们今天来学学怎么画函数图形呗，这个在电子签名里很常见的。只要用到5个函数就行了，像是beginPath（重新开始画），moveTo（指引着我们找到位置并且不留下任何痕迹），lineTo（沿着这条线往上加线条并标出个点），stroke（给图像上个色让它变漂亮），还有closePath（画完了结束，回到起始点）。虽然看似简单，但每个函数都有各自的工作：beginPath就是重新开始画；然后是moveTo帮我们定好点；接下来是lineTo可以在原有的线上增加新的线条并标注出一个点；stroke则是给整个图形涂上颜色；而千万别忘了closePath，这代表所有步骤都完成，又回到了起点。
搞定Canvas画图，其实就是那么几步。不论是电脑还是手机，都得先搞清楚怎么操作鼠标（比如触摸啊、拖动啊、然后放手）。画出画布后，选好要用哪个设备，接着调用对应的方法就行！
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(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(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(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);//记录点
}
},
评论0