js+canvas实现网页签字，导出功能

最新推荐文章于 2024-02-23 10:17:52 发布

@一个答布刘

最新推荐文章于 2024-02-23 10:17:52 发布

阅读量111

点赞数

文章标签： javascript 前端

本文链接：https://blog.csdn.net/m0_67790636/article/details/134537494

版权

电子签字demo( 代码复制可直接运行 )


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    body {
        margin: 0;
        padding: 0;
        border: 0px;
        height: 100vh;
        width: 100vw;
        display: flex;
    }

    #long_home {
        width: 80vw;
        height: 80vh;
        /* background-color: black; */
        /* margin: auto; */
        position: relative;
    }

    #home_body {
        width: 10vw;
        height: 10vw;
        background-color: rgb(213, 30, 30);
        position: absolute;
        cursor: move;
    }
</style>


<body>

    <div id="long_home">

        <canvas id="myCanvas" width="800" height="500" style="border:1px solid #e30909;margin: 15px; "></canvas>
        <button onclick="clearCanvas()">清空</button>
        <button onclick="exportPicture()">导出图片</button>
    </div>

    <script>

        var canvas = document.getElementById('myCanvas') //获取canvas上下文
        var cvsCtx = canvas.getContext('2d');  //创建canvas2D对象
        let startX = 0  //定义原始X轴坐标点
        let startY = 0  //定义原始y轴坐标点
        // cvsCtx.fillStyle = "#FF0000";
        // cvsCtx.fillRect(408, 260, 40, 40)
        cvsCtx.lineWidth = 2
        canvas.addEventListener('mousedown', ({ x, y }) => {
            isDown = true
            startX = x
            startY = y
            cvsCtx.beginPath();
            canvas.addEventListener('mousemove', droping, false)
        })

        canvas.addEventListener('mouseup', stoping)

        // 开始绘画
        function droping(events) {
            const { x, y } = events

            if (!isDown) return
            cvsCtx.moveTo(x, y)
            cvsCtx.lineTo(startX, startY)
            cvsCtx.stroke()
            startX = x
            startY = y

        }
        //停止绘画
        function stoping() {
            cvsCtx.closePath();
            canvas.removeEventListener('mousemove', droping)
        }
        //清空画布
        function clearCanvas() {
            cvsCtx.clearRect(0, 0, canvas.width, canvas.height)
        }
        //canvas导出图片
        function exportPicture() {
            let url = canvas.toDataURL('image/png')
            console.log('base64地址', url);

        }
       

    </script>
</body>

</html>