html 手写字效果,canvas画布实现手写签名效果的示例代码

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

HTML代码:

mCommon_basicIcon_deleteRed.png

手写区

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();

});

});

实现效果如下:

128f3def017e0ed36ca58d7c3bf66db1.png

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/265283.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

FTP云盘

参考:FTP云盘项目 作者:糯米啊啊 发布时间: 2021-08-19 10:34:05 网址:https://blog.csdn.net/weixin_43732386?spm1001.2014.3001.5509 参考:自制FTP云盘项目 作者:不说话的小脑斧 发布时间: …

html transform属性,css3 transform属性详解

CSS3变形是一些效果的集合,比如平移translate() 、旋转rotate()、缩放scare()和倾斜skew()效果,每个效果都被称作为变形函数(Transform Function),它们可以操控元素发生旋转、缩放、和平移等变化。CSS3的2D transform函数包括了translate()、scale()、ro…

PHP调用新浪API 生成短链接

我们经常收到类似于这样的短信(如下图),发现其中的链接并不是常规的网址链接,而是个短小精悍的短链接,产品中经常需要这样的需求,如果在给用户下发的短信中是一个很长的连接,用户体验肯定很差&a…

Chrome如何下载网页视频

目录第一步:右键,选择「检查」指令,进入代码控制面板第二步:单击代码面板左上角红色标出来的按钮,然后鼠标移到左边视频上第三步:双击src后面的代码(全部展开),复制粘贴到…

单链表反转

参考:【图文解析】反转一个单链表 作者:giturtle 发布时间: 2019-03-18 15:26:38 网址:https://blog.csdn.net/qq_42351880/article/details/88637387?spm1001.2014.3001.5501 目录例题描述思路代码实现例题描述 反转一个链表 …

MODBUS通讯协议详解(基于485)

参考:灵育科技Modbus课程总结 作者:Naunyang 时间:2020-11-23 13:51:58 网址:https://blog.csdn.net/Naunyang/article/details/108740456?spm1001.2014.3001.5502 参考:MODBUS用于单片机通讯 作者:hillch…

C\C++与Java中的static关键字

C\C里面的static: 面向过程的static: 在c和c面向过程的设计里,在全局变量前加上static关键字则可将该变量定义为一个静态全局变量,比如: static int a; 那么c和c中的静态全局变量有什么特点呢: 1、 变…

步进电机、伺服电机、舵机、无刷电机、有刷电机区别

更多干货推荐可以去牛客网看看,他们现在的IT题库内容很丰富,属于国内做的很好的了,而且是课程刷题面经求职讨论区分享,一站式求职学习网站,最最最重要的里面的资源全部免费!!!点击进…

PID算法实现温控

参考:PID算法 作者:hillchina 发布时间: 2016-09-28 21:48:04 网址:https://www.bilibili.com/video/BV1Ds411t7Hr 以上完整的视频教程在腾讯课堂里有,在腾讯课堂里搜索PID,找到灵育科技,课程对…

[Unity3d]多个摄像机叠加效果

今天学习到一个多个摄像机看到的场景在同一个层显示,比如我们做一个类似反光镜的效果,当然反光镜可以直接用Shader来实现,但我就是了实现一个类比这样的一个效果,一个摄像机将看到的图像显示到一个Texture上,然后将Tex…

Java关键字final使用详解

2019独角兽企业重金招聘Python工程师标准>>> http://docs.oracle.com/javase/tutorial/java/IandI/final.htmlWriting Final Classes and MethodsYou can declare some or all of a classs methods final. You use the final keyword in a method declaration to in…

一行代码揭开CPU执行原理

参考:一行代码,揭开CPU执行原理! 作者:嵌入式ARM 网址:https://mp.weixin.qq.com/s/qFnKhWqBGRCFAnp_KC1dmw 目录1、高级语言2、编译链接3、机器指令4、指令格式5、执行指令拓展总结很多刚刚入坑的小白可能对此完全没有…

redhat 挂载 iso文件 提示 mount :not a directory

redhat 挂载 iso文件 提示 mount :not a directory posted on 2013-12-28 22:26 秦瑞It行程实录 阅读(...) 评论(...) 编辑 收藏 转载于:https://www.cnblogs.com/ruiy/p/errors.html

C语言常见编译错误及分析

更多干货推荐可以去牛客网看看,他们现在的IT题库内容很丰富,属于国内做的很好的了,而且是课程刷题面经求职讨论区分享,一站式求职学习网站,最最最重要的里面的资源全部免费!!!点击进…

面经——嵌入式常见面试题总结100题(上)

更多干货推荐可以去牛客网看看,他们现在的IT题库内容很丰富,属于国内做的很好的了,而且是课程刷题面经求职讨论区分享,一站式求职学习网站,最最最重要的里面的资源全部免费!!!点击进…

计算机专业运动会口号,运动会口号押韵有气势 计算机系霸气口号

淡泊明志,宁静致远,团结友爱,顽强拼搏。下面是文艺范收集的运动会口号押韵有气势,计算机系霸气口号,欢迎阅读收藏。1、球进了球,分了就会,不怕**,战无不胜。2、阳光运动,…

1. 观察者模式总结(C++)

1. 介绍 观察者模式:定义了一种“一对多”的依赖关系,让多个观察者对象同时监听一个对象的改变,即当该对象的状态发现改变时,会通知所有它依赖的观察者对象。观察者模式属于行为模式。 意图:定义对象间的一种一对多的依…

面经——嵌入式常见面试题总结100题(下)

更多干货推荐可以去牛客网看看,他们现在的IT题库内容很丰富,属于国内做的很好的了,而且是课程刷题面经求职讨论区分享,一站式求职学习网站,最最最重要的里面的资源全部免费!!!点击进…

学计算机要不要护发,脱发平时应该注意什么 四个妙招教你如何防止脱发

头发一掉,失去的不仅仅是发丝,还有美丽与颜值,一把把辛酸泪只能往肚子里吞。秃头星人们,如果已经脱发了,日常一定要加倍注意哦,一些错误的护发方法不要踩坑,护理、食疗、良好的生活作息&#xf…

面经——嵌入式软件工程师ARM体系与架构相关

参考:嵌入式软件工程师笔试面试指南-ARM体系与架构 作者:嵌入式与Linux那些事 发布时间: 2021-04-28 15:22:06 网址:https://blog.csdn.net/qq_16933601/article/details/116234673 目录 ARM体系与架构硬件基础NAND FLASH 和NOR F…