场景：
公司申请vpn网络，需要提交一个pdf，有电子签名。我们可以手写拍照，然后借助ps或者wps对图片进行处理，抠出名字，背景设为透明，但是这样似乎很麻烦，而且对于没有这两个软件操作经验的小白来说还是有点困难的。
我想，最终我们是要得到一张图片的嘛，那么js是可以通过canvas生成图片的，那么不如用canvas做一个可以生成电子签名的程序。
实现思路：
1、有一张画布，有两个按钮，一是导出，而是清除画布
2、获取画布的上下文对象，绑定鼠标事件。鼠标按下时，在移动的过程中去绘制线，鼠标抬起的时候停止绘制。
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>签名</title>
<style>
#cvs {
border: 1px solid #000;
width: 640px;
height: 400px;
position: absolute;
top:0;
left:0;
z-index:-1;
}
</style>
</head>
<body>
<!-- <div>123</div> -->
<canvas id="cvs" width="640" height="400"></canvas>
<button id="btn1">下载</button>
<button id="btn2">清除</button>
</body>
<script>
// 获取canvas 实例
this.cvs = document.getElementById('cvs');
//获取Context对象（渲染实例）
this.ctx = this.cvs.getContext('2d');
// const image = new Image()
// // 2 引入图片
// image.src = './huge.jpg'
// // image.crossOrigin = 'Anonymous';
// // 3 等待图片加载完成
// image.onload = () => {
// // 4 使用 drawImage() 方法渲染图片
// this.ctx.drawImage(image, 0, 0, 640, 400)
// }
console.log(this.ctx)
this.cvs.addEventListener('mousedown', e => {
this.isDrawing = true;
this.ctx.moveTo(e.pageX, e.pageY)
});
//鼠标移动事件
this.cvs.addEventListener('mousemove', e => {
if (this.isDrawing) {
this.ctx.lineTo(e.pageX, e.pageY);
this.ctx.stroke();
}
});
//鼠标抬起事件
this.cvs.addEventListener('mouseup', e => {
this.isDrawing = false;
// 结束绘制
});
document.getElementById('btn1').addEventListener('click', () => {
console.log('点击了下载按钮')
this.cvs.toBlob(function (blob) {
const date = Date.now().toString()
// 创建一个 a 标签
const a = document.createElement('a')
// 设置 a 标签的下载文件名
a.download = date + '.png'
// 设置 a 标签的跳转路径为 文件流地址
a.href = URL.createObjectURL(blob)
// 手动触发 a 标签的点击事件
a.click()
// 移除 a 标签
a.remove()
}, 'image/png');
})
document.getElementById('btn2').addEventListener('click', () => {
this.ctx.clearRect(0, 0, 800, 1000)
//只清除之后下次写会显现之前的内容，所以要把路径消除
this.ctx.beginPath();
})
</script>
</html>效果图：
导出后效果：
