Canvas电子签名实现原理解析
日常开发里的电子签名需求挺常见的，尤其你在做一些文档确认、合同流程的场景里，签名功能还蛮刚需的。基于 HTML5 的 Canvas 做个画板签名工具，不仅轻量，还好集成，体验也不错。
Canvas 的 2d 绘图能力用来搞签名，简直太合适了。你只需要建个 ，通过 getContext('2d') 拿到绘图上下文，基本就能开画了。
签名动作怎么监听？就靠 鼠标和触摸事件。像 mousedown、mousemove、mouseup 这几个搞清楚，路径就能顺利记录下来。再用 ctx.lineTo() ctx.stroke()，线条就画出来了。
签完怎么保存？Canvas 自带的 toDataURL 方法可以把签名转成 PNG 格式的 base64 图片，直接用
签错了想清空？直接重置 canvas.width 就能清空画布，兼容性也不错。
哦对了，这个功能也考虑了移动端，触摸事件支持一加就搞定，日常用没啥大问题。如果你想上手快点，可以看看这个压缩包 canvashbqm，里头有完整代码和资源，拿来就能跑。
另外推荐几个类似的实现，比如 jSignature 这种库也挺成熟，如果你不想从 0 写，也可以直接集成。移动端用 uniapp 的方案也比较多。
如果你有签名的需求，又想搞得轻量点，Canvas 的方式蛮值得一试的。小功能大用处，集成方便，体验也挺丝滑。
文件大小：33.15KB
评论区