通過 canvas 提供得 api，結(jié)合鼠標的事件 mousedown，mouseover，mouseup 來實現(xiàn)一個通過鼠標來簽名的方法。

主要思路：在觸發(fā) mousedown 事件的時候，新增 mousemove 的監(jiān)聽事件，當觸發(fā) mouseup 事件的時候，再移除 mousemove 的監(jiān)聽事件。

<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

如果這篇文章對您有幫助，記得給作者點個贊，謝謝！