\n<\/p>私たちの最初の傑作
\/\/ 創(chuàng)建舞臺\n var stage = acgraph.create('stage-container');\n \/\/ 繪制矩形\n var stage.rect(25, 50, 350, 300);<\/pre>\n塗りつぶし、ストローク、パターンの塗りつぶし<\/p>\n
任意の形狀またはパスは、塗りつぶし設(shè)定とストローク設(shè)定を使用して色付けできます。すべてにストローク（境界）がありますが、形狀と閉じたパスのみがパディングを持っています。充填およびストロークの設(shè)定は非常に豊富で、線形または円形の勾配を使用して塗りつぶしとストロークを使用できます。さらに、線に點在し、サポート畫像に複數(shù)のタイルモードが埋められます。しかし、これはほとんどすべてのライブラリで見つけることができるかなり標(biāo)準(zhǔn)的なものです。 GraphicsJSを特別なものにしているのは、メッシュとパターンの塗りつぶし機(jī)能です。これにより、32（！）の使用可能なメッシュフィルパターンを直接使用できるだけでなく、形狀やテキストで作られたカスタムパターンを簡単に作成できます。 <\/h2>\nさあ、正確に何を達(dá)成できるか見てみましょう！私は家の近くに立っている男の簡単な絵を描き、それを強(qiáng)化するために異なるパターンと色でそれを満たします。簡単にするために、それを幼稚な蕓術(shù)絵畫にしましょう（そして、蕓術(shù)の粗さを伴わないようにしてください）。それだけです：<\/h3>\n
\n<\/p> Codepenで結(jié)果を表示します。
\n<\/p>ご覧のとおり、変數(shù)を使用しています。ステージ上のコンテンツを描畫するすべての方法は、作成されたオブジェクトへの參照を返し、このリンクを使用してオブジェクトを変更または削除できます。
\/\/ 創(chuàng)建舞臺\n var stage = acgraph.create('stage-container');\n\n \/\/ 繪制框架\n var frame = stage.rect(25, 50, 350, 300);\n\n \/\/ 繪制房子\n var walls = stage.rect(50, 250, 200, 100);\n var roof = stage.path()\n .moveTo(50, 250)\n .lineTo(150, 180)\n .lineTo(250, 250)\n .close();\n\n \/\/ 繪制一個人\n var head = stage.circle(330, 280, 10);\n var neck = stage.path().moveTo(330, 290).lineTo(330, 300);\n var kilt = stage.triangleUp(330, 320, 20);\n var rightLeg = stage.path().moveTo(320, 330).lineTo(320, 340);\n var leftLeg = stage.path().moveTo(340, 330).lineTo(340, 340);<\/pre>\nまた、チェーンコール（例えば）がGraphicsJSのいたるところにある方法に注意してください。これにより、コードの短縮に役立ちます。チェーンコールは注意して使用する必要がありますが、適切に適用すると、コードがよりコンパクトで読みやすくなります。 <\/p>
さあ、この著色ページを子供に渡して、ペイントさせましょう。子供でさえ次のテクニックを習(xí)得できるからです\n<\/p>\n
\n \n \n \n GraphicsJS Basic Example<\/title> \n <\/head>\n <body>
<h1><a href="http://ipnx.cn/">亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱</a></h1>\n <div class="wjcelcm34c" id=\"stage-container\" style=\"width: 400px; height: 375px;\"><\/div>\n\n <??>\n <??>\n <\/body>\n <\/html><\/pre>これが私たちの例の見た目です。 <p>\n<\/p>今、私たちはキルトの隣に立っているハイランダーが屋根の上にわらを置いて彼のレンガの城の近くに立っていることの寫真を持っています。これは確かに著作権を取得したい蕓術(shù)作品であると言うリスクさえあります。カスタムテキストに基づいてパターン記入を使用してこれを行いましょう：<p>\n<em>\n<\/em>ご覧のとおり、これは簡単です。テキストオブジェクトのインスタンスを作成し、ステージ上にパターンを形成し、テキストをパターンに入れます。 <\/p>\n<pre class='brush:php;toolbar:false;'> \/\/ 創(chuàng)建舞臺\n var stage = acgraph.create('stage-container');\n \/\/ 繪制矩形\n var stage.rect(25, 50, 350, 300);<\/pre>CodePenで色の著作権で保護(hù)された家\/グラフィックスを表示します。 <p>\n<\/p>50行未満のコードでパズルアートゲームを作成<p>\nこの記事の次の部分では、50行未満のコードでGraphicsJSを使用してCookieクリッカーのようなゲームを作成する方法を紹介します。 <\/p>\n<h2>ゲーム名は<\/h2>「風(fēng)の中で通りを掃除する」<このゲームは、GraphicsJSギャラリーのプログラムで生成された葉の例のコードを使用しています。 <p>\n<\/p> CodePen（または記事の終わり）で完成したゲームを表示できます。 <p>\n<em>レイヤー、zindexおよび仮想dom<\/em>\n<\/p>最初にステージを作成し（前述のように）、いくつかの初期変數(shù)を宣言します。\n<p>\nこのゲームでは、レイヤーを使用します - グラフィックスのオブジェクトは、要素をグループ化するために使用されます。同様の変更を要素（変換など）に適用する場合は、要素をグループ化する必要があります。パフォーマンスとユーザーエクスペリエンスを向上させる可能性のあるレイヤーを一時停止モードで変更できます（これについては詳細(xì)）。 <\/p>\nこのデモでは、レイヤー関數(shù)を使用して、葉をグループ化し、ラベルを覆うのを避けます（葉が掃引されている葉の數(shù)がわかります）。これを行うには、タグを作成し、ステージバインディングレイヤーを作成する<h3>メソッドを呼び出します。このレイヤーの<\/h3>プロパティを、ラベルの下の<p>プロパティに設(shè)定します。 <\/p>\n<pre class='brush:php;toolbar:false;'> \/\/ 創(chuàng)建舞臺\n var stage = acgraph.create('stage-container');\n\n \/\/ 繪制框架\n var frame = stage.rect(25, 50, 350, 300);\n\n \/\/ 繪制房子\n var walls = stage.rect(50, 250, 200, 100);\n var roof = stage.path()\n .moveTo(50, 250)\n .lineTo(150, 180)\n .lineTo(250, 250)\n .close();\n\n \/\/ 繪制一個人\n var head = stage.circle(330, 280, 10);\n var neck = stage.path().moveTo(330, 290).lineTo(330, 300);\n var kilt = stage.triangleUp(330, 320, 20);\n var rightLeg = stage.path().moveTo(320, 330).lineTo(320, 340);\n var leftLeg = stage.path().moveTo(340, 330).lineTo(340, 340);<\/pre>\n<p>これを行った後、レイヤーで作成した葉の數(shù)に関係なく、テキストを上書きしないようにすることができます。 <\/p>\n<p>変換<code>stage.layer<\/code>\n<code>zIndex<\/code>次に、葉を描く関數(shù)を追加しましょう。これにより、便利なGraphicsJS変換APIが使用されます。これにより、要素と要素のグループを移動、スケーリング、回転、およびカットできます。これは、レイヤーと仮想DOMと組み合わせると、非常に強(qiáng)力なツールです。 <code>zIndex<\/code>\n<\/p>\n<pre class='brush:php;toolbar:false;'> \/\/ 給圖片著色\n \/\/ 精美的框架\n frame.stroke([\"red\", \"green\", \"blue\"], 2, \"2 2 2\");\n \/\/ 磚墻\n walls.fill(acgraph.hatchFill('horizontalbrick'));\n \/\/ 草屋頂\n roof.fill(\"#e4d96f\");\n \/\/ 格子呢裙\n kilt.fill(acgraph.hatchFill('plaid'));<\/pre>各パスが同じ方法で作成されていることがわかりますが、変換が実行されます。これにより、非常に美しいランダムな葉のパターンが生成されます。 <p>\n<\/p>イベントの処理<h3>\nグラフィックスのオブジェクト、ステージ、およびレイヤーは、イベントを処理できます。サポートされているイベントの完全なリストは、EventType APIにあります。レンダリングを制御するための4つの特別なイベントがステージにあります。 <\/h3>このゲームの例では、ユーザーがそれらの上に浮かんだときに1つずつ消えるように、Leafオブジェクトに接続されたイベントリスナーを使用しています。これを行うには、<p>ステートメントの前に、次のコードを<code>drawLeaves<\/code>関數(shù)の下部に追加します：<code>return<\/code>\n<\/p>\n<pre class='brush:php;toolbar:false;'> <!DOCTYPE html>\n <html lang=\"en\">\n <head>\n <meta charset=\"utf-8\" \/>\n <title>GraphicsJS Basic Example<\/title> \n <\/head>\n <body>\n <div class="wjcelcm34c" id=\"stage-container\" style=\"width: 400px; height: 375px;\"><\/div>\n\n <??>\n <??>\n <\/body>\n <\/html><\/pre>ここでは、葉を計算するために層を使用していることもわかります。 <p>\n<\/p>\n<pre class='brush:php;toolbar:false;'> \/\/ 創(chuàng)建舞臺\n var stage = acgraph.create('stage-container');\n \/\/ 繪制矩形\n var stage.rect(25, 50, 350, 300);<\/pre>ここに葉の數(shù)を?qū)g際に保存していないことに注意してください。特定の層に葉を追加し、それらから葉を取り除くため、これにより、私たちが持っている子供の要素の數(shù)を追跡できます（したがって、殘りの葉の數(shù)）。 <p>\n<\/p>GraphicsJSは、ブラウザ固有のSVG\/VMLの実裝とは別に、抽象的で軽量で、獨(dú)立した仮想DOMを提供します。すべてのオブジェクトとレイヤーの追跡、グループへの変換の適用、レンダリングをヘルプで最適化するなど、多くの素晴らしいことを行うことで非常に便利です。レンダリングプロセスを追跡および制御できます。 <p>\n<\/p>パフォーマンスの最適化<h3>\n<\/h3>仮想DOMおよびイベントハンドラーにより、GraphicsJSユーザーはレンダリングを制御できます。パフォーマンス記事は、これらの內(nèi)容間の関係を理解するのに役立ちます。 <p>\n<\/p>ゲームで葉を生成する場合、新しい葉を追加するときにレンダリングを一時停止する必要があり、すべての変更が完了した後にレンダリングを再開する必要があります。\n<p>\n<\/p>新しい要素を扱うこの方法により、新しい葉がほとんどすぐに表示されます。 <pre class='brush:php;toolbar:false;'> \/\/ 創(chuàng)建舞臺\n var stage = acgraph.create('stage-container');\n\n \/\/ 繪制框架\n var frame = stage.rect(25, 50, 350, 300);\n\n \/\/ 繪制房子\n var walls = stage.rect(50, 250, 200, 100);\n var roof = stage.path()\n .moveTo(50, 250)\n .lineTo(150, 180)\n .lineTo(250, 250)\n .close();\n\n \/\/ 繪制一個人\n var head = stage.circle(330, 280, 10);\n var neck = stage.path().moveTo(330, 290).lineTo(330, 300);\n var kilt = stage.triangleUp(330, 320, 20);\n var rightLeg = stage.path().moveTo(320, 330).lineTo(320, 340);\n var leftLeg = stage.path().moveTo(340, 330).lineTo(340, 340);<\/pre>\n<p>最後に、<\/p>を呼び出してすべてを開始します。 <p>\n<code>shakeTree()<\/code>\n<\/p>最終結(jié)果<pre class='brush:php;toolbar:false;'> \/\/ 給圖片著色\n \/\/ 精美的框架\n frame.stroke([\"red\", \"green\", \"blue\"], 2, \"2 2 2\");\n \/\/ 磚墻\n walls.fill(acgraph.hatchFill('horizontalbrick'));\n \/\/ 草屋頂\n roof.fill(\"#e4d96f\");\n \/\/ 格子呢裙\n kilt.fill(acgraph.hatchFill('plaid'));<\/pre>\n<h3>CodepenでStreet Cleaner\/GraphicsJsを表示します。 <\/h3>\n<p>結(jié)論<\/p>\n<h2> HTML5への移行により、ネットワークが変更されました。最新のWebアプリケーションやシンプルなWebサイトでさえ、畫像処理が必要なタスクに遭遇することがよくあります。あらゆる場合にうまく機(jī)能するソリューションを見つけることは不可能ですが、GraphicsJSライブラリを考慮する必要があります。これはオープンソースで、堅牢で、優(yōu)れたブラウザのサポートと、楽しく、便利で、もちろん便利な多くの機(jī)能を備えています。 <\/h2>\n<p>以下のコメントでGrphicsJSに関するフィードバックを聞いてみたいです。あなたはすでにそれを使用していますか？新しいプロジェクトに使用することを検討しますか？理由を知りたいのですが、なぜ使わないのかを知りたいです。また、それらすべてを比較して比較するライブラリと記事を描く主要なJavaScriptのリストを執(zhí)筆しています。そこに見たい機(jī)能を自由に指摘してください。 <\/p>さらに読むための<h2>リンク<\/h2>\n<ul>\n<li>一般情報<ul>\n<li>svg <\/li>\n<li>canvas<\/li>\n<li>svg vs. canvas<\/li>\n<\/ul>\n<\/li>\n<li>ライブラリ<ul>\n<li>graphicsjs<\/li>\n<li>rapha?l<\/li>\n<li>snap.svg<\/li>\n<li>bonsaijs <\/li>\n<\/ul>\n<\/li>\n<li>graphicsjs<ul>\nGithub <li>のグラフィックスです\n<\/li>GraphicsJSドキュメント<li>\n<\/li>graphicsjs apiリファレンス<li>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>グラフィックスの質(zhì)問<h2>\n<\/h2> GraphicsJsは他のJavaScriptグラフィックライブラリとどのように違いますか？ <h3>\n<\/h3>グラフィックスは、その強(qiáng)力で軽量な性質(zhì)で際立っています。これは、開発者が高精度と高性能であらゆるグラフィックを描畫してアニメーション化できる強(qiáng)力なライブラリです。他のライブラリとは異なり、GraphicsJSは、速度や効率に影響を與えることなく、レイヤー、勾配、パターンなどを含む包括的な機(jī)能セットを提供します。また、すべての最新のブラウザをサポートしており、開発者にとって多用途のオプションになっています。 <p>\n<\/p>グラフィックスを始めるにはどうすればよいですか？ <h3>\n<\/h3>GraphicsJSを開始するには、HTMLファイルにGraphicsJSライブラリを含める必要があります。公式ウェブサイトからライブラリをダウンロードするか、CDNを使用できます。ライブラリが含まれたら、ライブラリが提供する適切な機(jī)能とメソッドを呼び出すことにより、グラフィックの作成を開始できます。 <p>\n<\/p>グラフィックスを使用して複雑なアニメーションを作成できますか？ <h3>\n<\/h3>はい、GraphicsJSは複雑なアニメーションを簡単に処理するように設(shè)計されています。緩和機(jī)能、遅延、期間設(shè)定など、アニメーション機(jī)能の豊富なセットを提供します。グラフの屬性、その位置、サイズ、色など、アニメーション化できます。これにより、GraphicsJSはインタラクティブで動的なグラフィックを作成するための強(qiáng)力なツールになります。 <p>\n<\/p>GraphicsJSはすべてのブラウザと互換性がありますか？ <h3>\n<\/h3>GraphicsJSは、Chrome、Firefox、Safari、Internet Explorerなど、すべての最新のブラウザーと互換性があるように設(shè)計されています。レンダリングにはSVGとVMLを使用していますが、これらはすべてそれらをサポートしています。これにより、グラフィックが一貫して見えるようになり、さまざまなプラットフォームやデバイスでうまく機(jī)能します。 <p>\n<\/p>グラフィックスを使用してグラデーションを作成する方法は？ <h3>\n<\/h3>グラフィックスでグラデーションを作成するのは簡単です。勾配法を使用して、線形または放射狀の勾配を定義し、色と位置を指定し、任意の形狀に勾配を適用できます。これにより、カラフルなグラフィックを簡単に作成できます。 <p>\n<\/p>グラフィックスを使用してインタラクティブなグラフィックを作成できますか？ <h3>\n<\/h3>はい、GraphicsJSは、インタラクティブなグラフィックを作成できる一連のイベント処理機(jī)能を提供します。イベントリスナーを任意のグラフに添付して、クリック、マウスの動きなどのユーザーアクションに応答できます。これにより、GraphicsJSはインタラクティブなWebアプリケーションを作成するための優(yōu)れた選択肢になります。 <p>\n<\/p>GraphicsJSはレイヤーをサポートしていますか？ <h3>\n<\/h3>はい、GraphicsJSはレイヤーをサポートし、グラフィックを個別のグループに整理できるようにします。各レイヤーは獨(dú)立して操作できるため、複雑なグラフィックを簡単に管理できます。また、各レイヤーの可視性とZオーダーを制御することもでき、グラフィックの細(xì)粒を制御できます。 <p><\/p>\n<h3>グラフィックスを使用してグラフィックを最適化する方法は？ <\/h3>\n<p>GraphicsJSは、グラフィックを最適化するのに役立ついくつかの機(jī)能を提供します。たとえば、作物方式を使用して、指定された領(lǐng)域の外側(cè)のグラフィックスの一部を非表示にすることで、必要なレンダリングの量を減らすことができます。キャッシュメソッドを使用して、グラフィックのレンダリングされた出力を保存することもできます。これにより、グラフィックを頻繁に塗り直すとパフォーマンスが向上します。 <\/p>\n<h3>グラフィックスを使用してチャートとグラフィックを作成できますか？ <\/h3>\n<p>GraphicsJSはチャートやグラフィックを作成するために特別に設(shè)計されていませんが、その強(qiáng)力な図面とアニメーション機(jī)能により、チャートやグラフィックを含むあらゆるタイプのグラフィックを作成できます。ライブラリの方法を使用して、線、曲線、長方形、円などを描畫して、さまざまなチャートタイプを作成できます。 <\/p>\n<h3> GraphicsJsは自由に使用できますか？ <\/h3>\n<p>はい、GraphicsJSは無料のオープンソースライブラリです。プロジェクトで無料で使用できます。また、ライブラリは、最新のWeb標(biāo)準(zhǔn)とテクノロジーと同期していることを確認(rèn)するために積極的に維持されています。 <\/p>"} </script>
<meta http-equiv="Cache-Control" content="no-transform" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<script>var V_PATH="/";window.onerror=function(){ return true; };</script>
</head>
<body data-commit-time="2023-12-28T14:50:12+08:00" class="editor_body body2_2">
<link rel="stylesheet" type="text/css" href="/static/csshw/stylehw.css">
<header>
<div id="wjcelcm34c" class="head">
<div id="wjcelcm34c" class="haed_left">
<div id="wjcelcm34c" class="haed_logo">
<a href="http://ipnx.cn/ja/" title="" class="haed_logo_a">
<img src="/static/imghw/logo.png" alt="" class="haed_logoimg">
</a>
</div>
<div id="wjcelcm34c" class="head_nav">
<div id="wjcelcm34c" class="head_navs">
<a href="javascript:;" title="コミュニティ" class="head_nava head_nava-template1">コミュニティ</a>
<div class="wjcelcm34c" id="dropdown-template1" style="display: none;">
<div id="wjcelcm34c" class="languagechoose">
<a href="http://ipnx.cn/ja/article.html" title="記事" class="languagechoosea on">記事</a>
<a href="http://ipnx.cn/ja/faq/zt" title="トピックス" class="languagechoosea">トピックス</a>
<a href="http://ipnx.cn/ja/wenda.html" title="に質(zhì)問" class="languagechoosea">に質(zhì)問</a>
</div>
</div>
</div>
<div id="wjcelcm34c" class="head_navs">
<a href="javascript:;" title="學(xué)ぶ" class="head_nava head_nava-template1_1">學(xué)ぶ</a>
<div class="wjcelcm34c" id="dropdown-template1_1" style="display: none;">
<div id="wjcelcm34c" class="languagechoose">
<a href="http://ipnx.cn/ja/course.html" title="コース" class="languagechoosea on">コース</a>
<a href="http://ipnx.cn/ja/dic/" title="プログラミング辭典" class="languagechoosea">プログラミング辭典</a>
</div>
</div>
</div>
<div id="wjcelcm34c" class="head_navs">
<a href="javascript:;" title="ツールライブラリ" class="head_nava head_nava-template1_2">ツールライブラリ</a>
<div class="wjcelcm34c" id="dropdown-template1_2" style="display: none;">
<div id="wjcelcm34c" class="languagechoose">
<a href="http://ipnx.cn/ja/toolset/development-tools" title="開発ツール" class="languagechoosea on">開発ツール</a>
<a href="http://ipnx.cn/ja/toolset/website-source-code" title="公式サイト" class="languagechoosea">公式サイト</a>
<a href="http://ipnx.cn/ja/toolset/php-libraries" title="PHP ライブラリ" class="languagechoosea">PHP ライブラリ</a>
<a href="http://ipnx.cn/ja/toolset/js-special-effects" title="JS特殊効果" class="languagechoosea on">JS特殊効果</a>
<a href="http://ipnx.cn/ja/toolset/website-materials" title="サイト素材" class="languagechoosea on">サイト素材</a>
<a href="http://ipnx.cn/ja/toolset/extension-plug-ins" title="拡張プラグイン" class="languagechoosea on">拡張プラグイン</a>
</div>
</div>
</div>
<div id="wjcelcm34c" class="head_navs">
<a href="http://ipnx.cn/ja/ai" title="AIツール" class="head_nava head_nava-template1_3">AIツール</a>
</div>
<div id="wjcelcm34c" class="head_navs">
<a href="javascript:;" title="レジャー" class="head_nava head_nava-template1_3">レジャー</a>
<div class="wjcelcm34c" id="dropdown-template1_3" style="display: none;">
<div id="wjcelcm34c" class="languagechoose">
<a href="http://ipnx.cn/ja/game" title="ゲームのダウンロード" class="languagechoosea on">ゲームのダウンロード</a>
<a href="http://ipnx.cn/ja/mobile-game-tutorial/" title="ゲームのチュートリアル" class="languagechoosea">ゲームのチュートリアル</a>
</div>
</div>
</div>
</div>
</div>
<div id="wjcelcm34c" class="head_search">
<input id="key_words" onkeydown="if (event.keyCode == 13) searchs('ja')" class="search-input" type="text" autocomplete="off" name="keywords" required="required" placeholder="Block,address,transaction,news" value="">
<a href="javascript:;" title="検索" onclick="searchs('ja')"><img src="/static/imghw/find.png" alt="検索"></a>
</div>
<div id="wjcelcm34c" class="head_right">
<div id="wjcelcm34c" class="haed_language">
<a href="javascript:;" class="layui-btn haed_language_btn">日本語<i class="layui-icon layui-icon-triangle-d"></i></a>
<div class="wjcelcm34c" id="dropdown-template" style="display: none;">
<div id="wjcelcm34c" class="languagechoose">
<a href="javascript:setlang('zh-cn');" title="簡體中文" class="languagechoosea">簡體中文</a>
<a href="javascript:setlang('en');" title="English" class="languagechoosea">English</a>
<a href="javascript:setlang('zh-tw');" title="繁體中文" class="languagechoosea">繁體中文</a>
<a href="javascript:;" title="日本語" class="languagechoosea">日本語</a>
<a href="javascript:setlang('ko');" title="???" class="languagechoosea">???</a>
<a href="javascript:setlang('ms');" title="Melayu" class="languagechoosea">Melayu</a>
<a href="javascript:setlang('fr');" title="Fran?ais" class="languagechoosea">Fran?ais</a>
<a href="javascript:setlang('de');" title="Deutsch" class="languagechoosea">Deutsch</a>
</div>
</div>
</div>
<span id="wjcelcm34c" class="head_right_line"></span>
<div style="display: block;" id="login" class="haed_login ">
<a href="javascript:;" title="Login" class="haed_logina ">Login</a>
</div>
<div style="display: block;" id="reg" class="head_signup login">
<a href="javascript:;" title="singup" class="head_signupa">singup</a>
</div>
</div>
</div>
</header>
<main>
<div id="wjcelcm34c" class="Article_Details_main">
<div id="wjcelcm34c" class="Article_Details_main1">
<div id="wjcelcm34c" class="Article_Details_main1L">
<div id="wjcelcm34c" class="Article_Details_main1Lmain" id="Article_Details_main1Lmain">
<div id="wjcelcm34c" class="Article_Details_main1L1">目次</div>
<div id="wjcelcm34c" class="Article_Details_main1L2" id="Article_Details_main1L2">
<!-- 左側(cè)懸浮，文章定位標(biāo)題1 id="Article_Details_main1L2s_1"-->
<div id="wjcelcm34c" class="Article_Details_main1L2s ">
<a href="#任意の形狀またはパスは-塗りつぶし設(shè)定とストローク設(shè)定を使用して色付けできます-すべてにストローク-境界-がありますが-形狀と閉じたパスのみがパディングを持っています-充填およびストロークの設(shè)定は非常に豊富で-線形または円形の勾配を使用して塗りつぶしとストロークを使用できます-さらに-線に點在し-サポート畫像に複數(shù)のタイルモードが埋められます-しかし-これはほとんどすべてのライブラリで見つけることができるかなり標(biāo)準(zhǔn)的なものです-GraphicsJSを特別なものにしているのは-メッシュとパターンの塗りつぶし機(jī)能です-これにより-の使用可能なメッシュフィルパターンを直接使用できるだけでなく-形狀やテキストで作られたカスタムパターンを簡単に作成できます" title="任意の形狀またはパスは、塗りつぶし設(shè)定とストローク設(shè)定を使用して色付けできます。すべてにストローク（境界）がありますが、形狀と閉じたパスのみがパディングを持っています。充填およびストロークの設(shè)定は非常に豊富で、線形または円形の勾配を使用して塗りつぶしとストロークを使用できます。さらに、線に點在し、サポート畫像に複數(shù)のタイルモードが埋められます。しかし、これはほとんどすべてのライブラリで見つけることができるかなり標(biāo)準(zhǔn)的なものです。 GraphicsJSを特別なものにしているのは、メッシュとパターンの塗りつぶし機(jī)能です。これにより、32（！）の使用可能なメッシュフィルパターンを直接使用できるだけでなく、形狀やテキストで作られたカスタムパターンを簡単に作成できます。 " >任意の形狀またはパスは、塗りつぶし設(shè)定とストローク設(shè)定を使用して色付けできます。すべてにストローク（境界）がありますが、形狀と閉じたパスのみがパディングを持っています。充填およびストロークの設(shè)定は非常に豊富で、線形または円形の勾配を使用して塗りつぶしとストロークを使用できます。さらに、線に點在し、サポート畫像に複數(shù)のタイルモードが埋められます。しかし、これはほとんどすべてのライブラリで見つけることができるかなり標(biāo)準(zhǔn)的なものです。 GraphicsJSを特別なものにしているのは、メッシュとパターンの塗りつぶし機(jī)能です。これにより、32（！）の使用可能なメッシュフィルパターンを直接使用できるだけでなく、形狀やテキストで作られたカスタムパターンを簡単に作成できます。 </a>
</div>
<div id="wjcelcm34c" class="Article_Details_main1L2s ">
<a href="#さあ-正確に何を達(dá)成できるか見てみましょう-私は家の近くに立っている男の簡単な絵を描き-それを強(qiáng)化するために異なるパターンと色でそれを満たします-簡単にするために-それを幼稚な蕓術(shù)絵畫にしましょう-そして-蕓術(shù)の粗さを伴わないようにしてください-それだけです" title="さあ、正確に何を達(dá)成できるか見てみましょう！私は家の近くに立っている男の簡単な絵を描き、それを強(qiáng)化するために異なるパターンと色でそれを満たします。簡単にするために、それを幼稚な蕓術(shù)絵畫にしましょう（そして、蕓術(shù)の粗さを伴わないようにしてください）。それだけです：" >さあ、正確に何を達(dá)成できるか見てみましょう！私は家の近くに立っている男の簡単な絵を描き、それを強(qiáng)化するために異なるパターンと色でそれを満たします。簡単にするために、それを幼稚な蕓術(shù)絵畫にしましょう（そして、蕓術(shù)の粗さを伴わないようにしてください）。それだけです：</a>
</div>
<div id="wjcelcm34c" class="Article_Details_main1L2s ">
<a href="#ゲーム名は" title="ゲーム名は" >ゲーム名は</a>
</div>
<div id="wjcelcm34c" class="Article_Details_main1L2s ">
<a href="#メソッドを呼び出します-このレイヤーの" title="メソッドを呼び出します。このレイヤーの" >メソッドを呼び出します。このレイヤーの</a>
</div>
<div id="wjcelcm34c" class="Article_Details_main1L2s ">
<a href="#CodepenでStreet-Cleaner-GraphicsJsを表示します" title="CodepenでStreet Cleaner/GraphicsJsを表示します。 " >CodepenでStreet Cleaner/GraphicsJsを表示します。 </a>
</div>
<div id="wjcelcm34c" class="Article_Details_main1L2s ">
<a href="#HTML-への移行により-ネットワークが変更されました-最新のWebアプリケーションやシンプルなWebサイトでさえ-畫像処理が必要なタスクに遭遇することがよくあります-あらゆる場合にうまく機(jī)能するソリューションを見つけることは不可能ですが-GraphicsJSライブラリを考慮する必要があります-これはオープンソースで-堅牢で-優(yōu)れたブラウザのサポートと-楽しく-便利で-もちろん便利な多くの機(jī)能を備えています" title=" HTML5への移行により、ネットワークが変更されました。最新のWebアプリケーションやシンプルなWebサイトでさえ、畫像処理が必要なタスクに遭遇することがよくあります。あらゆる場合にうまく機(jī)能するソリューションを見つけることは不可能ですが、GraphicsJSライブラリを考慮する必要があります。これはオープンソースで、堅牢で、優(yōu)れたブラウザのサポートと、楽しく、便利で、もちろん便利な多くの機(jī)能を備えています。 " > HTML5への移行により、ネットワークが変更されました。最新のWebアプリケーションやシンプルなWebサイトでさえ、畫像処理が必要なタスクに遭遇することがよくあります。あらゆる場合にうまく機(jī)能するソリューションを見つけることは不可能ですが、GraphicsJSライブラリを考慮する必要があります。これはオープンソースで、堅牢で、優(yōu)れたブラウザのサポートと、楽しく、便利で、もちろん便利な多くの機(jī)能を備えています。 </a>
</div>
<div id="wjcelcm34c" class="Article_Details_main1L2s ">
<a href="#リンク" title="リンク" >リンク</a>
</div>
<div id="wjcelcm34c" class="Article_Details_main1L2s ">
<a href="#グラフィックスを使用してグラフィックを最適化する方法は" title="グラフィックスを使用してグラフィックを最適化する方法は？ " >グラフィックスを使用してグラフィックを最適化する方法は？ </a>
</div>
<div id="wjcelcm34c" class="Article_Details_main1L2s ">
<a href="#グラフィックスを使用してチャートとグラフィックを作成できますか" title="グラフィックスを使用してチャートとグラフィックを作成できますか？ " >グラフィックスを使用してチャートとグラフィックを作成できますか？ </a>
</div>
<div id="wjcelcm34c" class="Article_Details_main1L2s ">
<a href="#GraphicsJsは自由に使用できますか" title=" GraphicsJsは自由に使用できますか？ " > GraphicsJsは自由に使用できますか？ </a>
</div>
</div>
</div>
</div>
<div id="wjcelcm34c" class="Article_Details_main1M">
<div id="wjcelcm34c" class="phpgenera_Details_mainL1">
<a href="http://ipnx.cn/ja/" title="ホームページ"
class="phpgenera_Details_mainL1a">ホームページ</a>
<img src="/static/imghw/top_right.png" alt="" />
<a href="http://ipnx.cn/ja/web-designer.html"
class="phpgenera_Details_mainL1a">ウェブフロントエンド</a>
<img src="/static/imghw/top_right.png" alt="" />
<a href="http://ipnx.cn/ja/js-tutorial.html"
class="phpgenera_Details_mainL1a">jsチュートリアル</a>
<img src="/static/imghw/top_right.png" alt="" />
<span>強(qiáng)力な軽量グラフィックライブラリであるGraphicsJSの紹介</span>
</div>
<div id="wjcelcm34c" class="Articlelist_txts">
<div id="wjcelcm34c" class="Articlelist_txts_info">
<h1 class="Articlelist_txts_title">強(qiáng)力な軽量グラフィックライブラリであるGraphicsJSの紹介</h1>
<div id="wjcelcm34c" class="Articlelist_txts_info_head">
<div id="wjcelcm34c" class="author_info">
<a href="http://ipnx.cn/ja/member/1242473.html" class="author_avatar">
<img class="lazy" data-src="https://img.php.cn/upload/avatar/001/242/473/646b03ec7509a724.jpg" src="/static/imghw/default1.png" alt="Jack chen">
</a>
<div id="wjcelcm34c" class="author_detail">
<a href="http://ipnx.cn/ja/member/1242473.html" class="author_name">Jack chen</a>
</div>
</div>
</div>
<span id="wjcelcm34c" class="Articlelist_txts_time">Feb 17, 2025 am 10:42 AM</span>
</div>
</div>
<hr />
<div id="wjcelcm34c" class="article_main php-article">
<div id="wjcelcm34c" class="article-list-left detail-content-wrap content">
<ins class="adsbygoogle"
style="display:block; text-align:center;"
data-ad-layout="in-article"
data-ad-format="fluid"
data-ad-client="ca-pub-5902227090019525"
data-ad-slot="3461856641">
</ins>
<p>HTML5：現(xiàn)代のネットワークの礎(chǔ)。今日、SVGとキャンバスは、インタラクティブな畫像を作成するときに選択された技術(shù)であることがよくあります。フラッシュは忘れられており、シルバーライトはネットワークの端で珍しいユニコーンになり、サードパーティのプラグインを覚えている人はほとんどいません。 </p>
<p>各手法の長所と短所は十分に文書化されていますが、要するに、SVGはインタラクティブな要素の作成と処理に適しています。これは、SVGがXMLベースのベクトル形式であるため、畫像が<code><svg></svg></code>タグを使用してページにロードされると、その中の各要素をSVG DOMで使用できるためです。 </p>
この記事では、SVGに基づいた新しい強(qiáng)力なオープンソースJavaScript描畫ライブラリであるGraphicsJSを紹介したいと思います（古いIEバージョンの場合、VMLの代替品があります）。まず、その基本をすばやく紹介し、2つの短くて素晴らしい例でライブラリの機(jī)能を紹介します。最初の例は完全にアートに関するもので、2番目の例は50行未満のコードパズルアートでシンプルなものを書く方法を示しています。ゲーム。 <p>
</p>キーポイント<h2>
</h2>
<ul>GraphicsJSは、SVGに基づいた新しい強(qiáng)力なオープンソースJavaScript図面図書館であり、古いIEバージョンにVMLの代替品を提供します。それは軽量で柔軟で、リッチなJavaScript APIがあります。 <li>
AnyChartによって公開された</li>このライブラリは、AnyChartの獨(dú)自の製品で少なくとも3年間レンダリングされており、その堅牢性を確保しています。 AnyChartのJavaScript Drawing Galleryとは異なり、GraphicsJSは商業(yè)および非営利のプロジェクトで無料で利用できます。 <li>
</li>GraphicsJSはクロスブラウザーの互換性であり、Internet Explorer 6.0、Safari 3.0、Firefox 3.0、およびOpera 9.5をサポートしています。これは、古いIEバージョンでVMLおよび他のすべてのブラウザでSVGでレンダリングされます。 <li>
</li>このライブラリは、アニメーション化されたbonき火、回転銀河、降雨、プレイ可能な15パズルゲームなど、グラフィックとアニメーションの組み合わせを可能にします。また、詳細(xì)なドキュメントと包括的なAPI參照も含まれています。 <li>
</li>GraphicsJSライブラリを使用して、レイヤー、グラデーション、パターン、イベント処理、パフォーマンスの最適化などのインタラクティブなWebアプリケーションを作成できます。また、複雑なアニメーションと変換をサポートしているため、開発者にとって多用途のオプションになります。 <li>
</li>
</ul> Graphicsjs <h2>を選択する理由
</h2>開発者がSVG：rapha?l、snap.svg、およびbonsaijsを使用するのに役立つ多くのライブラリがあります。これらのライブラリにはそれぞれ長所と短所がありますが、それらの徹底的な比較は別の記事の主題になります。この記事はGraphicsJSに関するものなので、それが何であり、何があるかを説明しましょう。 <p>
</p> <p><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173976013882330.jpg" class="lazy" alt="Introducing GraphicsJS, a Powerful Lightweight Graphics Library ">
</p>まず、GraphicsJSは軽量で、非常に柔軟なJavaScript APIを備えています。多くの豊富なテキスト機(jī)能と、ブラウザー固有のHTML DOMの実裝とは別の仮想DOMを?qū)g裝します。 <p></p>
<p>第二に、これは昨年秋にリリースされた新しいオープンソースJavaScriptライブラリであり、世界をリードするインタラクティブデータ視覚化ソフトウェア開発者の1人であるAnyChartによってリリースされました。 AnyChartはGraphicsJSを少なくとも3年間（AnyChart 7.0のリリース以來）使用して獨(dú)自の製品にチャートをレンダリングしているため、GraphicsJSは完全に戦闘テストされています。 （免責(zé)事項：私はAnyChartのR＆Dの責(zé)任者であり、GraphicsJSのリード開発者です）</p>
3番目に、AnyChartのJavaScript Drawing Libraryとは異なり、GraphicsJSは商業(yè)および非営利のプロジェクトで無料で利用できます。 Apacheライセンスの下でGithubで入手できます。 <p>
4番目に、GraphicsJSにはクロスブラウザー互換性があり、Internet Explorer 6.0、Safari 3.0、Firefox 3.0、およびOpera 9.5をサポートしています。これは、古いIEバージョンでVMLおよび他のすべてのブラウザでSVGでレンダリングされます。 </p>
<p>最後に、GraphicsJSを使用すると、グラフィックとアニメーションを完全に組み合わせることができます。アニメーションのbonき火、紡績銀河、降雨、手続き上の葉、プレイ可能な15パズルゲームなど、メインギャラリーをご覧ください。 GraphicsJSには、詳細(xì)なドキュメントと包括的なAPIリファレンスのより多くの例が含まれています。 </p>
<p>GraphicsJS Basics </p>
<h2> GraphicsJSを開始するには、ライブラリを參照して、図面のブロックレベルのHTML要素を作成する必要があります。
</h2>
<p>その後、ステージを作成して、長方形、円、その他の形などの何かを描く必要があります。
</p>
<pre class='brush:php;toolbar:false;'> <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>GraphicsJS Basic Example</title>
</head>
<body>
<div id="stage-container" style="width: 400px; height: 375px;"></div>
<??>
<??>
</body>
</html></pre>以下は、さらに一歩進(jìn)んで死の秘寶シンボルを描くCodepenの例です。 <p>
</p>私たちの最初の傑作<pre class='brush:php;toolbar:false;'> // 創(chuàng)建舞臺
var stage = acgraph.create('stage-container');
// 繪制矩形
var stage.rect(25, 50, 350, 300);</pre>
<p>塗りつぶし、ストローク、パターンの塗りつぶし</p>
<h2 id="任意の形狀またはパスは-塗りつぶし設(shè)定とストローク設(shè)定を使用して色付けできます-すべてにストローク-境界-がありますが-形狀と閉じたパスのみがパディングを持っています-充填およびストロークの設(shè)定は非常に豊富で-線形または円形の勾配を使用して塗りつぶしとストロークを使用できます-さらに-線に點在し-サポート畫像に複數(shù)のタイルモードが埋められます-しかし-これはほとんどすべてのライブラリで見つけることができるかなり標(biāo)準(zhǔn)的なものです-GraphicsJSを特別なものにしているのは-メッシュとパターンの塗りつぶし機(jī)能です-これにより-の使用可能なメッシュフィルパターンを直接使用できるだけでなく-形狀やテキストで作られたカスタムパターンを簡単に作成できます">任意の形狀またはパスは、塗りつぶし設(shè)定とストローク設(shè)定を使用して色付けできます。すべてにストローク（境界）がありますが、形狀と閉じたパスのみがパディングを持っています。充填およびストロークの設(shè)定は非常に豊富で、線形または円形の勾配を使用して塗りつぶしとストロークを使用できます。さらに、線に點在し、サポート畫像に複數(shù)のタイルモードが埋められます。しかし、これはほとんどすべてのライブラリで見つけることができるかなり標(biāo)準(zhǔn)的なものです。 GraphicsJSを特別なものにしているのは、メッシュとパターンの塗りつぶし機(jī)能です。これにより、32（?。─问褂每赡埭圣幞氓伐濂榨％毳靴咯`ンを直接使用できるだけでなく、形狀やテキストで作られたカスタムパターンを簡単に作成できます。 </h2>
<h3 id="さあ-正確に何を達(dá)成できるか見てみましょう-私は家の近くに立っている男の簡単な絵を描き-それを強(qiáng)化するために異なるパターンと色でそれを満たします-簡単にするために-それを幼稚な蕓術(shù)絵畫にしましょう-そして-蕓術(shù)の粗さを伴わないようにしてください-それだけです">さあ、正確に何を達(dá)成できるか見てみましょう！私は家の近くに立っている男の簡単な絵を描き、それを強(qiáng)化するために異なるパターンと色でそれを満たします。簡単にするために、それを幼稚な蕓術(shù)絵畫にしましょう（そして、蕓術(shù)の粗さを伴わないようにしてください）。それだけです：</h3>
<p>
</p> Codepenで結(jié)果を表示します。 <p>
</p>ご覧のとおり、変數(shù)を使用しています。ステージ上のコンテンツを描畫するすべての方法は、作成されたオブジェクトへの參照を返し、このリンクを使用してオブジェクトを変更または削除できます。 <pre class='brush:php;toolbar:false;'> // 創(chuàng)建舞臺
var stage = acgraph.create('stage-container');
// 繪制框架
var frame = stage.rect(25, 50, 350, 300);
// 繪制房子
var walls = stage.rect(50, 250, 200, 100);
var roof = stage.path()
.moveTo(50, 250)
.lineTo(150, 180)
.lineTo(250, 250)
.close();
// 繪制一個人
var head = stage.circle(330, 280, 10);
var neck = stage.path().moveTo(330, 290).lineTo(330, 300);
var kilt = stage.triangleUp(330, 320, 20);
var rightLeg = stage.path().moveTo(320, 330).lineTo(320, 340);
var leftLeg = stage.path().moveTo(340, 330).lineTo(340, 340);</pre>
また、チェーンコール（例えば<p>）がGraphicsJSのいたるところにある方法に注意してください。これにより、コードの短縮に役立ちます。チェーンコールは注意して使用する必要がありますが、適切に適用すると、コードがよりコンパクトで読みやすくなります。 </p><p>さあ、この著色ページを子供に渡して、ペイントさせましょう。子供でさえ次のテクニックを習(xí)得できるからです
</p>
<pre class='brush:php;toolbar:false;'> <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>GraphicsJS Basic Example</title>
</head>
<body>
<div id="stage-container" style="width: 400px; height: 375px;"></div>
<??>
<??>
</body>
</html></pre>これが私たちの例の見た目です。 <p>
</p>今、私たちはキルトの隣に立っているハイランダーが屋根の上にわらを置いて彼のレンガの城の近くに立っていることの寫真を持っています。これは確かに著作権を取得したい蕓術(shù)作品であると言うリスクさえあります。カスタムテキストに基づいてパターン記入を使用してこれを行いましょう：<p>
<em>
</em>ご覧のとおり、これは簡単です。テキストオブジェクトのインスタンスを作成し、ステージ上にパターンを形成し、テキストをパターンに入れます。 </p>
<pre class='brush:php;toolbar:false;'> // 創(chuàng)建舞臺
var stage = acgraph.create('stage-container');
// 繪制矩形
var stage.rect(25, 50, 350, 300);</pre>CodePenで色の著作権で保護(hù)された家/グラフィックスを表示します。 <p>
</p>50行未満のコードでパズルアートゲームを作成<p>
この記事の次の部分では、50行未満のコードでGraphicsJSを使用してCookieクリッカーのようなゲームを作成する方法を紹介します。 </p>
<h2 id="ゲーム名は">ゲーム名は</h2>「風(fēng)の中で通りを掃除する」<このゲームは、GraphicsJSギャラリーのプログラムで生成された葉の例のコードを使用しています。 <p>
</p> CodePen（または記事の終わり）で完成したゲームを表示できます。 <p>
<em>レイヤー、zindexおよび仮想dom</em>
</p>最初にステージを作成し（前述のように）、いくつかの初期変數(shù)を宣言します。
<p>
このゲームでは、レイヤーを使用します - グラフィックスのオブジェクトは、要素をグループ化するために使用されます。同様の変更を要素（変換など）に適用する場合は、要素をグループ化する必要があります。パフォーマンスとユーザーエクスペリエンスを向上させる可能性のあるレイヤーを一時停止モードで変更できます（これについては詳細(xì)）。 </p>
このデモでは、レイヤー関數(shù)を使用して、葉をグループ化し、ラベルを覆うのを避けます（葉が掃引されている葉の數(shù)がわかります）。これを行うには、タグを作成し、ステージバインディングレイヤーを作成する<h3 id="メソッドを呼び出します-このレイヤーの">メソッドを呼び出します。このレイヤーの</h3>プロパティを、ラベルの下の<p>プロパティに設(shè)定します。 </p>
<pre class='brush:php;toolbar:false;'> // 創(chuàng)建舞臺
var stage = acgraph.create('stage-container');
// 繪制框架
var frame = stage.rect(25, 50, 350, 300);
// 繪制房子
var walls = stage.rect(50, 250, 200, 100);
var roof = stage.path()
.moveTo(50, 250)
.lineTo(150, 180)
.lineTo(250, 250)
.close();
// 繪制一個人
var head = stage.circle(330, 280, 10);
var neck = stage.path().moveTo(330, 290).lineTo(330, 300);
var kilt = stage.triangleUp(330, 320, 20);
var rightLeg = stage.path().moveTo(320, 330).lineTo(320, 340);
var leftLeg = stage.path().moveTo(340, 330).lineTo(340, 340);</pre>
<p>これを行った後、レイヤーで作成した葉の數(shù)に関係なく、テキストを上書きしないようにすることができます。 </p>
<p>変換<code>stage.layer</code>
<code>zIndex</code>次に、葉を描く関數(shù)を追加しましょう。これにより、便利なGraphicsJS変換APIが使用されます。これにより、要素と要素のグループを移動、スケーリング、回転、およびカットできます。これは、レイヤーと仮想DOMと組み合わせると、非常に強(qiáng)力なツールです。 <code>zIndex</code>
</p>
<pre class='brush:php;toolbar:false;'> // 給圖片著色
// 精美的框架
frame.stroke(["red", "green", "blue"], 2, "2 2 2");
// 磚墻
walls.fill(acgraph.hatchFill('horizontalbrick'));
// 草屋頂
roof.fill("#e4d96f");
// 格子呢裙
kilt.fill(acgraph.hatchFill('plaid'));</pre>各パスが同じ方法で作成されていることがわかりますが、変換が実行されます。これにより、非常に美しいランダムな葉のパターンが生成されます。 <p>
</p>イベントの処理<h3>
グラフィックスのオブジェクト、ステージ、およびレイヤーは、イベントを処理できます。サポートされているイベントの完全なリストは、EventType APIにあります。レンダリングを制御するための4つの特別なイベントがステージにあります。 </h3>このゲームの例では、ユーザーがそれらの上に浮かんだときに1つずつ消えるように、Leafオブジェクトに接続されたイベントリスナーを使用しています。これを行うには、<p>ステートメントの前に、次のコードを<code>drawLeaves</code>関數(shù)の下部に追加します：<code>return</code>
</p>
<pre class='brush:php;toolbar:false;'> <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>GraphicsJS Basic Example</title>
</head>
<body>
<div id="stage-container" style="width: 400px; height: 375px;"></div>
<??>
<??>
</body>
</html></pre>ここでは、葉を計算するために層を使用していることもわかります。 <p>
</p>
<pre class='brush:php;toolbar:false;'> // 創(chuàng)建舞臺
var stage = acgraph.create('stage-container');
// 繪制矩形
var stage.rect(25, 50, 350, 300);</pre>ここに葉の數(shù)を?qū)g際に保存していないことに注意してください。特定の層に葉を追加し、それらから葉を取り除くため、これにより、私たちが持っている子供の要素の數(shù)を追跡できます（したがって、殘りの葉の數(shù)）。 <p>
</p>GraphicsJSは、ブラウザ固有のSVG/VMLの実裝とは別に、抽象的で軽量で、獨(dú)立した仮想DOMを提供します。すべてのオブジェクトとレイヤーの追跡、グループへの変換の適用、レンダリングをヘルプで最適化するなど、多くの素晴らしいことを行うことで非常に便利です。レンダリングプロセスを追跡および制御できます。 <p>
</p>パフォーマンスの最適化<h3>
</h3>仮想DOMおよびイベントハンドラーにより、GraphicsJSユーザーはレンダリングを制御できます。パフォーマンス記事は、これらの內(nèi)容間の関係を理解するのに役立ちます。 <p>
</p>ゲームで葉を生成する場合、新しい葉を追加するときにレンダリングを一時停止する必要があり、すべての変更が完了した後にレンダリングを再開する必要があります。
<p>
</p>新しい要素を扱うこの方法により、新しい葉がほとんどすぐに表示されます。 <pre class='brush:php;toolbar:false;'> // 創(chuàng)建舞臺
var stage = acgraph.create('stage-container');
// 繪制框架
var frame = stage.rect(25, 50, 350, 300);
// 繪制房子
var walls = stage.rect(50, 250, 200, 100);
var roof = stage.path()
.moveTo(50, 250)
.lineTo(150, 180)
.lineTo(250, 250)
.close();
// 繪制一個人
var head = stage.circle(330, 280, 10);
var neck = stage.path().moveTo(330, 290).lineTo(330, 300);
var kilt = stage.triangleUp(330, 320, 20);
var rightLeg = stage.path().moveTo(320, 330).lineTo(320, 340);
var leftLeg = stage.path().moveTo(340, 330).lineTo(340, 340);</pre>
<p>最後に、</p>を呼び出してすべてを開始します。 <p>
<code>shakeTree()</code>
</p>最終結(jié)果<pre class='brush:php;toolbar:false;'> // 給圖片著色
// 精美的框架
frame.stroke(["red", "green", "blue"], 2, "2 2 2");
// 磚墻
walls.fill(acgraph.hatchFill('horizontalbrick'));
// 草屋頂
roof.fill("#e4d96f");
// 格子呢裙
kilt.fill(acgraph.hatchFill('plaid'));</pre>
<h3 id="CodepenでStreet-Cleaner-GraphicsJsを表示します">CodepenでStreet Cleaner/GraphicsJsを表示します。 </h3>
<p>結(jié)論</p>
<h2 id="HTML-への移行により-ネットワークが変更されました-最新のWebアプリケーションやシンプルなWebサイトでさえ-畫像処理が必要なタスクに遭遇することがよくあります-あらゆる場合にうまく機(jī)能するソリューションを見つけることは不可能ですが-GraphicsJSライブラリを考慮する必要があります-これはオープンソースで-堅牢で-優(yōu)れたブラウザのサポートと-楽しく-便利で-もちろん便利な多くの機(jī)能を備えています"> HTML5への移行により、ネットワークが変更されました。最新のWebアプリケーションやシンプルなWebサイトでさえ、畫像処理が必要なタスクに遭遇することがよくあります。あらゆる場合にうまく機(jī)能するソリューションを見つけることは不可能ですが、GraphicsJSライブラリを考慮する必要があります。これはオープンソースで、堅牢で、優(yōu)れたブラウザのサポートと、楽しく、便利で、もちろん便利な多くの機(jī)能を備えています。 </h2>
<p>以下のコメントでGrphicsJSに関するフィードバックを聞いてみたいです。あなたはすでにそれを使用していますか？新しいプロジェクトに使用することを検討しますか？理由を知りたいのですが、なぜ使わないのかを知りたいです。また、それらすべてを比較して比較するライブラリと記事を描く主要なJavaScriptのリストを執(zhí)筆しています。そこに見たい機(jī)能を自由に指摘してください。 </p>さらに読むための<h2 id="リンク">リンク</h2>
<ul>
<li>一般情報<ul>
<li>svg </li>
<li>canvas</li>
<li>svg vs. canvas</li>
</ul>
</li>
<li>ライブラリ<ul>
<li>graphicsjs</li>
<li>rapha?l</li>
<li>snap.svg</li>
<li>bonsaijs </li>
</ul>
</li>
<li>graphicsjs<ul>
Github <li>のグラフィックスです
</li>GraphicsJSドキュメント<li>
</li>graphicsjs apiリファレンス<li>
</li>
</ul>
</li>
</ul>グラフィックスの質(zhì)問<h2>
</h2> GraphicsJsは他のJavaScriptグラフィックライブラリとどのように違いますか？ <h3>
</h3>グラフィックスは、その強(qiáng)力で軽量な性質(zhì)で際立っています。これは、開発者が高精度と高性能であらゆるグラフィックを描畫してアニメーション化できる強(qiáng)力なライブラリです。他のライブラリとは異なり、GraphicsJSは、速度や効率に影響を與えることなく、レイヤー、勾配、パターンなどを含む包括的な機(jī)能セットを提供します。また、すべての最新のブラウザをサポートしており、開発者にとって多用途のオプションになっています。 <p>
</p>グラフィックスを始めるにはどうすればよいですか？ <h3>
</h3>GraphicsJSを開始するには、HTMLファイルにGraphicsJSライブラリを含める必要があります。公式ウェブサイトからライブラリをダウンロードするか、CDNを使用できます。ライブラリが含まれたら、ライブラリが提供する適切な機(jī)能とメソッドを呼び出すことにより、グラフィックの作成を開始できます。 <p>
</p>グラフィックスを使用して複雑なアニメーションを作成できますか？ <h3>
</h3>はい、GraphicsJSは複雑なアニメーションを簡単に処理するように設(shè)計されています。緩和機(jī)能、遅延、期間設(shè)定など、アニメーション機(jī)能の豊富なセットを提供します。グラフの屬性、その位置、サイズ、色など、アニメーション化できます。これにより、GraphicsJSはインタラクティブで動的なグラフィックを作成するための強(qiáng)力なツールになります。 <p>
</p>GraphicsJSはすべてのブラウザと互換性がありますか？ <h3>
</h3>GraphicsJSは、Chrome、Firefox、Safari、Internet Explorerなど、すべての最新のブラウザーと互換性があるように設(shè)計されています。レンダリングにはSVGとVMLを使用していますが、これらはすべてそれらをサポートしています。これにより、グラフィックが一貫して見えるようになり、さまざまなプラットフォームやデバイスでうまく機(jī)能します。 <p>
</p>グラフィックスを使用してグラデーションを作成する方法は？ <h3>
</h3>グラフィックスでグラデーションを作成するのは簡単です。勾配法を使用して、線形または放射狀の勾配を定義し、色と位置を指定し、任意の形狀に勾配を適用できます。これにより、カラフルなグラフィックを簡単に作成できます。 <p>
</p>グラフィックスを使用してインタラクティブなグラフィックを作成できますか？ <h3>
</h3>はい、GraphicsJSは、インタラクティブなグラフィックを作成できる一連のイベント処理機(jī)能を提供します。イベントリスナーを任意のグラフに添付して、クリック、マウスの動きなどのユーザーアクションに応答できます。これにより、GraphicsJSはインタラクティブなWebアプリケーションを作成するための優(yōu)れた選択肢になります。 <p>
</p>GraphicsJSはレイヤーをサポートしていますか？ <h3>
</h3>はい、GraphicsJSはレイヤーをサポートし、グラフィックを個別のグループに整理できるようにします。各レイヤーは獨(dú)立して操作できるため、複雑なグラフィックを簡単に管理できます。また、各レイヤーの可視性とZオーダーを制御することもでき、グラフィックの細(xì)粒を制御できます。 <p></p>
<h3 id="グラフィックスを使用してグラフィックを最適化する方法は">グラフィックスを使用してグラフィックを最適化する方法は？ </h3>
<p>GraphicsJSは、グラフィックを最適化するのに役立ついくつかの機(jī)能を提供します。たとえば、作物方式を使用して、指定された領(lǐng)域の外側(cè)のグラフィックスの一部を非表示にすることで、必要なレンダリングの量を減らすことができます。キャッシュメソッドを使用して、グラフィックのレンダリングされた出力を保存することもできます。これにより、グラフィックを頻繁に塗り直すとパフォーマンスが向上します。 </p>
<h3 id="グラフィックスを使用してチャートとグラフィックを作成できますか">グラフィックスを使用してチャートとグラフィックを作成できますか？ </h3>
<p>GraphicsJSはチャートやグラフィックを作成するために特別に設(shè)計されていませんが、その強(qiáng)力な図面とアニメーション機(jī)能により、チャートやグラフィックを含むあらゆるタイプのグラフィックを作成できます。ライブラリの方法を使用して、線、曲線、長方形、円などを描畫して、さまざまなチャートタイプを作成できます。 </p>
<h3 id="GraphicsJsは自由に使用できますか"> GraphicsJsは自由に使用できますか？ </h3>
<p>はい、GraphicsJSは無料のオープンソースライブラリです。プロジェクトで無料で使用できます。また、ライブラリは、最新のWeb標(biāo)準(zhǔn)とテクノロジーと同期していることを確認(rèn)するために積極的に維持されています。 </p><p>以上が強(qiáng)力な軽量グラフィックライブラリであるGraphicsJSの紹介の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。</p>
</div>
</div>
<div id="wjcelcm34c" class="wzconShengming_sp">
<div id="wjcelcm34c" class="bzsmdiv_sp">このウェブサイトの聲明</div>
<div>この記事の內(nèi)容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰屬します。このサイトは、それに相當(dāng)する法的責(zé)任を負(fù)いません。盜作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡(luò)ください。</div>
</div>
</div>
<ins class="adsbygoogle"
style="display:block"
data-ad-format="autorelaxed"
data-ad-client="ca-pub-5902227090019525"
data-ad-slot="2507867629"></ins>
<div id="wjcelcm34c" class="AI_ToolDetails_main4sR">
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-5902227090019525"
data-ad-slot="3653428331"
data-ad-format="auto"
data-full-width-responsive="true"></ins>
<!-- <div id="wjcelcm34c" class="phpgenera_Details_mainR4">
<div id="wjcelcm34c" class="phpmain1_4R_readrank">
<div id="wjcelcm34c" class="phpmain1_4R_readrank_top">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/hotarticle2.png" alt="" />
<h2>人気の記事</h2>
</div>
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottom">
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms">
<a href="http://ipnx.cn/ja/faq/1796832397.html" title="グラスワンダービルドガイド|ウマゴサメはかなりダービーです" class="phpgenera_Details_mainR4_bottom_title">グラスワンダービルドガイド|ウマゴサメはかなりダービーです</a>
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms_info">
<span>3週間前</span>
<span>By Jack chen</span>
</div>
</div>
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms">
<a href="http://ipnx.cn/ja/faq/1796833110.html" title="<??>：森の99泊 - すべてのバッジとそれらのロックを解除する方法" class="phpgenera_Details_mainR4_bottom_title"><??>：森の99泊 - すべてのバッジとそれらのロックを解除する方法</a>
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms_info">
<span>3週間前</span>
<span>By DDD</span>
</div>
</div>
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms">
<a href="http://ipnx.cn/ja/faq/1796831605.html" title="Uma Musume Pretty Derby Bannerスケジュール（2025年7月）" class="phpgenera_Details_mainR4_bottom_title">Uma Musume Pretty Derby Bannerスケジュール（2025年7月）</a>
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms_info">
<span>4週間前</span>
<span>By Jack chen</span>
</div>
</div>
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms">
<a href="http://ipnx.cn/ja/faq/1796829586.html" title="今日のつながりは、753年7月3日のヒントと回答を示しています" class="phpgenera_Details_mainR4_bottom_title">今日のつながりは、753年7月3日のヒントと回答を示しています</a>
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms_info">
<span>1 か月前</span>
<span>By Jack chen</span>
</div>
</div>
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms">
<a href="http://ipnx.cn/ja/faq/1796831905.html" title="Windowsセキュリティは空白であるか、オプションを表示しません" class="phpgenera_Details_mainR4_bottom_title">Windowsセキュリティは空白であるか、オプションを表示しません</a>
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms_info">
<span>4週間前</span>
<span>By 下次還敢</span>
</div>
</div>
</div>
<div id="wjcelcm34c" class="phpgenera_Details_mainR3_more">
<a href="http://ipnx.cn/ja/article.html">もっと見る</a>
</div>
</div>
</div> -->
<div id="wjcelcm34c" class="phpgenera_Details_mainR3">
<div id="wjcelcm34c" class="phpmain1_4R_readrank">
<div id="wjcelcm34c" class="phpmain1_4R_readrank_top">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/hottools2.png" alt="" />
<h2>ホットAIツール</h2>
</div>
<div id="wjcelcm34c" class="phpgenera_Details_mainR3_bottom">
<div id="wjcelcm34c" class="phpmain_tab2_mids_top">
<a href="http://ipnx.cn/ja/ai/undress-ai-tool" title="Undress AI Tool" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173410641626608.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Undress AI Tool" />
</a>
<div id="wjcelcm34c" class="phpmain_tab2_mids_info">
<a href="http://ipnx.cn/ja/ai/undress-ai-tool" title="Undress AI Tool" class="phpmain_tab2_mids_title">
<h3>Undress AI Tool</h3>
</a>
<p>脫衣畫像を無料で</p>
</div>
</div>
<div id="wjcelcm34c" class="phpmain_tab2_mids_top">
<a href="http://ipnx.cn/ja/ai/undresserai-undress" title="Undresser.AI Undress" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411540686492.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Undresser.AI Undress" />
</a>
<div id="wjcelcm34c" class="phpmain_tab2_mids_info">
<a href="http://ipnx.cn/ja/ai/undresserai-undress" title="Undresser.AI Undress" class="phpmain_tab2_mids_title">
<h3>Undresser.AI Undress</h3>
</a>
<p>リアルなヌード寫真を作成する AI 搭載アプリ</p>
</div>
</div>
<div id="wjcelcm34c" class="phpmain_tab2_mids_top">
<a href="http://ipnx.cn/ja/ai/ai-clothes-remover" title="AI Clothes Remover" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411552797167.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="AI Clothes Remover" />
</a>
<div id="wjcelcm34c" class="phpmain_tab2_mids_info">
<a href="http://ipnx.cn/ja/ai/ai-clothes-remover" title="AI Clothes Remover" class="phpmain_tab2_mids_title">
<h3>AI Clothes Remover</h3>
</a>
<p>寫真から衣服を削除するオンライン AI ツール。</p>
</div>
</div>
<div id="wjcelcm34c" class="phpmain_tab2_mids_top">
<a href="http://ipnx.cn/ja/ai/clothoffio" title="Clothoff.io" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411529149311.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Clothoff.io" />
</a>
<div id="wjcelcm34c" class="phpmain_tab2_mids_info">
<a href="http://ipnx.cn/ja/ai/clothoffio" title="Clothoff.io" class="phpmain_tab2_mids_title">
<h3>Clothoff.io</h3>
</a>
<p>AI衣類リムーバー</p>
</div>
</div>
<div id="wjcelcm34c" class="phpmain_tab2_mids_top">
<a href="http://ipnx.cn/ja/ai/video-swap" title="Video Face Swap" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173414504068133.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Video Face Swap" />
</a>
<div id="wjcelcm34c" class="phpmain_tab2_mids_info">
<a href="http://ipnx.cn/ja/ai/video-swap" title="Video Face Swap" class="phpmain_tab2_mids_title">
<h3>Video Face Swap</h3>
</a>
<p>完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。</p>
</div>
</div>
</div>
<div id="wjcelcm34c" class="phpgenera_Details_mainR3_more">
<a href="http://ipnx.cn/ja/ai">もっと見る</a>
</div>
</div>
</div>
<div id="wjcelcm34c" class="phpgenera_Details_mainR4">
<div id="wjcelcm34c" class="phpmain1_4R_readrank">
<div id="wjcelcm34c" class="phpmain1_4R_readrank_top">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/hotarticle2.png" alt="" />
<h2>人気の記事</h2>
</div>
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottom">
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms">
<a href="http://ipnx.cn/ja/faq/1796832397.html" title="グラスワンダービルドガイド|ウマゴサメはかなりダービーです" class="phpgenera_Details_mainR4_bottom_title">グラスワンダービルドガイド|ウマゴサメはかなりダービーです</a>
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms_info">
<span>3週間前</span>
<span>By Jack chen</span>
</div>
</div>
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms">
<a href="http://ipnx.cn/ja/faq/1796833110.html" title="<??>：森の99泊 - すべてのバッジとそれらのロックを解除する方法" class="phpgenera_Details_mainR4_bottom_title"><??>：森の99泊 - すべてのバッジとそれらのロックを解除する方法</a>
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms_info">
<span>3週間前</span>
<span>By DDD</span>
</div>
</div>
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms">
<a href="http://ipnx.cn/ja/faq/1796831605.html" title="Uma Musume Pretty Derby Bannerスケジュール（2025年7月）" class="phpgenera_Details_mainR4_bottom_title">Uma Musume Pretty Derby Bannerスケジュール（2025年7月）</a>
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms_info">
<span>4週間前</span>
<span>By Jack chen</span>
</div>
</div>
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms">
<a href="http://ipnx.cn/ja/faq/1796829586.html" title="今日のつながりは、753年7月3日のヒントと回答を示しています" class="phpgenera_Details_mainR4_bottom_title">今日のつながりは、753年7月3日のヒントと回答を示しています</a>
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms_info">
<span>1 か月前</span>
<span>By Jack chen</span>
</div>
</div>
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms">
<a href="http://ipnx.cn/ja/faq/1796831905.html" title="Windowsセキュリティは空白であるか、オプションを表示しません" class="phpgenera_Details_mainR4_bottom_title">Windowsセキュリティは空白であるか、オプションを表示しません</a>
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms_info">
<span>4週間前</span>
<span>By 下次還敢</span>
</div>
</div>
</div>
<div id="wjcelcm34c" class="phpgenera_Details_mainR3_more">
<a href="http://ipnx.cn/ja/article.html">もっと見る</a>
</div>
</div>
</div>
<div id="wjcelcm34c" class="phpgenera_Details_mainR3">
<div id="wjcelcm34c" class="phpmain1_4R_readrank">
<div id="wjcelcm34c" class="phpmain1_4R_readrank_top">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/hottools2.png" alt="" />
<h2>ホットツール</h2>
</div>
<div id="wjcelcm34c" class="phpgenera_Details_mainR3_bottom">
<div id="wjcelcm34c" class="phpmain_tab2_mids_top">
<a href="http://ipnx.cn/ja/toolset/development-tools/92" title="メモ帳++7.3.1" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58ab96f0f39f7357.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="メモ帳++7.3.1" />
</a>
<div id="wjcelcm34c" class="phpmain_tab2_mids_info">
<a href="http://ipnx.cn/ja/toolset/development-tools/92" title="メモ帳++7.3.1" class="phpmain_tab2_mids_title">
<h3>メモ帳++7.3.1</h3>
</a>
<p>使いやすく無料のコードエディター</p>
</div>
</div>
<div id="wjcelcm34c" class="phpmain_tab2_mids_top">
<a href="http://ipnx.cn/ja/toolset/development-tools/93" title="SublimeText3 中國語版" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58ab97a3baad9677.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="SublimeText3 中國語版" />
</a>
<div id="wjcelcm34c" class="phpmain_tab2_mids_info">
<a href="http://ipnx.cn/ja/toolset/development-tools/93" title="SublimeText3 中國語版" class="phpmain_tab2_mids_title">
<h3>SublimeText3 中國語版</h3>
</a>
<p>中國語版、とても使いやすい</p>
</div>
</div>
<div id="wjcelcm34c" class="phpmain_tab2_mids_top">
<a href="http://ipnx.cn/ja/toolset/development-tools/121" title="ゼンドスタジオ 13.0.1" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58ab97ecd1ab2670.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="ゼンドスタジオ 13.0.1" />
</a>
<div id="wjcelcm34c" class="phpmain_tab2_mids_info">
<a href="http://ipnx.cn/ja/toolset/development-tools/121" title="ゼンドスタジオ 13.0.1" class="phpmain_tab2_mids_title">
<h3>ゼンドスタジオ 13.0.1</h3>
</a>
<p>強(qiáng)力な PHP 統(tǒng)合開発環(huán)境</p>
</div>
</div>
<div id="wjcelcm34c" class="phpmain_tab2_mids_top">
<a href="http://ipnx.cn/ja/toolset/development-tools/469" title="ドリームウィーバー CS6" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58d0e0fc74683535.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="ドリームウィーバー CS6" />
</a>
<div id="wjcelcm34c" class="phpmain_tab2_mids_info">
<a href="http://ipnx.cn/ja/toolset/development-tools/469" title="ドリームウィーバー CS6" class="phpmain_tab2_mids_title">
<h3>ドリームウィーバー CS6</h3>
</a>
<p>ビジュアル Web 開発ツール</p>
</div>
</div>
<div id="wjcelcm34c" class="phpmain_tab2_mids_top">
<a href="http://ipnx.cn/ja/toolset/development-tools/500" title="SublimeText3 Mac版" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58d34035e2757995.png?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="SublimeText3 Mac版" />
</a>
<div id="wjcelcm34c" class="phpmain_tab2_mids_info">
<a href="http://ipnx.cn/ja/toolset/development-tools/500" title="SublimeText3 Mac版" class="phpmain_tab2_mids_title">
<h3>SublimeText3 Mac版</h3>
</a>
<p>神レベルのコード編集ソフト（SublimeText3）</p>
</div>
</div>
</div>
<div id="wjcelcm34c" class="phpgenera_Details_mainR3_more">
<a href="http://ipnx.cn/ja/ai">もっと見る</a>
</div>
</div>
</div>
<div id="wjcelcm34c" class="phpgenera_Details_mainR4">
<div id="wjcelcm34c" class="phpmain1_4R_readrank">
<div id="wjcelcm34c" class="phpmain1_4R_readrank_top">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/hotarticle2.png" alt="" />
<h2>ホットトピック</h2>
</div>
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottom">
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms">
<a href="http://ipnx.cn/ja/faq/laravel-tutori" title="Laravel チュートリアル" class="phpgenera_Details_mainR4_bottom_title">Laravel チュートリアル</a>
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms_info">
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/eyess.png" alt="" />
<span>1597</span>
</div>
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/tiezi.png" alt="" />
<span>29</span>
</div>
</div>
</div>
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms">
<a href="http://ipnx.cn/ja/faq/php-tutorial" title="PHP チュートリアル" class="phpgenera_Details_mainR4_bottom_title">PHP チュートリアル</a>
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms_info">
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/eyess.png" alt="" />
<span>1488</span>
</div>
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/tiezi.png" alt="" />
<span>72</span>
</div>
</div>
</div>
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms">
<a href="http://ipnx.cn/ja/faq/nytminicrosswordanswe" title="NYTミニクロスワードの回答" class="phpgenera_Details_mainR4_bottom_title">NYTミニクロスワードの回答</a>
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms_info">
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/eyess.png" alt="" />
<span>268</span>
</div>
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/tiezi.png" alt="" />
<span>587</span>
</div>
</div>
</div>
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms">
<a href="http://ipnx.cn/ja/faq/newyorktimesdailybrief" title="NYTの接続はヒントと回答です" class="phpgenera_Details_mainR4_bottom_title">NYTの接続はヒントと回答です</a>
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms_info">
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/eyess.png" alt="" />
<span>131</span>
</div>
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/tiezi.png" alt="" />
<span>836</span>
</div>
</div>
</div>
</div>
<div id="wjcelcm34c" class="phpgenera_Details_mainR3_more">
<a href="http://ipnx.cn/ja/faq/zt">もっと見る</a>
</div>
</div>
</div>
</div>
</div>
<div id="wjcelcm34c" class="Article_Details_main2">
<div id="wjcelcm34c" class="phpgenera_Details_mainL4">
<div id="wjcelcm34c" class="phpmain1_2_top">
<a href="javascript:void(0);" class="phpmain1_2_top_title">Related knowledge<img
src="/static/imghw/index2_title2.png" alt="" /></a>
</div>
<div id="wjcelcm34c" class="phpgenera_Details_mainL4_info">
<div id="wjcelcm34c" class="phphistorical_Version2_mids">
<a href="http://ipnx.cn/ja/faq/1796829560.html" title="Garbage CollectionはJavaScriptでどのように機(jī)能しますか？" class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/175156097152256.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Garbage CollectionはJavaScriptでどのように機(jī)能しますか？" />
</a>
<a href="http://ipnx.cn/ja/faq/1796829560.html" title="Garbage CollectionはJavaScriptでどのように機(jī)能しますか？" class="phphistorical_Version2_mids_title">Garbage CollectionはJavaScriptでどのように機(jī)能しますか？</a>
<span id="wjcelcm34c" class="Articlelist_txts_time">Jul 04, 2025 am 12:42 AM</span>
<p class="Articlelist_txts_p">JavaScriptのごみ収集メカニズムは、タグクリアリングアルゴリズムを介してメモリを自動的に管理して、メモリ漏れのリスクを減らします。エンジンはルートオブジェクトからアクティブオブジェクトを橫斷およびマークし、マークされていないオブジェクトはゴミとして扱われ、クリアされます。たとえば、オブジェクトが參照されなくなった場合（変數(shù)をnullに設(shè)定するなど）、次のリサイクルでリリースされます。メモリリークの一般的な原因には以下が含まれます。 closurures閉鎖の外部変數(shù)への參照。 globalグローバル変數(shù)は引き続き大量のデータを保持しています。 V8エンジンは、世代のリサイクル、増分マーキング、並列/同時リサイクルなどの戦略を通じてリサイクル効率を最適化し、メインスレッドのブロック時間を短縮します。開発中、不必要なグローバル?yún)⒄栅虮埭薄ⅴ靴榨┅`マンスと安定性を改善するためにオブジェクトの関連付けを迅速に裝飾する必要があります。</p>
</div>
<div id="wjcelcm34c" class="phphistorical_Version2_mids">
<a href="http://ipnx.cn/ja/faq/1796836217.html" title="node.jsでHTTPリクエストを作成する方法は？" class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/431/639/175234432058757.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="node.jsでHTTPリクエストを作成する方法は？" />
</a>
<a href="http://ipnx.cn/ja/faq/1796836217.html" title="node.jsでHTTPリクエストを作成する方法は？" class="phphistorical_Version2_mids_title">node.jsでHTTPリクエストを作成する方法は？</a>
<span id="wjcelcm34c" class="Articlelist_txts_time">Jul 13, 2025 am 02:18 AM</span>
<p class="Articlelist_txts_p">node.jsでHTTPリクエストを開始するには、組み込みモジュール、axios、およびnode-fetchを使用する3つの一般的な方法があります。 1.依存関係のない內(nèi)蔵http/httpsモジュールを使用します。これは基本的なシナリオに適していますが、https.get（）を使用してデータを取得したり、.write（）を介してPOSTリクエストを送信するなど、データステッチとエラーモニタリングの手動処理が必要です。 2.Axiosは、約束に基づいたサードパーティライブラリです。簡潔な構(gòu)文と強(qiáng)力な機(jī)能を備えており、非同期/待ち聲、自動JSON変換、インターセプターなどをサポートします。非同期リクエスト操作を簡素化することをお勧めします。 3.Node-Fetchは、約束と単純な構(gòu)文に基づいて、ブラウザフェッチに似たスタイルを提供します</p>
</div>
<div id="wjcelcm34c" class="phphistorical_Version2_mids">
<a href="http://ipnx.cn/ja/faq/1796836292.html" title="JavaScriptデータ型：プリミティブ対參照" class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/431/639/175234579081669.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="JavaScriptデータ型：プリミティブ対參照" />
</a>
<a href="http://ipnx.cn/ja/faq/1796836292.html" title="JavaScriptデータ型：プリミティブ対參照" class="phphistorical_Version2_mids_title">JavaScriptデータ型：プリミティブ対參照</a>
<span id="wjcelcm34c" class="Articlelist_txts_time">Jul 13, 2025 am 02:43 AM</span>
<p class="Articlelist_txts_p">JavaScriptデータ型は、プリミティブタイプと參照タイプに分割されます。プリミティブタイプには、文字列、數(shù)字、ブール、ヌル、未定義、シンボルが含まれます。値は不変であり、コピーは値を割り當(dāng)てるときにコピーされるため、互いに影響を與えません。オブジェクト、配列、関數(shù)などの參照タイプはメモリアドレスを保存し、同じオブジェクトを指す変數(shù)は互いに影響します。 TypeofとInstanceOFを使用してタイプを決定できますが、TypeOfNullの歴史的な問題に注意してください。これらの2種類の違いを理解することは、より安定した信頼性の高いコードを書くのに役立ちます。</p>
</div>
<div id="wjcelcm34c" class="phphistorical_Version2_mids">
<a href="http://ipnx.cn/ja/faq/1796832745.html" title="JavaScript Timeオブジェクト、誰かがEACTEXE、Google Chromeなどのより高速なWebサイトを構(gòu)築します。" class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/246/273/173914572643912.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="JavaScript Timeオブジェクト、誰かがEACTEXE、Google Chromeなどのより高速なWebサイトを構(gòu)築します。" />
</a>
<a href="http://ipnx.cn/ja/faq/1796832745.html" title="JavaScript Timeオブジェクト、誰かがEACTEXE、Google Chromeなどのより高速なWebサイトを構(gòu)築します。" class="phphistorical_Version2_mids_title">JavaScript Timeオブジェクト、誰かがEACTEXE、Google Chromeなどのより高速なWebサイトを構(gòu)築します。</a>
<span id="wjcelcm34c" class="Articlelist_txts_time">Jul 08, 2025 pm 02:27 PM</span>
<p class="Articlelist_txts_p">こんにちは、JavaScript開発者！今週のJavaScriptニュースへようこそ！今週は、DenoとのOracleの商標(biāo)紛爭、新しいJavaScript Timeオブジェクトがブラウザ、Google Chromeアップデート、およびいくつかの強(qiáng)力な開発ツールによってサポートされています。始めましょう！ 「JavaScript」の商標(biāo)を登録しようとするDeno Oracleの試みとのOracleの商標(biāo)紛爭は、論爭を引き起こしました。 Node.jsとDenoの作成者であるRyan Dahlは、商標(biāo)をキャンセルするために請願書を提出しました。</p>
</div>
<div id="wjcelcm34c" class="phphistorical_Version2_mids">
<a href="http://ipnx.cn/ja/faq/1796830657.html" title="React vs Angular vs Vue：どのJSフレームワークが最適ですか？" class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/431/639/175165349052637.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="React vs Angular vs Vue：どのJSフレームワークが最適ですか？" />
</a>
<a href="http://ipnx.cn/ja/faq/1796830657.html" title="React vs Angular vs Vue：どのJSフレームワークが最適ですか？" class="phphistorical_Version2_mids_title">React vs Angular vs Vue：どのJSフレームワークが最適ですか？</a>
<span id="wjcelcm34c" class="Articlelist_txts_time">Jul 05, 2025 am 02:24 AM</span>
<p class="Articlelist_txts_p">どのJavaScriptフレームワークが最良の選択ですか？答えは、あなたのニーズに応じて最も適切なものを選択することです。 1.反応は柔軟で無料で、高いカスタマイズとチームアーキテクチャ機(jī)能を必要とする中規(guī)模および大規(guī)模プロジェクトに適しています。 2。Angularは、エンタープライズレベルのアプリケーションと長期的なメンテナンスに適した完全なソリューションを提供します。 3. Vueは使いやすく、中小規(guī)模のプロジェクトや迅速な発展に適しています。さらに、既存のテクノロジースタック、チームサイズ、プロジェクトのライフサイクル、およびSSRが必要かどうかは、フレームワークを選択する上で重要な要素でもあります。要するに、絶対に最良のフレームワークはありません。最良の選択は、あなたのニーズに合ったものです。</p>
</div>
<div id="wjcelcm34c" class="phphistorical_Version2_mids">
<a href="http://ipnx.cn/ja/faq/1796829862.html" title="JavaScriptですぐに呼び出された関數(shù)式（IIFE）を理解します" class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/175156814092778.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="JavaScriptですぐに呼び出された関數(shù)式（IIFE）を理解します" />
</a>
<a href="http://ipnx.cn/ja/faq/1796829862.html" title="JavaScriptですぐに呼び出された関數(shù)式（IIFE）を理解します" class="phphistorical_Version2_mids_title">JavaScriptですぐに呼び出された関數(shù)式（IIFE）を理解します</a>
<span id="wjcelcm34c" class="Articlelist_txts_time">Jul 04, 2025 am 02:42 AM</span>
<p class="Articlelist_txts_p">iife（即時インドボークフニックエクスペッション）は、定義の直後に実行される関數(shù)式であり、変數(shù)を分離し、グローバルな範(fàn)囲の汚染を避けるために使用されます。括弧內(nèi)に関數(shù)を包むことによって呼び出され、式と括弧のペアがすぐにそれに続く、（function（）{/code/}）（）;そのコアの使用には、次のものが含まれます。1。さまざまな競合を回避し、複數(shù)のスクリプト間の命名の重複を防ぎます。 2。プライベートスコープを作成して、內(nèi)部変數(shù)を見えないようにします。 3。変數(shù)が多すぎずに初期化を容易にするモジュラーコード。一般的なライティング方法には、ES6矢印関數(shù)のパラメーターとバージョンで渡されたバージョンが含まれますが、式とタイを使用する必要があることに注意してください。</p>
</div>
<div id="wjcelcm34c" class="phphistorical_Version2_mids">
<a href="http://ipnx.cn/ja/faq/1796832608.html" title="ハンドリングの約束：javascriptのチェーン、エラー処理、および約束の組み合わせ" class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/175191360175213.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="ハンドリングの約束：javascriptのチェーン、エラー処理、および約束の組み合わせ" />
</a>
<a href="http://ipnx.cn/ja/faq/1796832608.html" title="ハンドリングの約束：javascriptのチェーン、エラー処理、および約束の組み合わせ" class="phphistorical_Version2_mids_title">ハンドリングの約束：javascriptのチェーン、エラー処理、および約束の組み合わせ</a>
<span id="wjcelcm34c" class="Articlelist_txts_time">Jul 08, 2025 am 02:40 AM</span>
<p class="Articlelist_txts_p">約束は、JavaScriptで非同期操作を処理するためのコアメカニズムです。チェーンコール、エラー処理、コンビナーの理解は、アプリケーションをマスターするための鍵です。 1.チェーンコールは、.then（）を通じて新しい約束を返し、非同期プロセスの連結(jié)を?qū)g現(xiàn)します。それぞれ.then（）は以前の結(jié)果を受け取り、値または約束を返すことができます。 2。エラー処理は、.catch（）を使用して例外をキャッチしてサイレント障害を回避し、キャッチのデフォルト値を返すためにプロセスを継続する必要があります。 3。promise.all（）などの組み合わせ（すべての成功後にのみ成功しました）、promise.race（）（最初の完了が返されます）、promise.allsettled（）（すべての完了を待っています）</p>
</div>
<div id="wjcelcm34c" class="phphistorical_Version2_mids">
<a href="http://ipnx.cn/ja/faq/1796832618.html" title="キャッシュAPIとは何ですか？また、サービスワーカーでどのように使用されますか？" class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/175191380054750.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="キャッシュAPIとは何ですか？また、サービスワーカーでどのように使用されますか？" />
</a>
<a href="http://ipnx.cn/ja/faq/1796832618.html" title="キャッシュAPIとは何ですか？また、サービスワーカーでどのように使用されますか？" class="phphistorical_Version2_mids_title">キャッシュAPIとは何ですか？また、サービスワーカーでどのように使用されますか？</a>
<span id="wjcelcm34c" class="Articlelist_txts_time">Jul 08, 2025 am 02:43 AM</span>
<p class="Articlelist_txts_p">Cacheapiは、ブラウザからネットワークリクエストをキャッシュするツールです。これは、ウェブサイトのパフォーマンスとオフラインエクスペリエンスを改善するために、サービスワーカーと併用することがよくあります。 1.開発者は、スクリプト、スタイルシート、寫真などのリソースを手動で保存できるようにします。 2。要求に応じてキャッシュ応答と一致させることができます。 3.特定のキャッシュの削除またはキャッシュ全體のクリアをサポートします。 4.フェッチイベントを聞いているサービスワーカーを介して、キャッシュの優(yōu)先順位またはネットワークの優(yōu)先戦略を?qū)g裝できます。 5.オフラインサポート、繰り返しのアクセス速度の高速化、主要なリソースのプリロード、バックグラウンドアップデートコンテンツによく使用されます。 6.それを使用する場合、キャッシュバージョンの制御、ストレージ制限、およびHTTPキャッシングメカニズムとの違いに注意する必要があります。</p>
</div>
</div>
<a href="http://ipnx.cn/ja/web-designer.html" class="phpgenera_Details_mainL4_botton">
<span>See all articles</span>
<img src="/static/imghw/down_right.png" alt="" />
</a>
</div>
</div>
</div>
</main>
<footer>
<div id="wjcelcm34c" class="footer">
<div id="wjcelcm34c" class="footertop">
<img src="/static/imghw/logo.png" alt="">
<p>福祉オンライン PHP トレーニング，PHP 學(xué)習(xí)者の迅速な成長を支援します！</p>
</div>
<div id="wjcelcm34c" class="footermid">
<a href="http://ipnx.cn/ja/about/us.html">私たちについて</a>
<a href="http://ipnx.cn/ja/about/disclaimer.html">免責(zé)事項</a>
<a href="http://ipnx.cn/ja/update/article_0_1.html">Sitemap</a>
</div>
<div id="wjcelcm34c" class="footerbottom">
<p>
? php.cn All rights reserved
</p>
</div>
</div>
</footer>
<input type="hidden" id="verifycode" value="/captcha.html">
<link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css?2' type='text/css' media='all' />
<footer>
<div class="friendship-link">
<p>感谢您访问我们的网站，您可能还对以下资源感兴趣：</p>
<a href="http://ipnx.cn/" title="亚洲国产日韩欧美一区二区三区">亚洲国产日韩欧美一区二区三区</a>
<div class="friend-links">
</div>
</div>
</footer>
<script>
(function(){
var bp = document.createElement('script');
var curProtocol = window.location.protocol.split(':')[0];
if (curProtocol === 'https') {
bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
}
else {
bp.src = 'http://push.zhanzhang.baidu.com/push.js';
}
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(bp, s);
})();
</script>
</body><div id="36rvu" class="pl_css_ganrao" style="display: none;"><menu id="36rvu"><dl id="36rvu"><acronym id="36rvu"></acronym></dl></menu><thead id="36rvu"></thead><cite id="36rvu"></cite><thead id="36rvu"><acronym id="36rvu"><ruby id="36rvu"></ruby></acronym></thead><sub id="36rvu"></sub><pre id="36rvu"></pre><strong id="36rvu"><label id="36rvu"><acronym id="36rvu"><tfoot id="36rvu"></tfoot></acronym></label></strong><strong id="36rvu"><sup id="36rvu"><strike id="36rvu"></strike></sup></strong><cite id="36rvu"></cite><samp id="36rvu"><small id="36rvu"><dfn id="36rvu"><p id="36rvu"></p></dfn></small></samp><meter id="36rvu"><tt id="36rvu"></tt></meter><track id="36rvu"><nobr id="36rvu"><code id="36rvu"></code></nobr></track><th id="36rvu"></th><s id="36rvu"><span id="36rvu"></span></s><style id="36rvu"></style><var id="36rvu"><legend id="36rvu"><th id="36rvu"><div id="36rvu"></div></th></legend></var><blockquote id="36rvu"><acronym id="36rvu"></acronym></blockquote><form id="36rvu"></form><label id="36rvu"><nobr id="36rvu"><small id="36rvu"><cite id="36rvu"></cite></small></nobr></label><rp id="36rvu"><video id="36rvu"></video></rp><ins id="36rvu"></ins><listing id="36rvu"><nav id="36rvu"><label id="36rvu"><input id="36rvu"></input></label></nav></listing><abbr id="36rvu"><small id="36rvu"></small></abbr><ol id="36rvu"></ol><tfoot id="36rvu"></tfoot><object id="36rvu"></object><pre id="36rvu"><progress id="36rvu"><pre id="36rvu"></pre></progress></pre><dl id="36rvu"></dl><sub id="36rvu"><samp id="36rvu"><em id="36rvu"><dfn id="36rvu"></dfn></em></samp></sub><abbr id="36rvu"></abbr><tt id="36rvu"><th id="36rvu"><listing id="36rvu"></listing></th></tt><wbr id="36rvu"><div id="36rvu"></div></wbr><ol id="36rvu"></ol><s id="36rvu"><source id="36rvu"><form id="36rvu"><sup id="36rvu"></sup></form></source></s><tr id="36rvu"><ul id="36rvu"><small id="36rvu"><optgroup id="36rvu"></optgroup></small></ul></tr><sup id="36rvu"></sup><div id="36rvu"></div><u id="36rvu"></u><form id="36rvu"></form><dfn id="36rvu"><abbr id="36rvu"><var id="36rvu"><label id="36rvu"></label></var></abbr></dfn><label id="36rvu"><i id="36rvu"></i></label><dl id="36rvu"></dl><blockquote id="36rvu"><tt id="36rvu"><small id="36rvu"><noframes id="36rvu"></noframes></small></tt></blockquote><label id="36rvu"></label><thead id="36rvu"><b id="36rvu"><em id="36rvu"></em></b></thead><u id="36rvu"><table id="36rvu"></table></u><nav id="36rvu"></nav><video id="36rvu"><tbody id="36rvu"><label id="36rvu"><dl id="36rvu"></dl></label></tbody></video><pre id="36rvu"><p id="36rvu"><source id="36rvu"></source></p></pre><strong id="36rvu"></strong></div>
</html>