20行代码解决电子签名

       最近，产品经理给了我一个奇奇怪怪的需求：为了实现客户对流程的确认以及公司免责，需要在协议pdf后增加一步（客户确认签名），因此需要实现电子签名。

我一听，有点棘手。以我的经验来说，能用插件就用插件，实在不行写原生。baidu了一小会，发现都是用canvas的。

canvas

      Canvas（画布）是在HTML5中新增的标签用于在网页实时生成图像，并且可以操作图像内容，基本上它是一个可以用JavaScript操作的位图（bitmap）。Canvas 对象表示一个 HTML 画布元素 -。它没有自己的行为，但是定义了一个 API 支持脚本化客户端绘图操作。

大白话就是canvas是一个可以在上面通过javaScript画图的标签，通过其提供的context(上下文)及Api进行绘制，在这个过程中canvas充当画布的角色。

API

getContext(contextType)：获取渲染上下文（具备了绘制和处理展示内容的能力）

contextType参数有
     2d：绘制2d图像（创建一个CanvasRenderingContext2D对象作为2d渲染的上下文）
     webgl（experimental-webgl）、webgl2：绘制3d图像（实验性）

由上文可知，实现电子签首先得创建一个画布，可以用js创建，也可以直接在html创建；

<canvas id="signature" width="400" height="200"></canvas>

const canvas = document.getElementById('signature');
let ctx = canvas.getContext('2d');
let isDrawing = false; // 判断是否在签字

定义坐标偏移量：

let lastX = 0;
let lastY = 0;

监听鼠标或手写笔在 Canvas 上的移动、按下、释放等操作：

canvas.addEventListener('mousedown', function (e) {
    isDrawing = true; 
    [lastX, lastY] = [e.offsetX, e.offsetY];
})
canvas.addEventListener('mousemove', function (e) {
    if (isDrawing) {
        ctx.beginPath(); //开始绘制新的路径
        ctx.moveTo(lastX, lastY); //路径起始坐标
        ctx.lineTo(e.offsetX, e.offsetY); // 绘制直线到指定坐标点
        ctx.stroke(); //实际绘制路径
        [lastX, lastY] = [e.offsetX, e.offsetY];
    }
})
canvas.addEventListener('mouseup', function () {
    isDrawing = false;
});

这个时候，我们已经实现了笔画的记录。这仍然不够，比如我需要重新签名，总不能使用js清除添加dom结构吧，此时我们使用clearRect方法。

<button id="clear">清空</button>

// 当点击清空按钮时，清空 Canvas 上的内容
let clearBtn = document.getElementById('clear')
clearBtn.addEventListener('click', function () {
    ctx.clearRect(0, 0, canvas.width, canvas.height); //此处canvas为画布的对象
});

通过以上步骤，我们已经实现了创建签名框，记录签名以及清空签名。但是业务上还有一个小要求，将 Canvas 中的内容导出为图片；

可以通过调用 toDataURL 方法将 Canvas 中的内容转化为 data URL，然后将其赋值给下载按钮的 href 属性；

<a id="download" href="#">导出签名</a>

let downloadBtn = document.getElementById('download')
downloadBtn.addEventListener('click', function () {
    let dataURL = canvas.toDataURL('image/png');
    downloadBtn.href = dataURL;
});

完~~~