最近项目中涉及到移动端手写签名的功能需求,将实现代码记录于此,供小伙伴们参考指摘哦~

HTML代码:

<!--手写区-->
<div class="mSign_signMark_box">
<div class="mSign_signMark_write_box">
<div id="mSign_signMark_signature_pad" class="mSign_signMark_body_box">
<div class="mSign_signMark_body">
<span class="mSign_signMark_clear_out">
<img src="../images/mCommon_basicIcon_deleteRed.png">
</span>
<p>手写区</p>
<canvas id="mSign_signMark_canvas"></canvas>
</div>
</div>
</div>
</div>
<!--手写区 end-->
<!--底部按钮-->
<div class="mSign_signMark_footer">
<span id="mSign_signMark_clear_out" class="mSign_signMark_footer_cancle">清除</span>
<span id="mSign_signMark_submit" class="mSign_signMark_footer_sure">确定</span>
</div>
<!--底部按钮 end-->

CSS样式:

.mSign_signMark_box{padding: 15px 15px 26px 15px;}
.mSign_signMark_footer{max-width:640px;margin:0 auto;height: 44px;background: #4ba7eb;position: fixed;bottom: 0;left: 0;right: 0;color:#fff;font-size: 16px;text-align: center;line-height: 44px;}
.mSign_signMark_footer span{display: block;width: 50%;text-align: center;float: left;}
.mSign_signMark_footer_cancle{background: #f4f4f5;color: #333333;}
/*手写签名*/
.mSign_signMark_write_box{position: relative;height: 240px;}
.mSign_signMark_body_box {position: absolute;background-color: #fff;border: 1px solid #ccc;top:0;left: 0;right: 0;bottom: 0;width: 99%;height: auto;min-width: 250px;min-height: 140px;}
.mSign_signMark_body {position: absolute;left: 0;right: 0;top: 0;bottom: 0;}
.mSign_signMark_body canvas {position: absolute;left: 0;top: 0;width: 100%;height: 100%;}
.mSign_signMark_body p{position: absolute;font-size: 14px;color: #ccc;text-align: center;width: 100%;top: 50%;margin-top: -22px;}
.mSign_signMark_clear_out{position: absolute;top:-10px;right: -5px;z-index: 10;display: none;}
.mSign_signMark_clear_out img{width: 18px;height: 18px;}

页面引入JS:

//手写区触摸事件
$(function() {
var ctouch=$('.mSign_signMark_body canvas');
ctouch.bind("touchstart",function(event){
$('.mSign_signMark_body p').hide();
});
ctouch.mouseover(function(event) {
$('.mSign_signMark_body p').hide();
});
});

手写签名引入js文件:

链接:http://pan.baidu.com/s/1miP3sFm
密码:8x7q

实现效果如下:

canvas画布实现手写签名效果的更多相关文章

  1. uni-app通过canvas实现手写签名

    分享一个uni-app实现手写签名的方法 具体代码如下: <template> <view > <view class="title">请在下面 ...

  2. Ionic5手写签名SignaturePad

    测试程序下载:https://hanzhe.lanzous.com/itt47kncw3a 初始化项目 1. 首先新建一个Ionic5的项目: ionic start test-1 blank 2. ...

  3. Blazor组件自做二 : 使用JS隔离制作手写签名组件

    Blazor组件自做二 : 使用JS隔离制作手写签名组件 本文相关参考链接 JavaScript 模块中的 JavaScript 隔离 Viewer.js工程 Blazor组件自做一 : 使用JS隔离 ...

  4. Particles.js基于Canvas画布创建粒子原子颗粒效果

    文章目录 使用方法 自定义参数 相关链接 Particles.js是一款基于HTML5 Canvas画布的轻量级粒子动画插件,可以设置粒子的形状.旋转.分布.颜色等属性,还可以动态添加粒子,效果非常炫 ...

  5. 用canvas实现手写签名功能

    最近开发网站有一个需求,要求页面上有一块区域,用户能用鼠标在上面写字,并能保存成图片 base64 码放在服务器.这样的需求用 canvas 实现是最好的.需要用到 canvas 的以下几个属性: b ...

  6. html5手写签名

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta co ...

  7. css3纯手写loading效果

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  8. canvas 实现签名效果

    效果图 概述 在线签名,现在在很多场景下都能看到,而且在移动端见的比较多. 用canvas和svg都可以实现,而且跨平台能力也很好. canvas基于像素,提供 2D 绘制函数,提供的功能更原始,适合 ...

  9. WORD2003电子签名插件(支持手写、签章)

    1.引言 WORD电子签名插件,支持手写.本地电子图章.以及网络图章功能.软件使用VC6,以ATL方式编写,软件小巧精致. 这是我学习ATL的成果,学习过程及程序的编写,前前后后共用了一个多月的时间, ...

随机推荐

  1. 移动端效果之Swiper

    写在前面 最近在做移动端方面运用到了饿了么的vue前端组件库,因为不想单纯用组件而使用它,故想深入了解一下实现原理.后续将会继续研究一下其他的组件实现原理,有兴趣的可以关注下. 代码在这里:戳我 1. ...

  2. 第9期Unity User Group Beijing图文报道:《Unity实战经验分享》

    时间来到了金秋九月,北京UUG活动也来到了第九期.本次活动的主题为<Unity实战经验分享>,为此我们邀请了3位资深的行业大神.这次我们仍然在北京市海淀区丹棱街5号微软大厦举行活动,在这里 ...

  3. MySQL(十三)之MySQL事务

    前言 这段时间自己会把之前学的东西都总结一遍,希望对自己以后的工作中有帮助.其实现在每天的状态都是很累的,但是我要坚持! 进入我们今天的正题: 为什么MySQL要 有事务呢?事务到底是用来干什么的?我 ...

  4. ASP.NET Core 处理 404 Not Found

    问题 在没有修改任何配置的情况下,这是用户使用 Chrome 访问不存在的URL时会看到的内容: 幸运的是,处理错误状态代码非常简单,我们将在下面介绍三种技术. 解决方案 在以前的ASP.NET MV ...

  5. 【特效】hover效果之十字动画

    效果预览:http://www.gbtags.com/gb/rtreplayerpreview-standalone/3101.htm html: <div class="wrap&q ...

  6. HTTP错误代码大全

    HTTP出错大全 101 - Switching Protocols Top Success Codes 200 - OK201 - Created202 - Accepted203 - Non-Au ...

  7. VB6文件操作自定义函数合集之一

    '--与文件及文件夹操作相关的函数 '--必须引用FSO的ACTIVE OBJECT Dim strList As String '--列表串,返回文件列表 '================ '-- ...

  8. C# 动态加载卸载 DLL

    我最近做的软件,需要检测dll或exe是否混淆,需要反射获得类名,这时发现,C#可以加载DLL,但不能卸载DLL.于是在网上找到一个方法,可以动态加载DLL,不使用时可以卸载. 我在写一个WPF 程序 ...

  9. Servlet中路径信息总结

    ./ 当前目录 ../ 父级目录 / 根目录 资源寻找都是依靠路径,资源存储方式是按照哈希表运算的,所以路径的计算其实就是哈希值的计算. servlet中,所有路径的配置都要用绝对路径. 什么是绝对路 ...

  10. eclispe中安装hibernate插件

    用eclispe玩ee的朋友,写配置文件的时候没有提示非常苦恼,而配置dtd文件还是没有得到解决,最后试了试安装插件解决了问题 地址:http://download.jboss.org/jbossto ...