前端使用Canvas实现网页电子签名

刘牌对于网页版的电子签名用的地方还是挺多的, 一般用于后台的一些流程资料以及审核等场景

那么网页的电子签名如何实现呢?

其实我们可以使用Canvas来画就可以了

我们先创建一个html文件

将最基本的骨架创建好(! + tab), 添加canvas标签, 该标签默认是有宽高的

默认的宽高就是300px/150px

我们根据width和height属性, 将其宽高变大, 支撑起我们一个画板

现在, 最基本的画板就出来了

那么我们分析一下, 如何才能画呢?

其实这个需要借助监控鼠标的一些事件, 比如鼠标移入移除, 按下, 松开等等

那么我们还需要分析的是, 鼠标按下, 我们需要获取一个xy坐标点, 这个坐标点就是我们开始画的地方, 还需要有一个状态, 来记录, 我们什么时候不画了, 需要暂停等等, 我们来着手写一下

什么时候开始画, 我们已经写好了, 那么什么时候暂停呢?

就是鼠标移出该元素和鼠标松开的时候, 我们需要将状态改为false

现在就剩如何画了

其实, 可以根据鼠标移入外加状态是true的时候, 我们表示鼠标移入了并且按下了, 这时是可以画的

我们先创建一个二维平面

let ctx = canvas.getContext(“2d”); // 建立二维平面
再加一些样式, 比如描边颜色, 拐角形状, 线条末端形状, 线条宽度等等

线条样式我们已经加好了, 现在需要做的就是画线了

我们先按mdn中的例子, 看一下呈现效果

我们就看到这个效果, 就可以理解moveTo和lineTo了

我们仔细思考一下, 我们鼠标按下可以当做开始的坐标点, 鼠标移动得到的xy可以作为下一次开始使用, 移动的坐标点可以当做结束使用

这样, 我们就完成这个功能了

光完成功能还不行, 很多配合的场景都需要将其转为, 进行下载或者传给后端等等

那么接下来, 我们实现一下下载功能

我们加了一个下载按钮, 现在, 我们点击下载按钮进行下载

可以使用canvas的toDataURL实例方法, 来获取一个data url, 我们log看一下

这样, 我们创建一个a标签, 对href赋值, 触发click即可

这样我们的功能就彻底实现了

今天, 我们就讲解到这里

我们下期见