uni-app电子签名功能

前言

随着时代的发展，以前的手写签名，逐渐衍生出了电子签名，比如钉钉等系统中等电子签名，电子签名和纸质手写签名一样具有法律效应。

作为前端等我们如何实现电子签名呢？其实在html5中已经出现了一个重要等辅助标签——canvas

说说canvas

canvas是一个可以在上面通过JavaScript画图等标签，通过提供等context（上下文）以及API进行绘制，在这个过程中canvas充当着画布等角色

准备工作

首先我们看到这个需求想到的就是鼠标按下的时候，开始画线，移动的过程中持续画这条线即可，所以第一时间我们想到的就是鼠标按下移动事件，所以我们先用mouse事件实现

第一步当然是需要在body中创建这个canvas元素了。

<canvas id="cvs"></canvas>

然后获取到这个元素并对其挂载上按下移动抬起的事件

const cvs = document.getElementById('cvs')
cvs.addEventListener('mousedown', (e) => {
   })
cvs.addEventListener('mousemove', (e) => {
   })
cvs.addEventListener('mouseup', (e) => {
   })

我们需要在鼠标按下后才开始执行，所以我们定义一个变量，用于记录鼠标是否按下，在down的时候打开，up抬起鼠标的时候关闭,如果不是按下状态，那么我们移动中什么也不做

const cvs = document.getElementById('cvs')
let isDownin = false
cvs.addEventListener('mousedown', (e) => {
   
    isDownin = true
})
cvs.addEventListener('mousemove', (e) => {
   
    if(!isDownin) return
})
cvs.addEventListener('mouseup', (e) => {
   
    isDownin = false
})

开始绘制

要绘制的思路很简单，当我们按下鼠标的时候，开始画线,将坐标移动到当前点击点，在移动过程中就会产生非常多的点，将这些点连成线就可以了，我们首先需要用到moveTo将坐标移到我们鼠标点下的点，然后在移动过程中使用lineTo将这些点连成线，最后使用stroke绘制出来就行

const cvs = document.getElementById('cvs')
const ctx = cvs.getContext('2d')
let isDownin = false

cvs.addEventListener('mousedown', (e) => {
   
    isDownin = true
    ctx.moveTo(e.pageX, e.pageY)
})
cvs.addEventListener('mousemove', (e)