1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8" />
  5.     <meta content="width=device-width,initial-scale=1,maximum-scale=1" name="viewport" />
  6.     <title>sxqm</title>
  7.     <meta name="format-detection" content="telephone=no">
  8.     <script src="/assets/js/jquery.min.js" type="text/javascript"></script>
  9.     <script src="/assets/js/jquery.mobile.custom.min.js" type="text/javascript"></script>
  10. </head>
  11. <body>
  12.     <canvas id="myCanvas"></canvas>
  13.     <div>
  14.         <button onclick="clean();">清 空</button>
  15.         <button onclick="save();">生成图片</button>
  16.     </div>
  17. </body>
  18. </html>
  1. var canvas, board;
  2.      canvas = document.getElementById('myCanvas');
  3.      canvas.height = 300;
  4.      canvas.width = 400;
  5.  
  6.      board = canvas.getContext('2d');
  7.      board.lineWidth = 1; //设置画笔粗细
  8.      board.strokeStyle = "#f00";
  9.      board.lineJoin = "round"; //设置画笔轨迹基于圆点拼接
  10.  
  11.      var mousePress = false;
  12.      var last = null;
  13.  
  14.      function beginDraw(event) {
  15.          mousePress = true;
  16.      }
  17.      function endDraw(event) {
  18.          mousePress = false;
  19.          event.preventDefault();
  20.          last = null;
  21.      }
  22.      function drawing(event) {
  23.          event.preventDefault();
  24.          if (!mousePress) return;
  25.          var xy = GetPos(event);
  26.          if (last != null) {
  27.              board.beginPath();
  28.              board.moveTo(last.x, last.y);
  29.              board.lineTo(xy.x, xy.y);
  30.              board.stroke();
  31.          }
  32.          last = xy;
  33.      }
  34.  
  35.      function GetPos(event) {
  36.          var isTouch = event.type.indexOf('touch') >= 0 ? true : false;
  37.          var x = isTouch ? event.touches[0].pageX : event.offsetX + event.target.offsetLeft;
  38.          var y = isTouch ? event.touches[0].pageY : event.offsetY + event.target.offsetTop;
  39.          return { x: x, y: y };
  40.      }
  41.  
  42.      function save() {
  43.          var data = canvas.toDataURL("image/png"); //把canvas画板上的内容转成指定格式图片数据，并进行Base64编码
  44.          var img = new Image();
  45.          img.src = data;
  46.          $(document.body).append(img);
  47.      }
  48.  
  49.      function clean() {
  50.          board.clearRect(0, 0, canvas.width, canvas.height);
  51.      }
  52.  
  53.      canvas.onmousedown = beginDraw;
  54.      canvas.onmousemove = drawing;
  55.      canvas.onmouseup = endDraw;
  56.      canvas.addEventListener('touchstart', beginDraw, false);
  57.      canvas.addEventListener('touchmove', drawing, false);
  58.      canvas.addEventListener('touchend', endDraw, false);

