现在使用网页进行签名的业务场景非常多，自己用到的就有银行和移动办理业务的时候使用电子签名。网页实现电子签名其实也挺容易的，canvas 标签非常容易实现，再加上可以导出签名图片，几十行代码就实现了。
代码语言：javascript复制<body>
<canvas></canvas>
<div>
<button onclick="cancel()">取消</button>
<button onclick="save()">保存</button>
</div>
</body>
<script>
const canvas = document.querySelector('canvas');
canvas.width = 500;
canvas.height = 300;
canvas.style.border = '1px solid #000';
const ctx = canvas.getContext('2d');
ctx.lineWidth = 3;//线宽
ctx.strokeStyle = 'red';//线颜色
ctx.lineCap = 'round';//线条的结束端点样式
ctx.lineJoin = 'round';//两条线相交时，所创建的拐角类型
const mobileStatus = (/Mobile|Android|iPhone/i.test(navigator.userAgent));
const start = event => {
const { offsetX, offsetY, pageX, pageY } = mobileStatus ? event.changedTouches[0] : event;
ctx.beginPath();//起始一条路径，或重置当前路径
ctx.moveTo(pageX, pageY);//把路径移动到画布中的指定点，不创建线条
window.addEventListener(mobileStatus ? "touchmove" : "mousemove", draw);
}
const draw = event => {
const { pageX, pageY } = mobileStatus ? event.changedTouches[0] : event;
ctx.lineTo(pageX , pageY );//添加一个新点，然后在画布中创建从该点到最后指定点的线条
ctx.stroke();//绘制已定义的路径
}
const cloaseDraw = () => {
window.removeEventListener("mousemove", draw);
}
window.addEventListener(mobileStatus ? "touchstart" : "mousedown", start);
window.addEventListener(mobileStatus ? "touchend" :"mouseup", cloaseDraw);
const cancel = () => {
ctx.clearRect(0, 0,500, 300);//在给定的矩形内清除指定的像素
}
const save = () => {
canvas.toBlob(blob => {
const date = Date.now().toString();
const a = document.createElement('a');
a.download = `${date}.png`;
a.href = URL.createObjectURL(blob);
a.click();
a.remove();
})
}
</script>
toBlob 居然在 w3cschool 没有，MDN 有详细的介绍。兼容了移动端，其实就是监听 touch 还是 mouse 事件的区别。
也可以到GitHub下载这个文件https://github.com/wade3po/demoCode
