canvas手写签名横屏,h5 利用canvas手写签名并保存

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

　　超文本标记语言代码：

　　！-手写区-div class= mSign _ sign mark _ box div class= mSign _ sign mark _ write _ box div id= mSign _ sign mark _ signature _ pad class= mSign _ sign mark _ body _ box div class= mSign _ sign mark _ body span class= mSign _ sign mark _ clear _ out img src=./images/m common _ basic icon _ delete redpng /span p手写区/p canvas id= mSign _ sign mark _ canvas /canvas/div/div/div/div！-手写区end -！-底部按钮-div class= mSign _ sign mark _ footer span id= mSign _ sign mark _ clear _ out class= mSign _ sign mark _ footer _ cancel 清除/span span id= mSign _ sign mark _ submit class= mSign _ sign mark _ footer _ sure 确定/span /div！-底部按钮end - CSS样式：mSign _ sign mark _ box { padding:15px 15px 26px 15px；}.mSign _ sign mark _ footer { max-width:640 px；边距：0自动；身高：44px背景：# 4 ba 7 EB位置：固定；底部：0;左：0;右：0;颜色：# fff字体大小：16px文本对齐：居中；行高：44px}。mSign _ sign mark _ footer span { display:block；宽度：50%;文本对齐：居中；浮动：左；}.mSign _ sign mark _ footer _ can cle { background:# f4f 4 f 5；颜色：# 333333;}/*手写签名*/.mSign _ sign mark _ write _ box { position:relative；高度：240px}。mSign _ sign mark _ body _ box { position:absolute；背景色：# fff边框：1px纯色# cctop:0；左：0;右：0;底部：0;宽度：99%;高度：自动；最小宽度：250像素；最小高度：140px}。mSign _ sign mark _ body { position:absolute；左：0;右：0;top:0；底部：0;}.mSign _ sign mark _ body canvas { position:absolute；左：0;top:0；宽度：100%;身高：100%;}.mSign _ sign mark _ body p { position:absolute；字体大小：14px颜色：# ccc文本对齐：居中；宽度：100%;top:50%；margin-top:-22px；}.mSign _ sign mark _ clear _ out { position:absolute；top:-10px；右：-5px；z指数：10;显示：无；}.mSign _ sign mark _ clear _ out img { width:18px；高度：18px}页面引入JS:

　　//手写区触摸事件$(function() { var ctouch=$( .mSign _ sign mark _ body canvas’)；ctouch.bind(touchstart ，function(event){ $( .mSign _ sign mark _ body p’).hide()；});c摸。鼠标悬停在(函数(事件){ $( .mSign _ sign mark _ body p’).hide()；});});手写签名引入射流研究…文件地址：qianmian-js_jb51.rar

　　实现效果如下：

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

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。