html手写签名canva实现

HTML部分

 <canvas class="canvas-box" id="myCanvas" width="400" height="200"></canvas>
 <img class="signImage" id="tsImage" src="" alt="">
  <p>
     <button type="button" id="clearSign" >清除</button>
     <button type="button" id="saveSign" >保存</button>
  </p>

<style>
.canvas-box {
    width: 400px;
    height: 200px;
    border: 1px solid darkgrey;
}

.signImage {
    display: none;
}
</style>

js部分

mySign({
            canvasId: 'myCanvas',
            clearId: '#clearSign',
            saveId: '#saveSign',
            imgId: '#signImage',
        });


function mySign(obj) {
        let canvas = document.getElementById(obj.canvasId);
        let context = canvas.getContext('2d');
        // 设置画笔属性
        context.lineWidth = 2;
        context.strokeStyle = "#000000";
        $(document).on('click', obj.clearId, function () {
            clearCanvas()
        }).on('click', obj.saveId, function () {
            saveSignature()
        })
        // 鼠标按下事件
        canvas.addEventListener("mousedown", function (event) {
            context.beginPath();
            context.moveTo(event.offsetX, event.offsetY);
            canvas.addEventListener("mousemove", drawLine);
        });

        // 鼠标抬起事件
        canvas.addEventListener("mouseup", function () {
            canvas.removeEventListener("mousemove", drawLine);
        });

        // 绘制线条函数
        function drawLine(event) {
            context.lineTo(event.offsetX, event.offsetY);
            context.stroke();
        }

        // 清空画布
        function clearCanvas() {
            context.clearRect(0, 0, canvas.width, canvas.height);
            canvas.style.display = 'block';
            let $image = $(obj.imgId)[0];
            $image.style.display = 'none';
            $image.src = '';
        }

        // 保存签名
        function saveSignature() {
            let dataURL = canvas.toDataURL();
            canvas.style.display = 'none';
            let $image = $(obj.imgId)[0];
            $image.style.display = 'block';
            $image.src = dataURL;
        }
    }