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

零下一度
リリース: 2017-05-09 11:00:11
オリジナル
3732 人が閲覧しました

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プラグインプラグイン

-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 サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート