<!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. SpringMvc 页面DATE传值问题

    页面传过来yyy-MM-dd格式的日期类型,springMVC是不认的. 解决办法: @DateTimeFormat(pattern="yyyy-MM-dd") 在类属性上加上注解 ...

  2. maven加载jar包配置

    maven build时报程序包不存在和找不到符号的错误,但是代码中不报错,如下: [ERROR] Failed to execute goal org.apache.maven.plugins:ma ...

  3. 学习css中得与惑

    css的学习分享 所学的css知识看多,会看懂.这只是在实践中发现的问题:  一. ???h1比div还大  h1上下有边距   为什么浮动不了  (现不知道) 二. css写了 表现不出来.... ...

  4. Python线程通信

    subprocess 作用 模块用于生产新的进程,连接到其输入.输出.错误管道,并获取其返回值 1. 如何使用subprocess模块 启动子进程的推荐方法是使用以下方便功能. 对于更高级的用例,当这 ...

  5. Android学习十二：跑马灯程序实现（简单联系）

    package org.tonny; import java.util.Timer; import java.util.TimerTask; import android.app.Activity; ...

  6. BarTender是怎么做出雪花状文字

    一些小伙伴在做标签时,发现有的人做的标签上的文字颜色不是纯色的,问我是怎么做的.这种雪花状文字要设置出来其实很简单,只要用到字体颜色填充工具就可以了.下面,小编就来给大家简单介绍一下BarTender ...

  7. [原] wmic: Invalid XSL format (or) file name错误解决方法

    之前运行wmic命令正确,今天在服务器上出现Invalid XSL format (or) file name的提示,搜索了一下,在这里找到了答案: http://www.ctkn.net/2011/ ...

  8. Selenium2入门（三）WebDriver API之Get

    在上面的例子中,我们看到了WebDriver的一些方法,今天列举WebDriver的Get方法: import java.util.Set; import org.openqa.selenium.We ...

  9. 1、rhel 6.5 系统准备

    1.启动.关闭.重置服务    (rhel7 为 systemctl) [root@rhel-6 ~]# service atd status #关闭atd服务 atd 已停 [root@rhel-6 ...

  10. [Spring] - Quartz定时任务 - Annotation

    Spring + Quartz可以使用annoation方式: 1.AppJob类: package com.my.quartz.testquartz1; import org.springframe ...