【前端：canvas电子签名】

最新推荐文章于 2024-10-18 17:51:23 发布

SmokyOranges

最新推荐文章于 2024-10-18 17:51:23 发布

阅读量104

点赞数 1

分类专栏：模板文章标签： javascript html5 Powered by 金山文档

本文链接：https://blog.csdn.net/m0_56172703/article/details/129135619

版权

模板专栏收录该内容

2 篇文章 0 订阅

订阅专栏

该HTML代码展示了一个用于在线考试的电子签名组件。用户可以在画布上绘制签名，通过点击清除按钮删除签名，或点击提交按钮将签名保存并提交。代码使用JavaScript处理鼠标和触摸事件，实现签名的绘制、清除和提交功能，并通过canvas元素进行图形操作。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>在线考试</title>
    <link rel="stylesheet" href="/assets/app/font-awesome-4.7.0/css/font-awesome.min.css">
    <script src="/assets/app/js/jqurey.min.js"></script>
    <script src="../../assets/app/js/until.js"></script>
</head>
<style>
    *{
        font-size: 15px;
        padding: 0;
        margin: 0;
        box-sizing: border-box;
    }
</style>
<body>
<div style="background-color:#f8f9fb;">
    <!-- 公共头部开始 -->
    <div style="background-color: #ffffff;position: fixed;top: 0;height: 44px;width:100%;padding:0 1rem;color: #333">
        <h2 style="font-size: 18px;line-height: 44px;text-align: center">电子签名</h2>
    </div>
    <div style="margin-top:44px;background-color:#f8f9fb;height: 100%;border-top: 1px #eee solid;padding: 10px">
        <div id="canvas-box" style="width: 100%;height: calc(100vh - 65px);background-color: rgba(238,238,238,0.4)">
            <canvas id="myCanvas"></canvas>
        </div>
    </div>
    <!-- 公共头部开始 -->
    <div style="background-color: rgba(248,249,251,0.7);border:#eee 1px solid;border-right: none;position: fixed;top: 42%;right:0;height: 80px;width:58px;padding:0 0 0 10px;">
        <img onclick="clean();" style="height: 30px;width:30px;margin-top: 4px" src="/assets/app/img/xiangpi.png" title="清除" />
        <img onclick="save();" style="height: 30px;width:30px;margin-top: 8px" src="/assets/app/img/submit.png" title="提交" />
    </div>
</div>
<script>
    //用户是否绘画过
    var isDraw = false;
    var mousePress = false;
    var last = null;

    var canvas = document.getElementById('myCanvas');
    canvas.width = $('#canvas-box').width();
    canvas.height = $('#canvas-box').height();
    canvas.onmousedown = beginDraw;canvas.onmousemove = drawing;canvas.onmouseup = endDraw;
    canvas.addEventListener('touchstart', beginDraw, false);
    canvas.addEventListener('touchmove', drawing, false);
    canvas.addEventListener('touchend', endDraw, false);

    var board = canvas.getContext('2d');
    board.lineWidth = 2;
    board.strokeStyle = "#015496";

    function beginDraw() {
        mousePress = true;
    }

    function drawing(event) {
        isDraw = true;
        event.preventDefault();
        if (!mousePress) return;
        let xy = pos(event);
        if (last != null) {
            board.beginPath();
            board.moveTo(last.x, last.y);
            board.lineTo(xy.x, xy.y);
            board.stroke();
        }
        last = xy;
    }

    function endDraw(event) {
        mousePress = false;
        event.preventDefault();
        last = null;
    }

    function pos(event) {
        let x, y;
        if (event.type.indexOf('touch') >= 0) {
            x = event.touches[0].pageX - 25;
            y = event.touches[0].pageY - 65.5;
        } else {
            x = event.offsetX + event.target.offsetLeft - 25;
            y = event.offsetY + event.target.offsetTop - 65.5;
        }
        return {x: x, y: y};
    }

    var submit = true;
    function save() {
        if(!isDraw){
            Until.layer("请签名后再提交！","error");
            return false;
        }
        if(submit){
            submit = false;
            // base64签名图片,去掉前缀data:image/png;base64,
            let dataUrl = canvas.toDataURL().split(",")[1];
            Until.confirm("确认提交电子签名？","info",{
                type: "post",
                url: "/studentExamPaper/app/electronicSignature",
                dataType: "json",
                data: {
                    base64Img: dataUrl
                },
                success: function (data) {
                    submit = true;
                    window.location.href = '/pages/app/exam_over.html'
                },
                error: function (error) {
                }
            })
        }
    }

    function clean() {
        isDraw = false;
        board.clearRect(0, 0, canvas.width, canvas.height);
    }
</script>
</body>

</html>