• 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);
    
  • 相关阅读:
    jQuery源码解析(架构与依赖模块)第二章 核心模块
    jQuery源码解析(架构与依赖模块)第一章 理解架构
    js中运算符的优先级
    JS将时间与时间戳互转
    关于JavaScript scope的一切
    java中继承以及其他相关内容
    java中数组的内容
    关于java中的引用数据类型
    关于java的源文件结构以及常用的包
    Java语言的基础内容
  • 原文地址:https://www.cnblogs.com/jiang_zheng/p/4788622.html
Copyright © 2020-2023  润新知