<!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. 实验1_IPv6地址配置

    IPv6地址配置 实验任务 (1)掌握如何在路由器及PC上配置IPv6地址 (2)掌握如何用IPv6 ping命令进行IPv6地址可达性检查 (3)掌握如何用命令来查看IPv6地址配置 实验过程 在R ...

  2. Unity全视角跟随鼠标右键转换视角实现——研究笔记

    using UnityEngine; using System.Collections; public class CameraMove : MonoBehaviour { public Transf ...

  3. VS2008编译bat

    工程文件为AirCode,批处理文件为bulit.bat(与*.sln文件在同级目录). 以下是批处理的代码: echo %~dp0 rem set build_config="Debug| ...

  4. 数据库备份Sql

    今天学习心得: 数据库备份语句: backup database ZhiHuiGongDi To disk = 'D:\zhihuigongdi20150824.bak'

  5. 1.15 kickstart rpm yum

    ###########bootstrap 启动加载器 (pxelinux.0)传输pxelinux.cfg NIC #network interface PXEpxelinux.0/tftp/pxel ...

  6. Pyhton的发展历程

    Python的由来 在1989年12月时,吉多·范罗苏姆——龟叔,想寻找一门“课余”编程项目来打发圣诞节前后的时间.Guido决定为当时正构思的一个新的脚本语言写一个解释器,它是ABC语言(教学语言. ...

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

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

  8. PChar,PAnsiChar,String,AnsiString,Char数组，AnsiChar数组转换

    PChar,PAnsiChar,String,AnsiString,Char数组,AnsiChar数组之间的转换关系见下图 通过转换链,可以实现任意两个类型之间的互转.如PChar转PAnsiChar ...

  9. Rails :.nil? , .empty?, .blank? .present? 的区别

    .nil? , .empty?, .blank? .present? 的区别 首先这三个都是判空的. 而 .nil? 和 .empty? 是ruby的方法. .blank? 是rails的方法 .ni ...

  10. 主工程中合并库工程的Manifest文件

    修改project属性文件中的 manifestmerger.enabled=true,就可以实现Android Manifest的合并. 主要用于lib工程和主工程之间. eg: target=an ...