jpgaus/canvassignature

canvasSignature是基于html5 canvas及jquery实现手写签名（电子签名）功能的js组件

canvasSignature简介    手写签名（电子签名canvasSignature.js)使用示例

canvasSignature是基于html5 canvas及jquery实现手写签名（电子签名）功能的js组件

---

1、开始工作：

需要最先引入jquery (Bootstrap中文网开源项目免费 CDN 服务)：

```html <script type="text/javascript" src="//cdn.bootcss.com/jquery/1.9.1/jquery.min.js"></script> ```

我们需要在页面中引入关键js：

```html <script type="text/javascript" src="....../canvasSignature.js"></script> ```

2、使用：

html：

（html canvas签名框准备，id为test可自定义）

```html 您的浏览器当前不支持canvas画布，请更换别的浏览器进行签名操作 ```

js（相应的方法调用）：

初始化签名样式（这里仅支持一个签名，如需多个签名框需改写组件）

```javascript $('#test').canvasSignature({ fillStyle:'transparent', //生成图片背景色，默认为透明 lineWidth:10, //笔画粗细（尺寸），默认为四像素粗细 strokeStyle:'red' //笔画颜色，默认为黑色 }); ```

清除重写

```javascript $('#test').clearSignature(); ```

生成图片（生成图片格式base64包括：jpg、png格式）

```javascript $('#test').createSignature('png'); ```

3、方法说明：

方法名	参数	说明
canvasSignature	fillStyle：生成图片背景色，默认为透明(字符串) lineWidth：笔画粗细（尺寸），默认为四像素粗细(数字) strokeStyle：笔画颜色，默认为黑色(字符串) 注意：参数是以对象形式传入，如: $('#test').canvasSignature({ fillStyle:'transparent', //生成图片背景色，默认为透明 lineWidth:10, //笔画粗细（尺寸），默认为四像素粗细 strokeStyle:'red' //笔画颜色，默认为黑色 });	初始化签名框（主要）
clearSignature	无	清除签名
createSignature	生成图片格式base64包括：jpg、png格式(默认可不填)(字符串) 注意：参数是以字符串形式传入，如: $('#signName').createSignature('png');	生成图片

4、兼容性：

兼容IE9及以上浏览器（支持canvas标签功能的浏览器）