<!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. 简易c语言文法

    <程序>→<外部声明>|<程序><外部声明> <外部声明>→<函数定义>|<声明> <函数定义>→< ...

  2. C++const限定符

    在C语言中我们使用#define宏定义的方式来处理符号常量.而在C++中有一种更好的处理符号常量的方法,那就是使用const关键字来修改变量声明和初始化.这种处理常量方式的好处不言而喻:如果程序在多处 ...

  3. 面向amd64的XXX与与项目的目标平台“x86”不兼容

    打开IIS服务器,选择应用程序池,设置中,有一个打开32位程序,选择FALSE,如果开启,在64位下就会出错.一般关闭

  4. HTML5桌面通知：notification

    最近由于公司业务需要,领导要求IM消息有像网页微信那样有新消息桌面右下角弹出一个提示框的效果!由于自己才疏学浅,一时还没明白微信是怎么实现的!所以只能问百度(因为懒得FQ)咯! 在网上搜索了N久,心都 ...

  5. unity, Shader.Find的一个坑

    所以对于没有被任何东西引用,只靠在游戏运行时使用Shader.Find换上去的shader,为了双保险,可以首先放到resources文件夹里,另外,再在ProjectSettings->Gra ...

  6. 崽崽帮www.zaizaibang.com精选2

    崔其亮-儿科专科 智慧熊北京丰台幼儿园——秋游活动 周边景点——哈尔滨旅游攻略 月是故乡明丨那些买给自己吃的常德手工月饼老店 [周末乐游]南京最美10所大学,这个周末一起逛一逛吧 彭韶-儿科二门诊 [ ...

  7. CentOS7 连网 拨号上网 PPoe网

    CentOS7  连网  拨号上网  PPoe网 在安装之前,请确定是否安装  rp-pppoe-3.5.rmp 如果没有安装,请使用 --replacepkgs  先强制安装它  (CentOS-7 ...

  8. iis 7.5 0x80004005 静态文件 html、js、css 500错误

    环境:iis 7.5 win7 64位 vs2012 问题:本地环境F5直接运行,没有任何问题,发布到IIS,静态文件不能访问,出现500错误,网上找了一堆解决办法,排除路径不正确,iis全部功能勾了 ...

  9. 【solr】之solr界面查询返回距离并排序

    使用solr界面查询 {!geofilt}距离函数 star:[4 TO 5]星级排序 geodist() desc 距离排序 pt :31.221717,121.580891 sfield:loca ...

  10. 记一次故障处理----主机异常关闭后mongodb二进制文件损坏

    今天,在某个演示环境中,我们的产品经历过整个机房断电后,出现了mongodb二进制文件损坏,以下是故障的分析记录过程: 1.在客户处支撑的同事发现整个机房断电再恢复后,3个mongodb复制集中,有1 ...