【JavaScript】------- Canvas 实现电子签名实例代码

最新推荐文章于 2023-07-27 11:00:29 发布

皮皮冰要做大神

最新推荐文章于 2023-07-27 11:00:29 发布

阅读量855

点赞数

分类专栏： # JavaScript # HTML5 文章标签： javascript html5 js

本文链接：https://blog.csdn.net/qq_38366657/article/details/107785264

版权

JavaScript 同时被 2 个专栏收录

59 篇文章 2 订阅

订阅专栏

HTML5

16 篇文章 0 订阅

订阅专栏

1. 这个例子只是实现电子签名如何让他符合业务看你们的了

<!DOCTYPE html>
<html>
<head> 
    <meta charset="utf-8" />
    <meta content="width=device-width,initial-scale=1,maximum-scale=1" name="viewport" />
    <title>签到</title>
    <meta name="format-detection" content="telephone=no">
    <style>
        body,div,p,canvas,span{
            margin: 0px;
            padding: 0px;
        }
        p{
            height: 40px;
            width: 100%;
            line-height: 40px;
            font-size: 14px;
            border-bottom: 2px solid #fff;
            display: inline-flex;
            text-align: center;
        }
        p span{
            color: #fff;
            display: block;
            width: 33.33%;
        }
        p span:nth-of-type(1){
            background-color: #c3b8b8;
        }
        p span:nth-of-type(2){
            background-color: #bf2b2b;
        }
        p span:nth-of-type(3){
            background-color: #04BE02;
        }
        p span:nth-of-type(2),p span:nth-of-type(3){
            /*position: relative;*/
            /*right: -50%;*/
            border-left: 1px solid #aaa;
        }
    </style>
    <script src="/libs/jquery/jquery-3.2.1.min.js"></script>

</head>
<body>
    <div>
        <p><span id="btn-close">关闭</span> <span onclick="clean();">清空</span><span onclick="save();">确认</span></p>
    </div>
    <canvas id="myCanvas"></canvas>

</body>

</html>

<script>

   

    var canvas, board;
     canvas = document.getElementById('myCanvas');

    if (canvas.width  < window.innerWidth)
    {
        canvas.width  = window.innerWidth;
    }else{
        canvas.width =400;
    }

    if (canvas.height < window.innerHeight)
    {
        canvas.height = 220;
    }else{
        canvas.height = 220;
    }

    //验证canvas画布是否为空函数
    function isCanvasBlank(canvas) {
        var blank = document.createElement('canvas');//系统获取一个空canvas对象
        blank.width = canvas.width;
        blank.height = canvas.height;
        return canvas.toDataURL() == blank.toDataURL();//比较值相等则为空
    }
 
     board = canvas.getContext('2d');
     board.lineWidth = 2; //设置画笔粗细
     board.strokeStyle = "#f00";
     board.lineJoin = "round"; //设置画笔轨迹基于圆点拼接
 
     var mousePress = false;
     var last = null;
 
     function beginDraw(event) {
         mousePress = true;
     }

     function endDraw(event) {
         mousePress = false;
         event.preventDefault();
         last = null;
     }
     function drawing(event) {
         event.preventDefault();
         if (!mousePress) return;
         var xy = GetPos(event);
         if (last != null) {
             board.beginPath();
             board.moveTo(last.x, last.y);
             board.lineTo(xy.x, xy.y);
             board.stroke();
         }
         last = xy;
     }
 
     function GetPos(event) {
         var isTouch = event.type.indexOf('touch') >= 0 ? true : false;
         var x = isTouch ? event.touches[0].pageX : event.offsetX + event.target.offsetLeft;
         var y = isTouch ? event.touches[0].pageY-40 : (event.offsetY + event.target.offsetTop)-40;
         return { x: x, y: y };
     }


     function save() {

         var data = canvas.toDataURL("image/png"); //把canvas画板上的内容转成指定格式图片数据，并进行Base64编码
         if(data){
             if(isCanvasBlank(canvas)){
                 alert("请签名");
                 return;
             }
         }
         var html="<img src='"+data+"'>";
         //代码省略...... 
     }
 
     function clean() {
         board.clearRect(0, 0, canvas.width, canvas.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);
     
     
   



</script>

手机端效果图：

皮皮冰要做大神

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
0
评论
【JavaScript】------- Canvas 实现电子签名实例代码

1. 这个例子只是实现电子签名如何让他符合业务看你们的了<!DOCTYPE html><html><head> <meta charset="utf-8" /> <meta content="width=device-width,initial-scale=1,maximum-scale=1" name="viewport" /> <title>签到</title> &...
复制链接

扫一扫