<!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);

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. Chapter 3: Develop the user experience

    Plan for search engine optimization and accessibility 使用analytical tools分析HTML,如SEO toolkit from MS, ...

  2. Network Alignment（网络比对）模型

      两类模型: 第一类:two-steps method 先计算两个网络之间每两个结点的相似性,再从N1*N2对相似性中抽取N1对匹配(N1<=N2). 代表算法:IsoRank 第二类:obj ...

  3. mouseover事件与mouseenter事件的区别

    不论鼠标指针穿过被选元素或其子元素,都会触发 mouseover 事件.对应mouseout 只有在鼠标指针穿过被选元素时,才会触发 mouseenter 事件.对应mouseleave 被触发的 M ...

  4. oracle数据库备份和还原

    ip导出方式:exp  demo/demo@127.0.0.1:1521/orcl file=f:\f.dmp full=y 备份:exp demo/demo@orcl file=f:\f.dmp f ...

  5. mock测试到底是什么？

    ​    ​经常听人说mock测试,究竟什么是mock测试呢?mock测试能解决什么问题?mock测试要如何做呢?今天为大家做简单介绍,之后会有详细的mock测试,感谢大家对测试梦工厂的持续关注. 概 ...

  6. ArcGis 字段计算表达式写法注意事项

    在ArcGis中,经常用到字段的计算.对于复杂的字段计算,需要写代码来实现,在使用ESRI.ArcGIS.DataManagementTools.CalculateField 类时,Python代码中 ...

  7. D3树状图异步按需加载数据

    D3.js这个绘图工具,功能强大不必多说,完全一个Data Driven Document的绘图工具,用户可以按照自己的数据以及希望实现的图形,随心所欲的绘图. 图形绘制,D3默认采用的是异步加载,但 ...

  8. 【转】error while loading shared libraries: libevent-2.0.so.5: cannot open shared object file: No such file or directory

    错误信息: /usr/local/memcacheq/bin/memcacheq: error while loading shared libraries: libevent-2.0.so.5: c ...

  9. Android 增量更新（BSDiff / bspatch）

    Android 增量更新 BSDiff / bspatchhttp://www.daemonology.net/bsdiff/android的代码目录下 \external\bsdiff bsdiff ...

  10. JQuery获取元素本身HTML

    $('<p>').append($(this).clone()).html() 原理:创建一个匿名对象,克隆本身,追加到匿名对象中,再获取匿名对象的HTML