使用 Canvas 实现签名

通过 canvas 提供得 api，结合鼠标的事件 mousedown，mouseover，mouseup 来实现一个通过鼠标来签名的方法。

主要思路：在触发 mousedown 事件的时候，新增 mousemove 的监听事件，当触发 mouseup 事件的时候，再移除 mousemove 的监听事件。

<canvas id="box" width="400" height="400" style="background-color: black;"></canvas>
<script>
    function drawLine(context, x1, y1, x2, y2) {
        context.beginPath();
        context.strokeStyle = 'white';
        context.lineWidth = 1;
        context.moveTo(x1, y1);
        context.lineTo(x2, y2);
        context.stroke();
        context.closePath();
    }
    function signature(canvasId) {
        let x = 0;
        let y = 0;

        const board = document.getElementById(canvasId);
        const context = board.getContext('2d');
        const rect = board.getBoundingClientRect();

        board.addEventListener('mousedown', e => {
            x = e.clientX - rect.left;
            y = e.clientY - rect.top;
            isDrawing = true;
            board.addEventListener('mousemove', mouseMoveEvent)
        });

        board.addEventListener('mouseup', e => {
            x = 0;
            y = 0;
            board.removeEventListener('mousemove', mouseMoveEvent);
        });

        function mouseMoveEvent(e) {
            drawLine(context, x, y, e.clientX - rect.left, e.clientY - rect.top);
            x = e.clientX - rect.left;
            y = e.clientY - rect.top;
        }

    }

    signature('box')
</script>

图片演示如下

image.png

如果这篇文章对您有帮助，记得给作者点个赞，谢谢！