• html5手写签名


    <!DOCTYPE html>
    <html>
    <head>  
        <meta charset="utf-8" />
        <meta content="width=device-width,initial-scale=1,maximum-scale=1" name="viewport" />
        <title>sxqm</title>
        <meta name="format-detection" content="telephone=no">    
        <script src="/assets/js/jquery.min.js" type="text/javascript"></script>
        <script src="/assets/js/jquery.mobile.custom.min.js" type="text/javascript"></script>    
    </head>
    <body>      
        <canvas id="myCanvas"></canvas>
        <div>
            <button onclick="clean();">清 空</button>
            <button onclick="save();">生成图片</button>
        </div>
    </body>
    </html>
    
    var canvas, board;
         canvas = document.getElementById('myCanvas');
         canvas.height = 300;
         canvas.width = 400;
    
         board = canvas.getContext('2d');
         board.lineWidth = 1; //设置画笔粗细
         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 : event.offsetY + event.target.offsetTop;
             return { x: x, y: y };
         }
    
         function save() {         
             var data = canvas.toDataURL("image/png"); //把canvas画板上的内容转成指定格式图片数据,并进行Base64编码
             var img = new Image();
             img.src = data;
             $(document.body).append(img);
         }
    
         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);
    
  • 相关阅读:
    我把 Spring Boot Banner 换成了美女背景后……
    玩大发了,Tomcat 8.5 升级有坑…
    10 分钟快速上手 Shiro 新手教程
    为什么 HashMap 的加载因子是0.75?
    图解 Spring 循环依赖,写得太好了!
    单点登录的实现原理是什么?怎么实现?
    Maven三种仓库详解
    为什么 wait,notify,notifyAll 在 Object 类定义而不是 Thread 类?
    我们公司用了6 年的分布式锁,很是厉害!
    Google 开源的依赖注入库,比 Spring 更小更快!
  • 原文地址:https://www.cnblogs.com/jiang_zheng/p/4788622.html
Copyright © 2020-2023  润新知