HTML5を使用すると、要素とその関連JavaScript APIを使用して、グラフィックをWebページにまっすぐ描畫できます。 この投稿では、HTML5 Canvas API用の無料でオープンソースのJQueryベースのライブラリであるJcanvasを紹介します。

jQueryを使用して開発すると、JCanvasをjQuery構文を使用してクールなキャンバス図面とインタラクティブアプリケーションを簡単かつ迅速にコーディングできます。

キーテイクアウト

JCanvasは、jQueryをHTML5 Canvas APIと統(tǒng)合する無料のオープンソースライブラリで、jQuery構文を使用してグラフィックスとインタラクティブアプリケーションの作成を簡素化します。

jcanvasを利用するには、jcanvasスクリプトとjQueryの両方をプロジェクトに含め、jQueryの構造に基づいているJcanvasメソッドの使用を可能にする必要があります。

JCanvasは、ネイティブキャンバスメソッドとの互換性を維持しながら、レイヤー、イベント、ドラッグアンドドロップ、アニメーションなどの追加機能を備えたネイティブキャンバスAPIを強化します。 キャンバス上の描畫形狀、テキスト、畫像は、jcanvasを通じて合理化されており、さまざまなカスタマイズ可能なプロパティを受け入れるdrawRect（）、drawarc（）、drawimage（）などの方法を使用して。
• JCanvasは、レイヤー操作やアニメーションなどの高度な機能をサポートし、複雑なグラフィック作成とWebページでのダイナミックでインタラクティブなユーザーエクスペリエンスを可能にします。
• jcanvasとは？
• JCanvasのWebサイトで説明しています
• jCanvasは、JQueryを使用して書かれたJavaScriptライブラリであり、JQueryのためにHTML5 Canvas APIを包み込み、新しい機能と機能を追加します。これらはカスタマイズ可能です。機能には、レイヤー、イベント、ドラッグアンドドロップ、アニメーションなどが含まれます
結果は、html5キャンバスにパワーと容易さをもたらす砂糖のようなjquery風の構文に包まれた柔軟なAPIです。
JCanvasを使用すると、ネイティブキャンバスAPIなどでできるすべてのことを行うことができます。必要に応じて、JCanvasを使用してネイティブHTML5 Canvas APIメソッドを使用することもできます。 draw（）メソッドは、まさにこの目的を果たします。さらに、extend（）機能を使用して、獨自のメソッドとプロパティを使用してJcanvasを簡単に拡張できます。

プロジェクトにjcanvasを追加します

プロジェクトにJCanvasを含めるには、公式WebサイトまたはGitHubページからスクリプトをダウンロードしてから、プロジェクトフォルダーに含めます。前述のように、Jcanvasは仕事にjQueryを必要とするので、それも含めてください。

プロジェクトのスクリプトファイルは、次のようになります：

最後の1つは、JCanvas APIを使用してカスタムJavaScriptを配置する場所です。次に、JCanvasをテストドライブに使用してみましょう

HTMLドキュメントのセットアップ

を使用するには、基本的なHTML5ドキュメントに要素タグを追加することから始めます。

上記のコードスニペットについて興味のある點がいくつかあります。

• デフォルトでは、描畫表面の寸法は300px x 150pxです。このデフォルトサイズを要素のマークアップ內の幅と高さの屬性で変更できます。
ID屬性を追加することは必須ではありませんが、JavaScriptを使用して要素に簡単にアクセスする方法になります。 要素內のコンテンツは、ビットマップ畫像です。これにより、支援技術のユーザーがアクセスできなくなります。また、Canvas APIをサポートしていないブラウザは、コンテンツにアクセスしたり、コンテンツと対話したりすることはできません。したがって、をよりアクセスしやすくすることを目的としたテクニックはまだ利用可能になりますが、このカテゴリのユーザーにいくつかのフォールバックコンテンツを追加することは推奨されるプラクティスです。
ネイティブキャンバスAPIを使用する場合、JavaScriptは次のようになります。
• 上記のコードの変數(shù)コンテキストは、Canvasオブジェクトの2Dコンテキストプロパティへの參照を保存します。 HTML5 Canvas APIによって公開された他のすべてのプロパティと方法にアクセスできるのは、このプロパティです。
トピックについて詳しく知りたい場合は、HTML5 Canvasチュートリアル：Ivaylo Gerchevによる紹介は素晴らしい読み物です。

JCanvasメソッドとプロパティには、すでに2Dコンテキストへの參照が含まれているため、描畫に直接ジャンプできます。

jcanvas

<scriptjs/jcanvas.min.js><span><span><span></script</span>></span>
</span><scriptmyCanvas" width<span>="600"</span> height<span>="300"</span>>
  <span><span><span><p</span>></span>This is fallback content 
</span>  for users of assistive technologies 
  or of browsers that don't have 
  full support for the Canvas API.<span><span><span></p</span>></span>
</span><span><span><span></canvas</span>></span></span>

xおよびyは、キャンバス內の長方形の水平位置と垂直位置に対応する座標を設定します。

x

の値

0
• の値と
y
• の場合は
0
• 、つまり（0、0）は、左上隅に対応します。キャンバスの。 X座標は右に増加し、Y座標はキャンバスの底に向かって増加します。長方形を描畫するとき、デフォルトでは、jcanvasはxとy座標を採用して形狀の中心に橫たわります。 これを変更して、xとyが長方形の左上隅に対応するように、fromcenterプロパティをfalseに設定します。
最後に、幅と高さの特性は長方形の寸法を設定します。
• ここに長方形の形狀のデモがあります：アークと円

  arcsは円のリムの一部です。 jcanvasでは、描畫アークは、drawarc（）メソッド內のいくつかのプロパティに目的の値を設定するだけの問題です。

  描畫アークには、RADIUSプロパティの値と、程度の開始および終了角度を設定することが含まれます。アークの方向を反時計回りにしたい場合は、上記のコードにCCWプロパティを追加して、それを真に設定します。

  上記のコードのCodepenデモ：

  <scriptjs/jcanvas.min.js><span><span><span></script</span>></span>
  </span><scriptresult" data-height="411" data-slug-hash="eJrJoK" data-theme- data-user="SitePoint">ペンjcanvasの例を參照してください：CodepenのSitePointの笑顔（@sitepoint）。
  
  線とパスの描畫<p>
  </p>drawline（）メソッドを使用してJcanvasを使用してjcanvasですぐに線を描畫し、線が接続する一連のポイントをプロットできます。
  
  <p>
  
  </p>上記のコードは、丸みを帯びたプロパティとクローズドプロパティを真に設定し、それによってラインの角を丸くし、トレースされたパスを閉じます。
  <show>を參照してくださいjcanvasの例：CodepenのSitePoint（@sitepoint）による接続された行。
  
  <pre class="brush:php;toolbar:false"><span><span><span><canvas</span> id<span>="myCanvas"</span> width<span>="600"</span> height<span>="300"</span>></span>
  </span>  <span><span><span><p</span>></span>This is fallback content 
  </span>  for users of assistive technologies 
    or of browsers that don't have 
    full support for the Canvas API.<span><span><span></p</span>></span>
  </span><span><span><span></canvas</span>></span></span>

  DrawPath（）メソッドを使用して柔軟なパスを描畫することもできます。パスを1つ以上の接続された線、アーク、曲線、またはベクトルと考えてください。

  drawpath（）メソッドは、各ポイント內のサブパスのポイントのマップとxおよびy座標のマップを受け入れます。また、描畫するパスのタイプ、例えばライン、アークなどを指定する必要があります。

  drawpath（）とdraw arrows（）を使用して、接続された矢印のペアを水平および垂直方向に指す矢印を描畫する方法は次のとおりです。 ??>
  各サブパスのxおよびy座標は、パス全體のxおよびy座標に関連しています。

  そして、ここに結果があります：

  描畫テキスト

  適切な名前のdrawText（）メソッドを使用して、キャンバスにテキストをすばやく描畫できます。これが機能するために必要な主なプロパティは次のとおりです。

  テキスト。このプロパティをキャンバスに表示したいテキストコンテンツに設定します。 「Hello World」
  fontsize。このプロパティの値は、キャンバス上のテキストのサイズを決定します。このプロパティの値を數(shù)字で設定できます。これは、jcanvasがピクセルの値として解釈される：fontsize：30。あるいはポイントを使用できますが、そのような場合、引用符：fontsize： '30pt內の測定を指定する必要があります。 '
  fontfamilyを使用すると、テキスト畫像の書體を指定できます。「verdana、sans-serif」。
  サンプルコードは次のとおりです

  そして、これはWebページの要素內の様子です：

  Pen JCanvasの例を參照してください：CodepenでSitePoint（@SitePoint）でテキストを描畫します。

  <scriptjs/jcanvas.min.js><span><span><span></script</span>></span>
  </span><scriptresult" data-height="403" data-slug-hash="KVRzPZ" data-theme- data-user="SitePoint">
  
  
  
  <h2>これが、上記のコードがどのようにレンダリングするかです：</h2>
  <p>ペンjcanvasの例を參照してください：CodepenでSitePoint（@SitePoint）で畫像をインポートして操作します。
  
  </p>上記のすべての例をここで1つのCodePenデモに組み合わせて表示していじります。
  <pre class="brush:php;toolbar:false"><span><span><span><canvas</span> id<span>="myCanvas"</span> width<span>="600"</span> height<span>="300"</span>></span>
  </span>  <span><span><span><p</span>></span>This is fallback content 
  </span>  for users of assistive technologies 
    or of browsers that don't have 
    full support for the Canvas API.<span><span><span></p</span>></span>
  </span><span><span><span></canvas</span>></span></span>

  canvas layers
  PhotoshopやGimpなどの畫像エディターアプリケーションを使用したことがある場合は、すでにレイヤーに精通しています。レイヤーを使用することのクールな部分は、キャンバス上の各畫像を個別に操作して、獨自のレイヤーに描畫することで操作できることです。

  JCanvasは、キャンバスベースのデザインに柔軟性を追加する強力なレイヤーAPIを提供します。

  JCanvasレイヤーの使用方法の概要を次に示します。

  レイヤーの追加

  各レイヤーに1つのオブジェクトのみを描畫できます。 Jcanvasプロジェクトにレイヤーを2つの方法のいずれかで追加できます。
  addlayer（）メソッドを使用して、drawlayers（）メソッド

  を使用します

  描畫方法のいずれか內でレイヤープロパティを真に設定します

  青い長方形を描くための最初の手法を適用する方法は次のとおりです。

  codepenのSitePoint（@sitepoint）のペンpzengpを參照してください

  そして、同じ長方形を描くために2番目の方法を適用する方法は次のとおりです。
  • CodepenのSitePoint（@SitePoint）のPEN ZRJQKBを參照してください。
  • ご覧のとおり、上記のそれぞれで同じ結果が得られます。

  上記の両方のコードサンプルで注目すべき重要なポイントは、レイヤーが名前を介して設定した名前を持っていることです。これにより、このレイヤーをコードで參照し、インデックス値の変更、アニメーション化、削除など、あらゆる種類のクールなことを簡単に行うことができます。

  これがどのようにできるか見てみましょう。

  レイヤーのアニメ

  Animatelayer（）メソッドを使用して、JCanvasを使用してレイヤーベースの図面にアニメーションをすばやく追加できます。この方法では、次のパラメーターを受け入れます
  レイヤーの
  index
  • またはname アニメーション化するプロパティのキー値のペアを持つオブジェクト
  ミリ秒単位のアニメーションの期間
  • 。これはオプションのパラメーターであり、設定しない場合、デフォルトは
  400
  • になります。 アニメーションの緩和。これはオプションのパラメーターでもあります。設定しないと、デフォルトで
  • アニメーションが完了したときに実行されるオプションのコールバック関數(shù)。 Animatelayer（）メソッドが動作しているのを見てみましょう。レイヤーに半透明のオレンジ色の円を描き、その位置、色、不透明なプロパティをアニメーション化します。
  • 以下のデモをチェックして、アニメーションをご覧ください：
  このCodepenデモで組み合わされた3つの以前の例をすべて表示できます。

  ドラッグレイヤー

  <scriptjs/jcanvas.min.js><span><span><span></script</span>></span>
  </span><scriptresult" data-height="413" data-slug-hash="xZjVqv" data-theme- data-user="SitePoint">
  
  上記のスニペットは、次の2つのドラッグ可能な長方形の層を描畫します：draggable：true。また、BringTofrontプロパティの使用に注意してください。これにより、レイヤーをドラッグすると、他のすべての既存のレイヤーの前面に自動的に押されるようになります。
  <p>最後に、コードはレイヤーを回転させ、ボックスシャドウを設定します。これらの効果をjcanvas図面にすばやく追加する方法を示すために。
  </p>結果は次のようになります：<h3>
  </h3> <p></p>
  <p>ドラッグレイヤーの前、最中、または移動後、アプリに何かをしたい場合、JCanvasは、関連するイベント中にコールバック関數(shù)をサポートすることでこれを簡単に達成できます。
  </p>
  レイヤーのドラッグを開始すると、<pre class="brush:php;toolbar:false"><span><span><span><canvas</span> id<span>="myCanvas"</span> width<span>="600"</span> height<span>="300"</span>></span>
  </span>  <span><span><span><p</span>></span>This is fallback content 
  </span>  for users of assistive technologies 
    or of browsers that don't have 
    full support for the Canvas API.<span><span><span></p</span>></span>
  </span><span><span><span></canvas</span>></span></span>

  ドラッグスタートトリガー

  レイヤーをドラッグするときに

  fireをドラッグします

  レイヤーのドラッグを停止するとき、

  ドラッグストップトリガー
  ドラッグキャンセルは、キャンバスの描畫表面の境界からレイヤーをドラッグすると発生します。

  ユーザーがレイヤーのドラッグを終了した後、ページにメッセージを表示したいとします。ドラッグストップイベントにコールバック関數(shù)を追加することにより、上記のコードスニペットを再利用できます。

  <script src="js/jquery.min.js><span><span><span></script</span>></span>
  </span><script src="js/jcanvas.min.js><span><span><span></script</span>></span>
  </span><script src="js/script.js><span><span><span></script</span>></span></span>

  各正方形をドラッグした後、ページにメッセージが表示されたメッセージが表示されます。以下のデモで試してみてください：

  CodepenのSitePoint（@SitePoint）によるコールバック関數(shù)を備えたペンドラッグJCanvasレイヤーを參照してください。

  結論

  この投稿では、HTML5 Canvas APIで動作する新しいjQueryベースのライブラリであるJcanvasを紹介しました。 Jcanvasの方法とプロパティのいくつかを説明しました。これにより、キャンバスの表面に描き、視覚効果、アニメーション、ドラッグ可能なレイヤーを追加できます。

  Jcanvasでできることはたくさんあります。 Jcanvasのドキュメントについては、詳細なガイダンスと例をご覧ください。JcanvasのWebサイトのサンドボックスですばやくテストできます。 この記事に付隨するために、jcanvas drawline（）メソッドを使用して、Codepenに基本的な塗裝アプリケーションをまとめました。

  CodepenでSitePoint（@SitePoint）のペンJCanvas Paintingアプリを參照してください。

  機能を追加し、結果をSitePointコミュニティと共有することで、お気軽にお気軽にお気軽に

  jcanvasに関するよくある質問（FAQ）：jqueryはHTML5キャンバス

  jcanvasとは何ですか？jqueryとhtml5キャンバスとどのように関連していますか？

  jcanvasは、jqueryとhtml5キャンバスの機能を組み合わせた強力なJavaScriptライブラリです。 。 JQueryのシンプルさと汎用性、高速、小、および機能が豊富なJavaScriptライブラリ、およびWebページにグラフィックを描畫するために使用されるHTML要素であるHTML5キャンバスのグラフィカルパワーを活用しています。 JCanvasは、形狀を描畫し、アニメーションの作成、イベントの処理などを描くためのシンプルで一貫したAPIを提供します。 htmlファイルにjqueryライブラリとjcanvasライブラリを含める。これらのライブラリをそれぞれのWebサイトからダウンロードするか、コンテンツ配信ネットワーク（CDN）を使用できます。これらのライブラリを含めたら、jcanvas関數(shù)を使用してキャンバスを描畫し始めます。たとえば、drawRect（）関數(shù)を使用して長方形、drawarc（）関數(shù)を描畫してアークを描畫し、drawpolygon（）関數(shù)を描畫してポリゴンを描畫できます。これらの各関數(shù)は、その位置、サイズ、色など、形狀の特性を指定するプロパティオブジェクトを受け入れます。はい、Jcanvasはキャンバスで形狀をアニメーション化できる強力なアニメーション機能を提供します。 Animate（）関數(shù)を使用して、指定された期間にわたって形狀のプロパティをアニメーション化できます。この関數(shù)はjQueryアニメーションエンジンを使用するため、jQueryが提供するすべての緩和関數(shù)をサポートします。たとえば、Click（）関數(shù)を使用してClickイベント、MouseOver（）関數(shù)を処理してMouseOverイベントを処理し、Mousedown（）機能を処理してMousedownイベントを処理できます。これらの各関數(shù)は、イベントが発生したときに呼び出されるコールバック関數(shù)を受け入れます。 Webページで。形狀を描き、アニメーションを作成し、イベントを処理するなど、幅広い機能を提供します。 jcanvasを使用すると、シンプルな形狀から複雑なアニメーション、インタラクティブなグラフィックまで、Jcanvasはすべてのブラウザーと互換性がありますか？これには、Google Chrome、Mozilla Firefox、Apple Safari、Microsoft Edgeの最新バージョンが含まれます。ただし、これらのブラウザはHTML5キャンバス要素をサポートしていないため、インターネットエクスプローラーをサポートしていません。 Jcanvasが詳細なエラーメッセージを提供して問題のトラブルシューティングを支援するため、エラーメッセージのコンソールを確認できます。また、ライブラリとその機能に関する包括的な情報を提供するjcanvasドキュメントを參照することもできます。

  jcanvasを商業(yè)プロジェクトで使用できますか？つまり、個人プロジェクトと商業(yè)プロジェクトの両方で無料で使用できます。ただし、ソフトウェアまたはそのドキュメントのコピーに元の著作権通知と免責事項を含める必要があります。包括的なドキュメント、例、およびチュートリアルを提供する公式Webサイト。また、Stack OverflowやSitePointなど、Web開発のWebサイトやフォーラムで有用な情報を見つけることもできます。

以上がjcanvasの紹介：jqueryはHTML5キャンバスに會いますの詳細內容です。詳細については、PHP 中國語 Web サイトの他の関連記事を參照してください。