Canvas实现电子签名功能

月伤59

于 2024-08-24 16:48:30 发布

阅读量172

点赞数 1

文章标签： javascript css 开发语言

本文链接：https://blog.csdn.net/qq_59625204/article/details/141501692

版权

实现代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Canvas实现手写板</title>

    <style>
        html,body{
            margin: 0;
            padding: 0;
        }
        #signatureCanvas{
            background-color: #999;
        }
    </style>
</head>
<body>
    <canvas id="signatureCanvas"></canvas>

    <script>
        let canvas = document.getElementById("signatureCanvas");
        canvas.width=window.innerWidth;
        canvas.height=window.innerHeight;

        let ctx = canvas.getContext("2d");
        let isDrawing = false;
        let lastX = 0;
        let lastY = 0;

        const startDrawing=(e)=> {
            isDrawing = true;
            lastX = e.pageX;
            lastY = e.pageY;
        }

        const draw=(e)=> {
            if (!isDrawing) return;
            
            let currentX = e.pageX;
            let currentY = e.pageY ;
            
            ctx.beginPath();
            ctx.moveTo(lastX, lastY);
            ctx.lineTo(currentX, currentY);
            ctx.strokeStyle = "#000";
            ctx.lineWidth = 3;
            ctx.stroke();
            
            lastX = currentX;
            lastY = currentY;
        }

        const stopDrawing=()=> {
            isDrawing = false;
        }

        // 监听PC端鼠标移动事件
        canvas.addEventListener("mousedown", startDrawing);
        canvas.addEventListener("mousemove", draw);
        canvas.addEventListener("mouseup", stopDrawing);
        canvas.addEventListener("mouseout", stopDrawing);
        // 监听移动端touch事件
        canvas.addEventListener("touchstart", startDrawing);
        canvas.addEventListener("touchmove", draw);
        canvas.addEventListener("touchend", stopDrawing);
    </script>
</body>
</html>