最近公司有一个新的需求，将app的功能全部转移到h5来做，包括了签名，动画等功能。
签名核心使用的就是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端，功能强大
链接地址：http://www.jq22.com/demo/jSignature-master201704170038/