移动端jquery+html5手写签名（横屏）_html5手写签名资源-CSDN文库

共4个文件

js：3个

html：1个

jquery

html5

css3

canvas

3星 · 超过75%的资源需积分: 44 189 浏览量 2018-12-27 11:08:02 上传评论 6 收藏 48KB RAR 举报

在移动端开发中，有时我们需要实现用户手写签名的功能，例如在电子商务、电子文档签署等领域。本项目通过结合jQuery、HTML5和CSS3技术，提供了一种横屏模式下的手写签名解决方案，支持完美回显和复用。接下来，我们将详细探讨这些技术在实现这一功能时所扮演的角色以及具体实现步骤。 jQuery是一个轻量级的JavaScript库，它简化了DOM操作、事件处理、动画制作和Ajax交互。在这个项目中，jQuery主要负责页面元素的动态交互，如监听设备方向改变事件，根据横竖屏切换调整布局。 HTML5是下一代超文本标记语言，提供了许多增强用户体验的新特性。其中，`<canvas>`元素是关键，它允许在网页上进行动态图形绘制。在这个签名功能中，`<canvas>`用于创建一个画布，用户可以在上面进行签名操作，所有的笔触都会被记录下来。 CSS3则用于美化和优化页面布局。在这个场景下，CSS3的媒体查询（Media Queries）至关重要，它允许我们根据设备屏幕尺寸和方向来应用不同的样式。横屏模式下，可能需要调整画布的宽高比和布局，以适应更宽的屏幕空间。实现过程大致如下： 1. 创建HTML结构：设置一个`<canvas>`元素作为签名区域，并为横屏模式设计合适的样式。 2. 使用jQuery监听设备方向变化：当设备旋转至横屏时，调整canvas元素的宽度和高度，确保签名区域适应新的屏幕尺寸。 3. JavaScript初始化画布：获取canvas的2D绘图上下文，设置线条颜色、宽度等属性。 4. 监听canvas的鼠标或触摸事件：当用户在画布上移动手指或鼠标时，持续绘制线条。每次移动都调用绘图上下文的`moveTo()`和`lineTo()`方法，记录起始位置和结束位置，然后用`stroke()`方法绘制线条。 5. 实现完美回显：将用户的所有签名动作存储为路径数据，可以使用`path2d`对象来方便地保存和恢复路径。当需要回显签名时，只需重新绘制这些路径即可。 6. 提供复用功能：用户完成签名后，可以通过序列化canvas的绘图数据，将其保存到服务器或者本地存储。下次需要时，反序列化并重新绘制到canvas上。总结来说，这个项目利用了jQuery的便利性，HTML5的动态绘图能力，以及CSS3的响应式布局特性，构建了一个高效且易用的移动端横屏手写签名组件。无论是从技术角度还是用户体验来看，这都是一个值得学习和借鉴的实例。

资源推荐

资源详情

资源评论

收起资源包目录

js手写签名.rar （4个子文件）

js手写签名

signName.html 2KB

jSignature.js 46KB

signName.js 2KB

jquery-1.10.1.min.js 92KB

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1" /> <style type="text/css"> *{ margin:0; padding:0; } .content{ width:100%; overflow:hidden; position:relative; } .signWraper{ height:100%; width:100%; overflow:hidden; display: flex; position: absolute; left: 100%; z-index: 2; } .signWraper .handlerDiv{ flex: 1; height: 100%; display: flex; justify-content: space-around; align-items: center; flex-direction: column; background: #fff; } .signWraper .handlerDiv button{ transform: rotate(90deg); -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -o-transform: rotate(90deg); -ms-transform: rotate(90deg); background: -moz-linear-gradient(left, #f9E29C, #E7BD75); background: -webkit-linear-gradient(left, #f9E29C, #E7BD75); background: -o-linear-gradient(left, #f9E29C, #E7BD75); width: 100%; height: 35px; border: 0; border-radius: 5px; } .signImg{ width: 180px; display:none; } .signatureparent { color: darkblue; background-color: darkgrey; width: 75%; height: 100%; display: flex; justify-content: center; align-items: center; } .signatureparent>div{ border: 2px dotted black; background-color:lightgrey; height: 90%; width:80%; } </style> </head> <body> <div class="content"> <div class="signWraper"> <div class="handlerDiv"> <button id="reset" type="button" onclick="reset()">重置签名</button> <button id="getSign" type="button" onclick="getSign()">生成签名</button> </div> <div class="signatureparent"> <div id="signature"></div> </div> </div> <div> <button id="goSign" type="button" style="width:100px;height:40px;margin:20px" onclick="goSign()">签名</button> </div> <div> <div>签名图片：</div> <div style="text-align:center;"> <img id="signImg" class="signImg" src=""> </div> </div> </div> <script src="jquery-1.10.1.min.js"></script> <script src="jSignature.js"></script> <script src="signName.js"></script> </body> </html>

评论收藏

内容反馈