canvas手写签名

最新推荐文章于 2024-05-23 09:24:55 发布

柠萌味的西瓜糖

最新推荐文章于 2024-05-23 09:24:55 发布

阅读量78

点赞数

分类专栏：功能实现文章标签： canvas 前端

原文链接：https://www.jianshu.com/p/55a81b32e89e

版权

功能实现专栏收录该内容

5 篇文章 0 订阅

订阅专栏

效果如下：
在这里插入图片描述

实现代码：

<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=yes">
    <title>手写签名</title>
    <style type="text/css">
        html,
        body {
            margin: 0;
            padding: 0;
        }
        
        .saveimg {
            text-align: center;
        }
        
        .saveimgs span {
            display: inline-block;
            margin-top: 5px;
        }
    </style>
</head>

<body>

    <div align="center">
        <canvas id="myCanvas" width="500" height="500" style="border:1px solid #6699cc"></canvas>
        <div class="control-ops control">
            <button type="button" class="btn btn-primary" onclick="javascript:clearArea();return false;">清空画板</button> Line width : <select id="selWidth" onchange="aaa()">
        <option value="1">1</option>
        <option value="3">3</option>
        <option value="5" selected="selected">5</option>
        <option value="7">7</option>
        <option value="9">9</option>
        <option value="11">11</option>
    </select> Color : <select id="selColor" onchange="aaa2()">
        <option value="black" selected="selected">black</option>
        <option value="blue">blue</option>
        <option value="red">red</option>
        <option value="green">green</option>
        <option value="yellow">yellow</option>
        <option value="gray">gray</option>
    </select>
            <button type="button" class="saveimg" onclick="javascript:saveImageInfo();return false;">保存</button>
        </div>
        <div class="saveimgs"></div>
    </div>



    <script type="text/javascript">
        var mousePressed = false;
        var lastX, lastY;
        var ctx = document.getElementById('myCanvas').getContext("2d");
        var c = document.getElementById("myCanvas");

        var control = document.getElementsByClassName("control")[0];
        var saveimgs = document.getElementsByClassName("saveimgs")[0];

        window.onload = function() {
            InitThis();
        }

        function saveImageInfo() {
            var image = c.toDataURL("image/png");
            var ctximg = document.createElement("span");
            ctximg.innerHTML = "<img src='" + image + "' alt='from canvas'/>";
            if (saveimgs.getElementsByTagName('span').length >= 1) {
                var span_old = saveimgs.getElementsByTagName("span")[0];
                saveimgs.replaceChild(ctximg, span_old)
            } else {
                saveimgs.appendChild(ctximg);
            }
            //          console.log(image)
        }


        var selected1, selected2;

        function aaa() {
            var sel = document.getElementById('selWidth');
            var value = sel.selectedIndex;
            return selected1 = sel[value].value;
        }

        function aaa2() {
            var sel2 = document.getElementById('selColor');
            var value = sel2.selectedIndex;
            return selected2 = sel2[value].value;
        }

        function InitThis() {
            //          触摸屏
            c.addEventListener('touchstart', function(event) {
                console.log(1)
                if (event.targetTouches.length == 1) {
                    event.preventDefault(); // 阻止浏览器默认事件，重要
                    var touch = event.targetTouches[0];
                    mousePressed = true;
                    Draw(touch.pageX - this.offsetLeft, touch.pageY - this.offsetTop, false);
                }

            }, false);

            c.addEventListener('touchmove', function(event) {
                console.log(2)
                if (event.targetTouches.length == 1) {
                    event.preventDefault(); // 阻止浏览器默认事件，重要
                    var touch = event.targetTouches[0];
                    if (mousePressed) {
                        Draw(touch.pageX - this.offsetLeft, touch.pageY - this.offsetTop, true);
                    }
                }

            }, false);

            c.addEventListener('touchend', function(event) {
                console.log(3)
                if (event.targetTouches.length == 1) {
                    event.preventDefault(); // 阻止浏览器默认事件，防止手写的时候拖动屏幕，重要
                    //                  var touch = event.targetTouches[0];
                    mousePressed = false;
                }
            }, false);
            /*c.addEventListener('touchcancel', function (event) {
                console.log(4)
                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 = selected1;
                ctx.lineJoin = "round";
                ctx.moveTo(lastX, lastY);
                ctx.lineTo(x, y);
                ctx.closePath();
                ctx.stroke();
            }
            lastX = x;
            lastY = y;
        }

        function clearArea() {
            // Use the identity matrix while clearing the canvas
            ctx.setTransform(1, 0, 0, 1, 0, 0);
            ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);

            // 清除签名图片
            if (saveimgs.getElementsByTagName('span').length >= 1) {
                var clearImg = saveimgs.getElementsByTagName('span')[0];
                saveimgs.removeChild(clearImg);
            }

        }
    </script>

</body>

</html>

柠萌味的西瓜糖

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
canvas手写签名

效果如下：实现代码：<html><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=yes"> <title>手写签名</title> <style type="text/css"> html,
复制链接

扫一扫