使用canvas实现在线签名（鼠标、触屏）

背景：最近需要使用签名+指纹叠加，最开始使用的是java图片合成，后来发现使用canvas画布就行了。

PS：这边有个坑，如果不加这行代码（e.preventDefault();）的话，在触屏下快速签名（或涂鸦），会导致涂鸦变形，圆变成多边形这类的。

preventDefault，prevent是动词，意为“防止，阻止”；Default是名词，有“系统默认值”的意思，preventDefault在js中的意思就 是“阻止系统默认（行为）

前端画布代码。

<canvas id="signatureCanvas" width="600" height="300"></canvas>

以下是js部分代码。

let canvas = document.getElementById('signatureCanvas');
        let ctx = canvas.getContext('2d');
        //线条宽度
        ctx.lineWidth = 6;

        // 重置
        ctx.clearRect(0, 0, canvas.offsetWidth, canvas.offsetHeight);
        let x = 0;
        let y = 0;
        //触屏下，需要计算画布内焦点的坐标
        let vertex = canvas.getBoundingClientRect();
        $('#signatureCanvas').on('mousedown touchstart', function (e) {
            //禁用事件默认动作，如果不加，再触屏情况下，可能出现问题
            e.preventDefault();
            ctx.beginPath();
            x = e.offsetX || (e.originalEvent.changedTouches[0].pageX-vertex.left);
            y = e.offsetY || (e.originalEvent.changedTouches[0].pageY-vertex.top);
            ctx.lineTo(x, y);
            ctx.stroke();

            $('#signatureCanvas').on('mousemove touchmove', function (e) {
                x = e.offsetX || (e.originalEvent.changedTouches[0].pageX-vertex.left);
                y = e.offsetY || (e.originalEvent.changedTouches[0].pageY-vertex.top);
                ctx.lineTo(x, y);
                ctx.stroke();
            });
        });
        $('#signatureCanvas').on('mouseleave mouseup touchend', function (e) {
            $('#signatureCanvas').off('mousemove touchmove');
            ctx.closePath();
        });

总结：大佬就是大佬，一行代码就解决了我一天都没解决的问题，我一直以为时线条啊、坐标计算、cpu问题，哈哈哈。要学习的东西，还是很多的。