利用html5以及canvas实现支持签名插件的方法

前言

大家在日常开发中使用该jQuery插件来制作在线签名，用户绘制的东西以图片的形式保存下来，非常方便实用。下面将实现支持的方法分享给大家，供大家参考学习，下面来一起看看详细的介绍吧。

方法如下：

使用该签名插件要引入jQuery和jq-signature.js文件。

 script src= jquery/1.11.0/jquery.min.js /script  script src= jq-signature.js /script 

HTML结构

 !-- 创建一个签名区域，使用HTML5的data-option来传递一些参数 --  p >
初始化插件
//页面加载完毕之后使用下面的方法来初始化该签名插件$(document).on( ready , function() { $( .js-signature ).jqSignature();function clearCanvas() { $( #signature ).html( p em Your signature will appear here when you click Save Signature /em /p  $( .js-signature ).jqSignature( clearCanvas  $( #saveBtn ).attr( disabled , true);function saveSignature() { $( #signature ).empty(); var dataUrl = $( .js-signature ).jqSignature( getDataURL  var img = $( img ).attr( src , dataUrl); $( #signature ).append($( p ).text( Here s your signature: )); $( #signature ).append(img);$( .js-signature ).on( jq.signature.changed , function() { $( #saveBtn ).attr( disabled , false);});
配置参数
下面是该签名插件的一些可用参数，这些参数可以同时在data-attributes上使用：
参数描述Data Attribute示例Width签名canvas的宽度，单位像素，默认值300data-width= 600 $().jqSignature({width: 600});Height签名canvas的高度，单位像素，默认值100data-height= 200 $().jqSignature({height: 200});Border签名canvas的边框CSSyangshi_10628_1.html' target='_blank'>CSS样式。默认为 1px solid #AAAAAA data-border= 1px solid red $().jqSignature({border: 1px solid red Background签名canvas的背景颜色，默认值为 #FFFFFF data-background= #EEEEEE $().jqSignature({background: #EEEEEE Line Color签名的颜色。默认值为#222222 data-line-color= #ABCDEF $().jqSignature({lineColor: #ABCDEF Line Width签名的线宽，单位像素，默认值为1data-line-width= 2 $().jqSignature({lineWidth: 2});Auto Fit使canvas占满父元素的宽度，默认值falsedata-auto-fit= true $().jqSignature({autoFit: true});

【相关推荐】
1. 免费h5在线视频教程
2. HTML5 完整版手册
3. VeVb.com原创html5视频教程
以上就是利用html5以及canvas实现支持签名插件的方法的详细内容，其它编程语言        
郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。