web实现签名功能

1,897 阅读1分钟

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

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

首先,看html页面

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>视频播放</title>
    <style type="text/css">
        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;
        }
    </style>
    <script src="image/jquery.min.js" type="text/javascript"></script>
    <script src="jSignature.min.js"></script>
</head>
<body ontouchmove="event.preventDefault()">
    <div id="signCont"></div>
</body>
</html>

其中的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…