原生JS使用canvas实现网页电子签名

原生js配合canvas进行网页电子签名

在一次的业务中，有一个需求是需要使用签字笔来实现客户进行电子签名，因此使用到了h5新标签canvas，配合原生js，实现电子签名的下载

HTML

1.首先需要新建一个canvas标签，canvas本身是有默认宽高的，默认width是300px，高height是150px,可以在canvas标签属性中进行设置canvas的宽高，设置canvas宽高的时候尽量不要用css进行设置，否则可能会出现扭曲的情况；

<canvas id="mycanvas" width="500px" height="300px"></canvas><br>
<button id="submit">提交签名</button><br>
<button id="clear">重新签名</button>

利用css给画布设置一个边框，方便我们观察

    #mycanvas {
        border: 1px black solid;
    }

JS部分

// 获取到画布对象
    var cvs = document.getElementById("mycanvas");
    // 获取2d上下文对象（画笔）
    var ctx = cvs.getContext("2d");
    // 给鼠标按下添加监听事件
    cvs.onmousedown = function (e) {
        // 开始绘制名字
        ctx.beginPath();
        // 将画笔位置移动到此处,offsetX(Y)是相对起点的x,y坐标
        ctx.moveTo(e.offsetX, e.offsetY);

        cvs.onmousemove = function (ev) {
            // 画笔移动到此处
            ctx.lineTo(ev.offsetX, ev.offsetY);
            // 画笔上色
            ctx.stroke();
        }
    }
    // 鼠标移开的时候停止绘图
    cvs.onmouseup = function () { cvs.onmousemove = null; }

    // 点击清除按钮，清除按钮
    var clearbtn = document.getElementById("clear");
    clearbtn.onclick = function () { ctx.clearRect(0, 0, cvs.width, cvs.height); };

    var submitbtn = document.getElementById("submit");
    submitbtn.onclick = function () {
        // 签名生成base64格式
        var base64img = cvs.toDataURL();
        console.log(base64img);

        var a = document.createElement("a");
        a.href = base64img;
        a.download = "SignPic.png";
        document.body.appendChild(a).click();
        a.remove();
    }

实现思路：我们利用了canvas中绘制路径加描边的方法进行绘制签名

1. 要获取到canvas画布，然后再获取到渲染上下文对象（画笔）
2. 给鼠标添加三个监听事件：鼠标按下（mousedown）、鼠标移动（mousemove）和鼠标松开（mouseup）
3. 鼠标按下：此时利用canvas的beginPath（）方法进行开始绘制路径；此时需要获取到画笔相对起点的位置，利用渲染上下文（画笔）的moveTo方法，传入相对起点的坐标offsetX和offsetY
4. 鼠标移动：获取到画笔最终的位置，利用渲染上下文（画笔）的lineTo方法，将画笔的起始坐标和终止坐标连接起来，最后利用stroke方法对线条进行描边，否则看不到线条
5. 鼠标松开：当鼠标松开时，要清除掉鼠标移动的事件
6. 清除签名实现：利用canvas提供的clearRect方法，清除画布，需要传入四个参数，第一、二个参数是要清除的起始坐标，第三、四个参数是代表要清除区域的宽和高
7. 下载签名实现：通过canvas中的toDataURL方法生成base64格式，再利用a标签实现对签名的下载；将a标签的href属性的值设置为生成的base64值，再利用download属性设置下载的图片名称，通过点击click实现下载