jcanvasの紹介：jqueryはHTML5キャンバスに会います

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

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

キーテイクアウト

JCanvasは、jQueryをHTML5 Canvas APIと統合する無料のオープンソースライブラリで、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は次のようになります。
• 上記のコードの変数コンテキストは、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。このプロパティの値は、キャンバス上のテキストのサイズを決定します。このプロパティの値を数字で設定できます。これは、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 id="これが-上記のコードがどのようにレンダリングするかです">これが、上記のコードがどのようにレンダリングするかです：</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
  • になります。 アニメーションの緩和。これはオプションのパラメーターでもあります。設定しないと、デフォルトで
  • アニメーションが完了したときに実行されるオプションのコールバック関数。 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は、関連するイベント中にコールバック関数をサポートすることでこれを簡単に達成できます。
  </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をドラッグします

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

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

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

  <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）によるコールバック関数を備えたペンドラッグ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関数を使用してキャンバスを描画し始めます。たとえば、drawRect（）関数を使用して長方形、drawarc（）関数を描画してアークを描画し、drawpolygon（）関数を描画してポリゴンを描画できます。これらの各関数は、その位置、サイズ、色など、形状の特性を指定するプロパティオブジェクトを受け入れます。はい、Jcanvasはキャンバスで形状をアニメーション化できる強力なアニメーション機能を提供します。 Animate（）関数を使用して、指定された期間にわたって形状のプロパティをアニメーション化できます。この関数はjQueryアニメーションエンジンを使用するため、jQueryが提供するすべての緩和関数をサポートします。たとえば、Click（）関数を使用してClickイベント、MouseOver（）関数を処理してMouseOverイベントを処理し、Mousedown（）機能を処理してMousedownイベントを処理できます。これらの各関数は、イベントが発生したときに呼び出されるコールバック関数を受け入れます。 Webページで。形状を描き、アニメーションを作成し、イベントを処理するなど、幅広い機能を提供します。 jcanvasを使用すると、シンプルな形状から複雑なアニメーション、インタラクティブなグラフィックまで、Jcanvasはすべてのブラウザーと互換性がありますか？これには、Google Chrome、Mozilla Firefox、Apple Safari、Microsoft Edgeの最新バージョンが含まれます。ただし、これらのブラウザはHTML5キャンバス要素をサポートしていないため、インターネットエクスプローラーをサポートしていません。 Jcanvasが詳細なエラーメッセージを提供して問題のトラブルシューティングを支援するため、エラーメッセージのコンソールを確認できます。また、ライブラリとその機能に関する包括的な情報を提供するjcanvasドキュメントを参照することもできます。

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

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