HTML5 と Canvas を使用して署名プラグインをサポートする方法-H5 チュートリアル-php.cn

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

はじめに

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

方法は以下の通りです:

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

rreee

htmlstructure

ログイン後にコピー

initializationプラグインプラグイン

ログイン後にコピー

-CONFIGURATIONパラメーターこの署名プラグインの利用可能なパラメーターはあります。 :
パラメータ説明
データ属性
例幅署名キャンバスの幅、単位ピクセル、デフォルト値 data-width="60 0" $( ).jqSignature({width: 600}); 署名キャンバスの高さ、単位ピクセル、デフォルト値100 data-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'}); 線幅署名線の幅、単位ピクセル、デフォルト値は 1 data-line-width="2" $().jqSignature({li neW idth: 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 サイトの他の関連記事を参照してください。