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