html5手写签名的更多相关文章

  1. canvas画布实现手写签名效果

    最近项目中涉及到移动端手写签名的功能需求,将实现代码记录于此,供小伙伴们参考指摘哦~ HTML代码: <!--手写区--> <div class="mSign_signMa ...

  2. uni-app通过canvas实现手写签名

    分享一个uni-app实现手写签名的方法 具体代码如下: <template> <view > <view class="title">请在下面 ...

  3. Ionic5手写签名SignaturePad

    测试程序下载:https://hanzhe.lanzous.com/itt47kncw3a 初始化项目 1. 首先新建一个Ionic5的项目: ionic start test-1 blank 2. ...

  4. Blazor组件自做二 : 使用JS隔离制作手写签名组件

    Blazor组件自做二 : 使用JS隔离制作手写签名组件 本文相关参考链接 JavaScript 模块中的 JavaScript 隔离 Viewer.js工程 Blazor组件自做一 : 使用JS隔离 ...

  5. html5 手写的canvas实现

    试用支持canvas的浏览器,无JS依赖,运用新的HTML5技术DrawBoard.renderDrawer('myHandWrite',{  penColor:'#FF0000',  penWidt ...

  6. 用canvas实现手写签名功能

    最近开发网站有一个需求,要求页面上有一块区域,用户能用鼠标在上面写字,并能保存成图片 base64 码放在服务器.这样的需求用 canvas 实现是最好的.需要用到 canvas 的以下几个属性: b ...

  7. WORD2003电子签名插件(支持手写、签章)

    1.引言 WORD电子签名插件,支持手写.本地电子图章.以及网络图章功能.软件使用VC6,以ATL方式编写,软件小巧精致. 这是我学习ATL的成果,学习过程及程序的编写,前前后后共用了一个多月的时间, ...

  8. Atitit s2018.2 s2 doc list on home ntpc.docx  \Atiitt uke制度体系 法律 法规 规章 条例 国王诏书.docx \Atiitt 手写文字识别 讯飞科大 语音云.docx \Atitit 代码托管与虚拟主机.docx \Atitit 企业文化 每日心灵 鸡汤 值班 发布.docx \Atitit 几大研发体系对比 Stage-Gat

    Atitit s2018.2 s2 doc list on home ntpc.docx \Atiitt uke制度体系  法律 法规 规章 条例 国王诏书.docx \Atiitt 手写文字识别   ...

  9. android-------手写签名系统的设计与实现之实现画笔设置

    引自:http://www.xuebuyuan.com/1754358.html 既然我们实现了画布和画笔,也实现了手写,为了提高可用性,我们增加了对画笔风格的设置功能,这样就可以根据自己的需要选择画 ...

随机推荐

  1. CSU-1632 Repeated Substrings （后缀数组）

    Description String analysis often arises in applications from biology and chemistry, such as the stu ...

  2. python 3 学习笔记 (三)

    1. 字典 定义:{key1:value1,key2:value2},key-value结构,key必须可hash特性:1.可存放多个值2.可修改指定key对应的值,可变3.无序 1.1. 创建字典 ...

  3. SHOI 2009 会场预约 平衡树 STL练习

    题目描述 PP大厦有一间空的礼堂,可以为企业或者单位提供会议场地.这些会议中的大多数都需要连续几天的时间(个别的可能只需要一天),不过场地只有一个,所以不同的会议的时间申请不能够冲突.也就是说,前一个 ...

  4. ADB命令详解

    一.adb介绍 ADB的全称为Android Debug Bridge,字面意思就是安卓调试桥接,简单点说,它是Android系统提供的一套工具,通过它,我们可以在电脑上建立一个连接到手机的通道,然后 ...

  5. JAVA语言的本质优势

    虽然Java应用最广泛,但与其它语言比并没有什么技术上的优势.常会看到各种抱怨,说Java语言设计不如C#,对native的精确控制和灵活性不然C++,动态性.开发效率方便不如Ruby,Python, ...

  6. ABBYY PDF Transformer+怎么标志注释

    ABBYY PDF Transformer+是一款可创建.编辑.添加注释及将PDF文件转换为其他可编辑格式的通用工具,可用来在PDF页面的任何位置添加注释(关于如何通过ABBYY PDF Transf ...

  7. Django值Cookie基础

    一.什么是Cookie? Cookies就是服务器暂时存放在你的电脑里的资料(.txt格式的文本文件),好让服务器用来辨认你的计算机.当你在浏览网站的时候,Web服务器会先送一小小资料放在你的计算机上 ...

  8. 如何解决Oracle RAC 安装集群软件或数据库时无法自动识别节点

    在节点一 grid用户下: $ORACLE_HOME=/u01/app/11.2.0/grid/ [grid@orarac1 /]$ cd /u01/app/11.2.0/grid/oui/bin [ ...

  9. SQL Server Analysis Services SSAS Processing Error Configurations

    转载:https://www.mssqltips.com/sqlservertip/3476/sql-server-analysis-services-ssas-processing-error-co ...

  10. SQL Server中字符串函数LEN 和 DATALENGTH辨析

    LEN:返回指定字符串表达式的字符(而不是字节)数,其中不包含尾随空格. DATALENGTH:返回用于表示任何表达式的字节数. 示例1:(相同,返回结果都为5): select LEN ('ssss ...