canvas 实现简易版电子签名

0背景

逛社区发现个有趣的功能，先记录下来，canvas 实现电子签名并导出图片。

1实现思路

1. 利用 canvas 实现签名；
2. 监听 mousedown、mousemove、mouseup 事件；
3. mousemove 监听，绘制路径，mousedown、mouseup 监听触笔是否存在；
4. ctx.clearRect 实现清空，借助 canvas.toDataURL 导出图片。

话不多说，直接上代码，都看得懂。

21. DOM 结构

<button id="clear">清空</button>
<button id="download">导出签名</button>
<canvas id="signature" width="400" height="200"></canvas>

32. Script 脚本

var canvas = document.getElementById('signature');
var ctx = canvas.getContext('2d');
var isDrawing = false;
var lastX = 0;
var lastY = 0;

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;
});

// 清空
var clearBtn = document.getElementById('clear');

clearBtn.addEventListener('click', function () {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
});

// 下载
var downloadBtn = document.getElementById('download');

downloadBtn.addEventListener('click', function () {
    var a = document.createElement('a');
    a.href = canvas.toDataURL('image/png');
    a.download = '签名.png';
    a.click();
});