web实现签名功能

2023-04-25 09:41| 来源: 网络整理| 查看: 265

需求:将原生app的功能转移到h5来做，签名，动画等功能。

签名核心：canvans，这里推荐一个比较好用的jq插件：jSignature，有兴趣的可以去官网查看相关的api

首先，看html页面

视频播放 body,html{ width: 100%; height: 100%; -webkit-overflow-scrolling: touch; } *{ margin:0; padding:0; border:0; } #signCont{ width: 1000px; height: 400px; position: absolute; left: 50%; top:50%; margin-left: -500px; margin-top: -200px; border: 2px solid #ccc; } 复制代码

其中的signCont是用来初始化canvans的容器，贴出js代码

var dHeight = document.getElementById("signCont").offsetHeight + "px"; var dWidth = document.getElementById("signCont").offsetWidth ; $("#signCont").jSignature({'UndoButton':false,'height':dHeight,'width':dWidth,'signatureLine':false,'lineWidth':'2','decor-color':'#fff'});　复制代码

参数中的 UndoButton 是用来设置是否显示清楚上一步的按钮，signatureLine是该插件默认的一个下划线，默认为true,false为不显示（亲测不成功，所以设置'decor-color'的颜色与背景色一致时，就会将默认的横线去掉。），lineWidth为线宽。

签名时画的canvans图形还可以使用png、jpg等格式将其保存，具体使用方法可以查看官方文档及demo，总的来说，改插件适合移动端、pc端，功能强大

链接地址：www.jq22.com/demo/jSigna…

【本文地址】

公司简介

联系我们