<!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. cx_oracle 执行cur.execute(sql)提交数据出现 UnicodeEncodeError: 'ascii' codec can't encode character u'\u2122' in position 170

    还是中文字符的问题, 解决方法见链接:http://www.oracle.com/technetwork/articles/tuininga-cx-oracle-084866.html import ...

  2. quick sort 的简化实现

    Pivot 随机选取意义不大 第一种方法使用随机pivot,使得尽可能平均二分序列,而实际上一般来说需要排序的集合往往是乱序的,无需重新生成随机数作为pivot,大可使用固定位置的数作为pivot,这 ...

  3. 【OPENGL】第三篇 着色器基础（二）

    在这一小节,主要学习GLSL的基本数据类型以及控制结构.GLSL具备了C++和Java的很多特性,我们会先了解所有着色阶段共有的特性,再了解各个着色器的专属特性. 1.着色器的基本结构 一个着色器程序 ...

  4. JavaScriptPolyfillShim 在JavaScript中Shim和Polyfill有什么区别?

    在JavaScript的世界里,有两个词经常被提到,那就是Shim和Polyfill,它们指的都是什么,又有什么区别?在本文中,将简短的给大家介绍他们之间的联系和区别.Shim一个shim就是一个库, ...

  5. geohash基本原理

    geohash基本原理是将地球理解为一个二维平面,将平面递归分解成更小的子块,每个子块在一定经纬度范围内拥有相同的编码,这种方式简单粗暴,可以满足对小规模的数据进行经纬度的检索 目录: 经纬度常识 认 ...

  6. CAD厂商的一丢丢笔记

    Cadence Cadence是个公司名,产品有: OrCAD,画原理图的 Allegro,画PCB的,PrintedCircuitBoard. Mentor,暂时还不知道画什么的 Autodesk ...

  7. open office操作word文档

    前段时间工作需要使用open office往word中写文件,写图片,以及向footer也就是页尾中插入图片,已经封装成了类,直接调用即可,代码如下: package com.test.common. ...

  8. urllib2抓取HTML存入Excel

    通过urllib2抓取HTML网页,然后过滤出包含特定字符的行,并写入Excel文件: # -*- coding: utf-8 -*- import sys #import urllib import ...

  9. 【maven】之配置开发，测试，正式环境pom.xml文件

    在进行web程序开发,如果项目组没有使用自动化发布工具(jenkins + maven + svn + tomcat ),我们一般会使用maven的热部署来完成发布,在部署的过程中我们开发,测试,生产 ...

  10. SQL分页查询

    假如tb_customer表中的数据量非常大,在显示时要分页显示而且每页只显示10条信息.为了效果我们取第三页的数据. 方法一:遍历两次表,取不同的数据. select top 10 * from t ...