HTML5 と Canvas を使用して署名プラグインをサポートする方法

jq-signature.js は、署名の作成を支援する jQuery プラグインで、ユーザーがマウス、指、または鉛筆を使用して署名を生成できるようにします。次の記事では、html5+canvasを使用してタッチスクリーンをサポートする署名プラグインを実装するための関連情報を主に紹介します。必要な友人は参照してください。

はじめに

日常の開発では、誰もがオンライン署名を作成するためにこのjQueryプラグインを使用しています。ユーザーが描いたものは画像の形式で保存され、非常に便利で実用的です。サポートの実施方法については、皆さんの参考と学習のために共有しますので、詳細な紹介を見てみましょう。

方法は以下の通りです:

この署名プラグインを使用するには、jQueryとjq-signature.jsファイルをインポートする必要があります。

rreee

htmlstructure

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

initializationプラグインプラグイン

<!-- 创建一个签名区域，使用HTML5的data-option来传递一些参数 -->
<p class="js-signature" 
 data-width="600" 
 data-height="200" 
 data-border="1px solid #1ABC9C" 
 data-background="#16A085" 
 data-line-color="#fff" 
 data-auto-fit="true">
</p>
 
<!-- 创建两个操作按钮，分别用于清空画板和保存签名 -->
<button id="clearBtn" onclick="clearCanvas();">Clear Canvas</button>
<button id="saveBtn" onclick="saveSignature();" disabled>Save Signature</button>
 
<!-- 可以使用一个空的<p>来显示保存的签名图片 -->
<p id="signature"></p>

-CONFIGURATIONパラメーターこの署名プラグインの利用可能なパラメーターはあります。 :

パラメータ説明

データ属性

例幅署名キャンバスの幅、単位ピクセル、デフォルト値data-width="60 0" $( ).jqSignature({width: 600});署名キャンバスの高さ、単位ピクセル、デフォルト値100data-height="200"$().jqSignature({height : 200 });Border署名キャンバスの Border CSS スタイル。デフォルトは '1px ソリッド #AAAAAA' ですdata-border="1px ソリッドレッド"$().jqSignature({border: '1px ソリッドレッド'});Backgroundの背景色署名キャンバス、デフォルト値は '#FFFFFF' ですdata-background="#EEEEEE"$().jqSignature({background: '#EEEEEE'});Line Color色署名の。デフォルト値は #222222' ですdata-line-color="#ABCDEF"$().jqSignature({lineColor: '#ABCDEF'});線幅署名線の幅、単位ピクセル、デフォルト値は 1data-line-width="2"$().jqSignature({lineWidth: 2});Auto Fit はキャンバスを塗りつぶします。親要素 幅、デフォルト値は false$().jqSignature({autoFit: true});【関連する推奨事項】 1.

			300
	Height
			data-auto-fit="true"

無料の h5 オンラインビデオチュートリアル

2.

HTML5 フルバージョンマニュアル

3.

php.cn オリジナルの HTML5 ビデオチュートリアル

以上がHTML5 と Canvas を使用して署名プラグインをサポートする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。