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

电玩女神 2023-03-05 03:24 15阅读 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>

> 手机端效果图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MzY2NjU3_size_16_color_FFFFFF_t_70][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MzY2NjU3_size_16_color_FFFFFF_t_70]: /images/20230208/0b04dd8b5b05410bb96597e0eb47b938.png