canvas 实现手写签名

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

<head>
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        html,body{
            width: 100%;
            height: 100%;
        }
    </style>
</head>

<body>
    <div style="display: flex;flex-direction: column;height: 100%;padding: 20px;">
        <div class="mui-content-padded">
            <div class="mui-inline">
                <font style="font-family: '微软雅黑';font-size: 1.2rem;">签字</font>
            </div>
        </div>
        <div class="mui-content-canvasDiv" style="width: 100%;height: 100%;">
            <div class="wrap" style="width: 100%;height: 100%;">
                <canvas id="myCanvas" width="940" height="460" style="background-color: #ccc;"></canvas>
            </div>
        </div>
        <div class="btn-wrap" style="display: flex;justify-content: center;align-items: center;">
            <button onclick="save()" style="margin-right: 10px;">保存</button>
            <button onclick="reset()">重置</button>
        </div>
    </div>
    
</body>
<script>
    var mousePressed = false;
    var lastX, lastY;
    var ctx = document.getElementById('myCanvas').getContext("2d");
    var c = document.getElementById("myCanvas");
    var selected1, selected2;
    function InitThis() {
        // 触摸屏
        c.addEventListener('touchstart', function (event) {
            if (event.targetTouches.length == 1) {
                event.preventDefault(); // 阻止浏览器默认事件，重要
                mousePressed = true;
                Draw(event.touches[0].pageX - this.offsetLeft, event.touches[0].pageY - this.offsetTop, false);
            }
        }, false);
        c.addEventListener('touchmove', function (event) {
            if (event.targetTouches.length == 1) {
                event.preventDefault(); // 阻止浏览器默认事件，重要
                if (mousePressed) {
                    Draw(event.touches[0].pageX - this.offsetLeft, event.touches[0].pageY - this.offsetTop, true);

                }
            }
        }, false);
        c.addEventListener('touchend', function (event) {
            if (event.targetTouches.length == 1) {
                event.preventDefault(); // 阻止浏览器默认事件，防止手写的时候拖动屏幕，重要
                mousePressed = false;
            }
        }, false);
        // 鼠标
        c.onmousedown = function (event) {
            mousePressed = true;
            Draw(event.pageX - this.offsetLeft, event.pageY - this.offsetTop, false);
        };
        c.onmousemove = function (event) {
            if (mousePressed) {
                Draw(event.pageX - this.offsetLeft, event.pageY - this.offsetTop, true);
            }
        };
        c.onmouseup = function (event) {
            mousePressed = false;
        };
    }

    function Draw(x, y, isDown) {
        if (isDown) {
            ctx.beginPath();
            ctx.strokeStyle = selected2;
            ctx.lineWidth = 5;
            ctx.lineJoin = "round";
            ctx.moveTo(lastX, lastY);
            ctx.lineTo(x, y);
            ctx.closePath();
            ctx.stroke();
        }
        lastX = x;
        lastY = y;
    }

    function save(){
        const url=c.toDataURL({format: "image/png", quality:1, width:12000, height:4000});
        var dlLink = document.createElement('a');
        dlLink.download = "签名";
        dlLink.href = url;
        //dlLink.dataset.downloadurl = [MIME_TYPE, dlLink.download, dlLink.href].join(':');
        document.body.appendChild(dlLink);
        dlLink.click();
        document.body.removeChild(dlLink);
    }
    function reset(){
        let w=c.width;
        let h=c.height;
        ctx.clearRect(0,0,w,h);
    }
    InitThis();
</script>

</html>

var code = "3405b5e1-fe60-4395-bf33-f8e91155d524"

posted @ 2023-03-06 15:57 东方初白阅读(185) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· CSS元素水平垂直居中

· JS数组常用方法

· html+canvas 实现签名功能-鼠标

· 20行js代码实现手写签名

· 前端canvas实现签名功能，可以横屏/竖屏签名

阅读排行：
· 全程不用写代码，我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了，比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· DeepSeek 开源周回顾「GitHub 热点速览」
· 白话解读 Dapr 1.15：你的「微服务管家」又秀新绝活了