前言

大家在日常開發中使用該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實現支持簽名插件的方法的詳細內容，其它編程語言        
鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。