\n<\/p>私たちの最初の傑作
\/\/ 創(chuàng)建舞臺(tái)\n var stage = acgraph.create('stage-container');\n \/\/ 繪制矩形\n var stage.rect(25, 50, 350, 300);<\/pre>\n塗りつぶし、ストローク、パターンの塗りつぶし<\/p>\n
任意の形狀またはパスは、塗りつぶし設(shè)定とストローク設(shè)定を使用して色付けできます。すべてにストローク（境界）がありますが、形狀と閉じたパスのみがパディングを持っています。充填およびストロークの設(shè)定は非常に豊富で、線形または円形の勾配を使用して塗りつぶしとストロークを使用できます。さらに、線に點(diǎn)在し、サポート畫像に複數(shù)のタイルモードが埋められます。しかし、これはほとんどすべてのライブラリで見つけることができるかなり標(biāo)準(zhǔn)的なものです。 GraphicsJSを特別なものにしているのは、メッシュとパターンの塗りつぶし機(jī)能です。これにより、32（?。─问褂每赡埭圣幞氓伐濂榨％毳靴咯`ンを直接使用できるだけでなく、形狀やテキストで作られたカスタムパターンを簡(jiǎn)単に作成できます。 <\/h2>\nさあ、正確に何を達(dá)成できるか見てみましょう！私は家の近くに立っている男の簡(jiǎn)単な絵を描き、それを強(qiáng)化するために異なるパターンと色でそれを満たします。簡(jiǎn)単にするために、それを幼稚な蕓術(shù)絵畫にしましょう（そして、蕓術(shù)の粗さを伴わないようにしてください）。それだけです：<\/h3>\n
\n<\/p> Codepenで結(jié)果を表示します。
\n<\/p>ご覧のとおり、変數(shù)を使用しています。ステージ上のコンテンツを描畫するすべての方法は、作成されたオブジェクトへの參照を返し、このリンクを使用してオブジェクトを変更または削除できます。
\/\/ 創(chuàng)建舞臺(tái)\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 \/\/ 繪制一個(gè)人\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://miracleart.cn/">国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂</a></h1>\n <div class="377j5v51b" 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>ご覧のとおり、これは簡(jiǎn)単です。テキストオブジェクトのインスタンスを作成し、ステージ上にパターンを形成し、テキストをパターンに入れます。 <\/p>\n<pre class='brush:php;toolbar:false;'> \/\/ 創(chuàng)建舞臺(tái)\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このゲームでは、レイヤーを使用します - グラフィックスのオブジェクトは、要素をグループ化するために使用されます。同様の変更を要素（変換など）に適用する場(chǎng)合は、要素をグループ化する必要があります。パフォーマンスとユーザーエクスペリエンスを向上させる可能性のあるレイヤーを一時(shí)停止モードで変更できます（これについては詳細(xì)）。 <\/p>\nこのデモでは、レイヤー関數(shù)を使用して、葉をグループ化し、ラベルを覆うのを避けます（葉が掃引されている葉の數(shù)がわかります）。これを行うには、タグを作成し、ステージバインディングレイヤーを作成する<h3>メソッドを呼び出します。このレイヤーの<\/h3>プロパティを、ラベルの下の<p>プロパティに設(shè)定します。 <\/p>\n<pre class='brush:php;toolbar:false;'> \/\/ 創(chuàng)建舞臺(tái)\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 \/\/ 繪制一個(gè)人\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が使用されます。これにより、要素と要素のグループを移動(dòng)、スケーリング、回転、およびカットできます。これは、レイヤーと仮想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="377j5v51b" id=\"stage-container\" style=\"width: 400px; height: 375px;\"><\/div>\n\n <??>\n <??>\n <\/body>\n <\/html><\/pre>ここでは、葉を計(jì)算するために層を使用していることもわかります。 <p>\n<\/p>\n<pre class='brush:php;toolbar:false;'> \/\/ 創(chuàng)建舞臺(tái)\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>ゲームで葉を生成する場(chǎng)合、新しい葉を追加するときにレンダリングを一時(shí)停止する必要があり、すべての変更が完了した後にレンダリングを再開する必要があります。\n<p>\n<\/p>新しい要素を扱うこの方法により、新しい葉がほとんどすぐに表示されます。 <pre class='brush:php;toolbar:false;'> \/\/ 創(chuàng)建舞臺(tái)\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 \/\/ 繪制一個(gè)人\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サイトでさえ、畫像処理が必要なタスクに遭遇することがよくあります。あらゆる場(chǎng)合にうまく機(jī)能するソリューションを見つけることは不可能ですが、GraphicsJSライブラリを考慮する必要があります。これはオープンソースで、堅(jiān)牢で、優(yōu)れたブラウザのサポートと、楽しく、便利で、もちろん便利な多くの機(jī)能を備えています。 <\/h2>\n<p>以下のコメントでGrphicsJSに関するフィードバックを聞いてみたいです。あなたはすでにそれを使用していますか？新しいプロジェクトに使用することを検討しますか？理由を知りたいのですが、なぜ使わないのかを知りたいです。また、それらすべてを比較して比較するライブラリと記事を描く主要なJavaScriptのリストを執(zhí)筆しています。そこに見たい機(jī)能を自由に指摘してください。 <\/p>さらに読むための<h2>リンク<\/h2>\n<ul>\n<li>一般情報(bào)<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ì)問(wèn)<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は複雑なアニメーションを簡(jiǎn)単に処理するように設(shè)計(jì)されています。緩和機(jī)能、遅延、期間設(shè)定など、アニメーション機(jī)能の豊富なセットを提供します。グラフの屬性、その位置、サイズ、色など、アニメーション化できます。これにより、GraphicsJSはインタラクティブで動(dòng)的なグラフィックを作成するための強(qiáng)力なツールになります。 <p>\n<\/p>GraphicsJSはすべてのブラウザと互換性がありますか？ <h3>\n<\/h3>GraphicsJSは、Chrome、Firefox、Safari、Internet Explorerなど、すべての最新のブラウザーと互換性があるように設(shè)計(jì)されています。レンダリングにはSVGとVMLを使用していますが、これらはすべてそれらをサポートしています。これにより、グラフィックが一貫して見えるようになり、さまざまなプラットフォームやデバイスでうまく機(jī)能します。 <p>\n<\/p>グラフィックスを使用してグラデーションを作成する方法は？ <h3>\n<\/h3>グラフィックスでグラデーションを作成するのは簡(jiǎn)単です。勾配法を使用して、線形または放射狀の勾配を定義し、色と位置を指定し、任意の形狀に勾配を適用できます。これにより、カラフルなグラフィックを簡(jiǎn)単に作成できます。 <p>\n<\/p>グラフィックスを使用してインタラクティブなグラフィックを作成できますか？ <h3>\n<\/h3>はい、GraphicsJSは、インタラクティブなグラフィックを作成できる一連のイベント処理機(jī)能を提供します。イベントリスナーを任意のグラフに添付して、クリック、マウスの動(dòng)きなどのユーザーアクションに応答できます。これにより、GraphicsJSはインタラクティブなWebアプリケーションを作成するための優(yōu)れた選択肢になります。 <p>\n<\/p>GraphicsJSはレイヤーをサポートしていますか？ <h3>\n<\/h3>はい、GraphicsJSはレイヤーをサポートし、グラフィックを個(gè)別のグループに整理できるようにします。各レイヤーは獨(dú)立して操作できるため、複雑なグラフィックを簡(jiǎn)単に管理できます。また、各レイヤーの可視性とZオーダーを制御することもでき、グラフィックの細(xì)粒を制御できます。 <p><\/p>\n<h3>グラフィックスを使用してグラフィックを最適化する方法は？ <\/h3>\n<p>GraphicsJSは、グラフィックを最適化するのに役立ついくつかの機(jī)能を提供します。たとえば、作物方式を使用して、指定された領(lǐng)域の外側(cè)のグラフィックスの一部を非表示にすることで、必要なレンダリングの量を減らすことができます。キャッシュメソッドを使用して、グラフィックのレンダリングされた出力を保存することもできます。これにより、グラフィックを頻繁に塗り直すとパフォーマンスが向上します。 <\/p>\n<h3>グラフィックスを使用してチャートとグラフィックを作成できますか？ <\/h3>\n<p>GraphicsJSはチャートやグラフィックを作成するために特別に設(shè)計(jì)されていませんが、その強(qiáng)力な図面とアニメーション機(jī)能により、チャートやグラフィックを含むあらゆるタイプのグラフィックを作成できます。ライブラリの方法を使用して、線、曲線、長(zhǎng)方形、円などを描畫して、さまざまなチャートタイプを作成できます。 <\/p>\n<h3> GraphicsJsは自由に使用できますか？ <\/h3>\n<p>はい、GraphicsJSは無(wú)料のオープンソースライブラリです。プロジェクトで無(wú)料で使用できます。また、ライブラリは、最新の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="377j5v51b" class="head">
<div id="377j5v51b" class="haed_left">
<div id="377j5v51b" class="haed_logo">
<a href="http://miracleart.cn/ja/" title="" class="haed_logo_a">
<img src="/static/imghw/logo.png" alt="" class="haed_logoimg">
</a>
</div>
<div id="377j5v51b" class="head_nav">
<div id="377j5v51b" class="head_navs">
<a href="javascript:;" title="コミュニティ" class="head_nava head_nava-template1">コミュニティ</a>
<div class="377j5v51b" id="dropdown-template1" style="display: none;">
<div id="377j5v51b" class="languagechoose">
<a href="http://miracleart.cn/ja/article.html" title="記事" class="languagechoosea on">記事</a>
<a href="http://miracleart.cn/ja/faq/zt" title="トピックス" class="languagechoosea">トピックス</a>
<a href="http://miracleart.cn/ja/wenda.html" title="に質(zhì)問(wèn)" class="languagechoosea">に質(zhì)問(wèn)</a>
</div>
</div>
</div>
<div id="377j5v51b" class="head_navs">
<a href="javascript:;" title="學(xué)ぶ" class="head_nava head_nava-template1_1">學(xué)ぶ</a>
<div class="377j5v51b" id="dropdown-template1_1" style="display: none;">
<div id="377j5v51b" class="languagechoose">
<a href="http://miracleart.cn/ja/course.html" title="コース" class="languagechoosea on">コース</a>
<a href="http://miracleart.cn/ja/dic/" title="プログラミング辭典" class="languagechoosea">プログラミング辭典</a>
</div>
</div>
</div>
<div id="377j5v51b" class="head_navs">
<a href="javascript:;" title="ツールライブラリ" class="head_nava head_nava-template1_2">ツールライブラリ</a>
<div class="377j5v51b" id="dropdown-template1_2" style="display: none;">
<div id="377j5v51b" class="languagechoose">
<a href="http://miracleart.cn/ja/toolset/development-tools" title="開発ツール" class="languagechoosea on">開発ツール</a>
<a href="http://miracleart.cn/ja/toolset/website-source-code" title="公式サイト" class="languagechoosea">公式サイト</a>
<a href="http://miracleart.cn/ja/toolset/php-libraries" title="PHP ライブラリ" class="languagechoosea">PHP ライブラリ</a>
<a href="http://miracleart.cn/ja/toolset/js-special-effects" title="JS特殊効果" class="languagechoosea on">JS特殊効果</a>
<a href="http://miracleart.cn/ja/toolset/website-materials" title="サイト素材" class="languagechoosea on">サイト素材</a>
<a href="http://miracleart.cn/ja/toolset/extension-plug-ins" title="拡張プラグイン" class="languagechoosea on">拡張プラグイン</a>
</div>
</div>
</div>
<div id="377j5v51b" class="head_navs">
<a href="http://miracleart.cn/ja/ai" title="AIツール" class="head_nava head_nava-template1_3">AIツール</a>
</div>
<div id="377j5v51b" class="head_navs">
<a href="javascript:;" title="レジャー" class="head_nava head_nava-template1_3">レジャー</a>
<div class="377j5v51b" id="dropdown-template1_3" style="display: none;">
<div id="377j5v51b" class="languagechoose">
<a href="http://miracleart.cn/ja/game" title="ゲームのダウンロード" class="languagechoosea on">ゲームのダウンロード</a>
<a href="http://miracleart.cn/ja/mobile-game-tutorial/" title="ゲームのチュートリアル" class="languagechoosea">ゲームのチュートリアル</a>
</div>
</div>
</div>
</div>
</div>
<div id="377j5v51b" 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="377j5v51b" class="head_right">
<div id="377j5v51b" class="haed_language">
<a href="javascript:;" class="layui-btn haed_language_btn">日本語(yǔ)<i class="layui-icon layui-icon-triangle-d"></i></a>
<div class="377j5v51b" id="dropdown-template" style="display: none;">
<div id="377j5v51b" class="languagechoose">
<a href="javascript:setlang('zh-cn');" title="簡(jiǎn)體中文" class="languagechoosea">簡(jiǎn)體中文</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="日本語(yǔ)" class="languagechoosea">日本語(yǔ)</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="377j5v51b" 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="377j5v51b" class="Article_Details_main">
<div id="377j5v51b" class="Article_Details_main1">
<div id="377j5v51b" class="Article_Details_main1L">
<div id="377j5v51b" class="Article_Details_main1Lmain" id="Article_Details_main1Lmain">
<div id="377j5v51b" class="Article_Details_main1L1">目次</div>
<div id="377j5v51b" class="Article_Details_main1L2" id="Article_Details_main1L2">
<!-- 左側(cè)懸浮，文章定位標(biāo)題1 id="Article_Details_main1L2s_1"-->
<div id="377j5v51b" class="Article_Details_main1L2s ">
<a href="#任意の形狀またはパスは-塗りつぶし設(shè)定とストローク設(shè)定を使用して色付けできます-すべてにストローク-境界-がありますが-形狀と閉じたパスのみがパディングを持っています-充填およびストロークの設(shè)定は非常に豊富で-線形または円形の勾配を使用して塗りつぶしとストロークを使用できます-さらに-線に點(diǎn)在し-サポート畫像に複數(shù)のタイルモードが埋められます-しかし-これはほとんどすべてのライブラリで見つけることができるかなり標(biāo)準(zhǔn)的なものです-GraphicsJSを特別なものにしているのは-メッシュとパターンの塗りつぶし機(jī)能です-これにより-の使用可能なメッシュフィルパターンを直接使用できるだけでなく-形狀やテキストで作られたカスタムパターンを簡(jiǎn)単に作成できます" title="任意の形狀またはパスは、塗りつぶし設(shè)定とストローク設(shè)定を使用して色付けできます。すべてにストローク（境界）がありますが、形狀と閉じたパスのみがパディングを持っています。充填およびストロークの設(shè)定は非常に豊富で、線形または円形の勾配を使用して塗りつぶしとストロークを使用できます。さらに、線に點(diǎn)在し、サポート畫像に複數(shù)のタイルモードが埋められます。しかし、これはほとんどすべてのライブラリで見つけることができるかなり標(biāo)準(zhǔn)的なものです。 GraphicsJSを特別なものにしているのは、メッシュとパターンの塗りつぶし機(jī)能です。これにより、32（！）の使用可能なメッシュフィルパターンを直接使用できるだけでなく、形狀やテキストで作られたカスタムパターンを簡(jiǎn)単に作成できます。 " >任意の形狀またはパスは、塗りつぶし設(shè)定とストローク設(shè)定を使用して色付けできます。すべてにストローク（境界）がありますが、形狀と閉じたパスのみがパディングを持っています。充填およびストロークの設(shè)定は非常に豊富で、線形または円形の勾配を使用して塗りつぶしとストロークを使用できます。さらに、線に點(diǎn)在し、サポート畫像に複數(shù)のタイルモードが埋められます。しかし、これはほとんどすべてのライブラリで見つけることができるかなり標(biāo)準(zhǔn)的なものです。 GraphicsJSを特別なものにしているのは、メッシュとパターンの塗りつぶし機(jī)能です。これにより、32（?。─问褂每赡埭圣幞氓伐濂榨％毳靴咯`ンを直接使用できるだけでなく、形狀やテキストで作られたカスタムパターンを簡(jiǎn)単に作成できます。 </a>
</div>
<div id="377j5v51b" class="Article_Details_main1L2s ">
<a href="#さあ-正確に何を達(dá)成できるか見てみましょう-私は家の近くに立っている男の簡(jiǎn)単な絵を描き-それを強(qiáng)化するために異なるパターンと色でそれを満たします-簡(jiǎn)単にするために-それを幼稚な蕓術(shù)絵畫にしましょう-そして-蕓術(shù)の粗さを伴わないようにしてください-それだけです" title="さあ、正確に何を達(dá)成できるか見てみましょう！私は家の近くに立っている男の簡(jiǎn)単な絵を描き、それを強(qiáng)化するために異なるパターンと色でそれを満たします。簡(jiǎn)単にするために、それを幼稚な蕓術(shù)絵畫にしましょう（そして、蕓術(shù)の粗さを伴わないようにしてください）。それだけです：" >さあ、正確に何を達(dá)成できるか見てみましょう！私は家の近くに立っている男の簡(jiǎn)単な絵を描き、それを強(qiáng)化するために異なるパターンと色でそれを満たします。簡(jiǎn)単にするために、それを幼稚な蕓術(shù)絵畫にしましょう（そして、蕓術(shù)の粗さを伴わないようにしてください）。それだけです：</a>
</div>
<div id="377j5v51b" class="Article_Details_main1L2s ">
<a href="#ゲーム名は" title="ゲーム名は" >ゲーム名は</a>
</div>
<div id="377j5v51b" class="Article_Details_main1L2s ">
<a href="#メソッドを呼び出します-このレイヤーの" title="メソッドを呼び出します。このレイヤーの" >メソッドを呼び出します。このレイヤーの</a>
</div>
<div id="377j5v51b" class="Article_Details_main1L2s ">
<a href="#CodepenでStreet-Cleaner-GraphicsJsを表示します" title="CodepenでStreet Cleaner/GraphicsJsを表示します。 " >CodepenでStreet Cleaner/GraphicsJsを表示します。 </a>
</div>
<div id="377j5v51b" class="Article_Details_main1L2s ">
<a href="#HTML-への移行により-ネットワークが変更されました-最新のWebアプリケーションやシンプルなWebサイトでさえ-畫像処理が必要なタスクに遭遇することがよくあります-あらゆる場(chǎng)合にうまく機(jī)能するソリューションを見つけることは不可能ですが-GraphicsJSライブラリを考慮する必要があります-これはオープンソースで-堅(jiān)牢で-優(yōu)れたブラウザのサポートと-楽しく-便利で-もちろん便利な多くの機(jī)能を備えています" title=" HTML5への移行により、ネットワークが変更されました。最新のWebアプリケーションやシンプルなWebサイトでさえ、畫像処理が必要なタスクに遭遇することがよくあります。あらゆる場(chǎng)合にうまく機(jī)能するソリューションを見つけることは不可能ですが、GraphicsJSライブラリを考慮する必要があります。これはオープンソースで、堅(jiān)牢で、優(yōu)れたブラウザのサポートと、楽しく、便利で、もちろん便利な多くの機(jī)能を備えています。 " > HTML5への移行により、ネットワークが変更されました。最新のWebアプリケーションやシンプルなWebサイトでさえ、畫像処理が必要なタスクに遭遇することがよくあります。あらゆる場(chǎng)合にうまく機(jī)能するソリューションを見つけることは不可能ですが、GraphicsJSライブラリを考慮する必要があります。これはオープンソースで、堅(jiān)牢で、優(yōu)れたブラウザのサポートと、楽しく、便利で、もちろん便利な多くの機(jī)能を備えています。 </a>
</div>
<div id="377j5v51b" class="Article_Details_main1L2s ">
<a href="#リンク" title="リンク" >リンク</a>
</div>
<div id="377j5v51b" class="Article_Details_main1L2s ">
<a href="#グラフィックスを使用してグラフィックを最適化する方法は" title="グラフィックスを使用してグラフィックを最適化する方法は？ " >グラフィックスを使用してグラフィックを最適化する方法は？ </a>
</div>
<div id="377j5v51b" class="Article_Details_main1L2s ">
<a href="#グラフィックスを使用してチャートとグラフィックを作成できますか" title="グラフィックスを使用してチャートとグラフィックを作成できますか？ " >グラフィックスを使用してチャートとグラフィックを作成できますか？ </a>
</div>
<div id="377j5v51b" class="Article_Details_main1L2s ">
<a href="#GraphicsJsは自由に使用できますか" title=" GraphicsJsは自由に使用できますか？ " > GraphicsJsは自由に使用できますか？ </a>
</div>
</div>
</div>
</div>
<div id="377j5v51b" class="Article_Details_main1M">
<div id="377j5v51b" class="phpgenera_Details_mainL1">
<a href="http://miracleart.cn/ja/" title="ホームページ"
class="phpgenera_Details_mainL1a">ホームページ</a>
<img src="/static/imghw/top_right.png" alt="" />
<a href="http://miracleart.cn/ja/web-designer.html"
class="phpgenera_Details_mainL1a">ウェブフロントエンド</a>
<img src="/static/imghw/top_right.png" alt="" />
<a href="http://miracleart.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="377j5v51b" class="Articlelist_txts">
<div id="377j5v51b" class="Articlelist_txts_info">
<h1 class="Articlelist_txts_title">強(qiáng)力な軽量グラフィックライブラリであるGraphicsJSの紹介</h1>
<div id="377j5v51b" class="Articlelist_txts_info_head">
<div id="377j5v51b" class="author_info">
<a href="http://miracleart.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="377j5v51b" class="author_detail">
<a href="http://miracleart.cn/ja/member/1242473.html" class="author_name">Jack chen</a>
</div>
</div>
</div>
<span id="377j5v51b" class="Articlelist_txts_time">Feb 17, 2025 am 10:42 AM</span>
</div>
</div>
<hr />
<div id="377j5v51b" class="article_main php-article">
<div id="377j5v51b" 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>各手法の長(zhǎng)所と短所は十分に文書化されていますが、要するに、SVGはインタラクティブな要素の作成と処理に適しています。これは、SVGがXMLベースのベクトル形式であるため、畫像が<code><svg></svg></code>タグを使用してページにロードされると、その中の各要素をSVG DOMで使用できるためです。 </p>
この記事では、SVGに基づいた新しい強(qiáng)力なオープンソースJavaScript描畫ライブラリであるGraphicsJSを紹介したいと思います（古いIEバージョンの場(chǎng)合、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年間レンダリングされており、その堅(jiān)牢性を確保しています。 AnyChartのJavaScript Drawing Galleryとは異なり、GraphicsJSは商業(yè)および非営利のプロジェクトで無(wú)料で利用できます。 <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を使用するのに役立つ多くのライブラリがあります。これらのライブラリにはそれぞれ長(zhǎng)所と短所がありますが、それらの徹底的な比較は別の記事の主題になります。この記事は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のリリース以來(lái)）使用して獨(dú)自の製品にチャートをレンダリングしているため、GraphicsJSは完全に戦闘テストされています。 （免責(zé)事項(xiàng)：私はAnyChartのR＆Dの責(zé)任者であり、GraphicsJSのリード開発者です）</p>
3番目に、AnyChartのJavaScript Drawing Libraryとは異なり、GraphicsJSは商業(yè)および非営利のプロジェクトで無(wú)料で利用できます。 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き火、紡績(jī)銀河、降雨、手続き上の葉、プレイ可能な15パズルゲームなど、メインギャラリーをご覧ください。 GraphicsJSには、詳細(xì)なドキュメントと包括的なAPIリファレンスのより多くの例が含まれています。 </p>
<p>GraphicsJS Basics </p>
<h2> GraphicsJSを開始するには、ライブラリを參照して、図面のブロックレベルのHTML要素を作成する必要があります。
</h2>
<p>その後、ステージを作成して、長(zhǎng)方形、円、その他の形などの何かを描く必要があります。
</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)建舞臺(tái)
var stage = acgraph.create('stage-container');
// 繪制矩形
var stage.rect(25, 50, 350, 300);</pre>
<p>塗りつぶし、ストローク、パターンの塗りつぶし</p>
<h2 id="任意の形狀またはパスは-塗りつぶし設(shè)定とストローク設(shè)定を使用して色付けできます-すべてにストローク-境界-がありますが-形狀と閉じたパスのみがパディングを持っています-充填およびストロークの設(shè)定は非常に豊富で-線形または円形の勾配を使用して塗りつぶしとストロークを使用できます-さらに-線に點(diǎn)在し-サポート畫像に複數(shù)のタイルモードが埋められます-しかし-これはほとんどすべてのライブラリで見つけることができるかなり標(biāo)準(zhǔn)的なものです-GraphicsJSを特別なものにしているのは-メッシュとパターンの塗りつぶし機(jī)能です-これにより-の使用可能なメッシュフィルパターンを直接使用できるだけでなく-形狀やテキストで作られたカスタムパターンを簡(jiǎn)単に作成できます">任意の形狀またはパスは、塗りつぶし設(shè)定とストローク設(shè)定を使用して色付けできます。すべてにストローク（境界）がありますが、形狀と閉じたパスのみがパディングを持っています。充填およびストロークの設(shè)定は非常に豊富で、線形または円形の勾配を使用して塗りつぶしとストロークを使用できます。さらに、線に點(diǎn)在し、サポート畫像に複數(shù)のタイルモードが埋められます。しかし、これはほとんどすべてのライブラリで見つけることができるかなり標(biāo)準(zhǔn)的なものです。 GraphicsJSを特別なものにしているのは、メッシュとパターンの塗りつぶし機(jī)能です。これにより、32（?。─问褂每赡埭圣幞氓伐濂榨％毳靴咯`ンを直接使用できるだけでなく、形狀やテキストで作られたカスタムパターンを簡(jiǎn)単に作成できます。 </h2>
<h3 id="さあ-正確に何を達(dá)成できるか見てみましょう-私は家の近くに立っている男の簡(jiǎn)単な絵を描き-それを強(qiáng)化するために異なるパターンと色でそれを満たします-簡(jiǎn)単にするために-それを幼稚な蕓術(shù)絵畫にしましょう-そして-蕓術(shù)の粗さを伴わないようにしてください-それだけです">さあ、正確に何を達(dá)成できるか見てみましょう！私は家の近くに立っている男の簡(jiǎn)単な絵を描き、それを強(qiáng)化するために異なるパターンと色でそれを満たします。簡(jiǎn)単にするために、それを幼稚な蕓術(shù)絵畫にしましょう（そして、蕓術(shù)の粗さを伴わないようにしてください）。それだけです：</h3>
<p>
</p> Codepenで結(jié)果を表示します。 <p>
</p>ご覧のとおり、変數(shù)を使用しています。ステージ上のコンテンツを描畫するすべての方法は、作成されたオブジェクトへの參照を返し、このリンクを使用してオブジェクトを変更または削除できます。 <pre class='brush:php;toolbar:false;'> // 創(chuàng)建舞臺(tái)
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();
// 繪制一個(gè)人
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>ご覧のとおり、これは簡(jiǎn)単です。テキストオブジェクトのインスタンスを作成し、ステージ上にパターンを形成し、テキストをパターンに入れます。 </p>
<pre class='brush:php;toolbar:false;'> // 創(chuàng)建舞臺(tái)
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>
このゲームでは、レイヤーを使用します - グラフィックスのオブジェクトは、要素をグループ化するために使用されます。同様の変更を要素（変換など）に適用する場(chǎng)合は、要素をグループ化する必要があります。パフォーマンスとユーザーエクスペリエンスを向上させる可能性のあるレイヤーを一時(shí)停止モードで変更できます（これについては詳細(xì)）。 </p>
このデモでは、レイヤー関數(shù)を使用して、葉をグループ化し、ラベルを覆うのを避けます（葉が掃引されている葉の數(shù)がわかります）。これを行うには、タグを作成し、ステージバインディングレイヤーを作成する<h3 id="メソッドを呼び出します-このレイヤーの">メソッドを呼び出します。このレイヤーの</h3>プロパティを、ラベルの下の<p>プロパティに設(shè)定します。 </p>
<pre class='brush:php;toolbar:false;'> // 創(chuàng)建舞臺(tái)
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();
// 繪制一個(gè)人
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が使用されます。これにより、要素と要素のグループを移動(dòng)、スケーリング、回転、およびカットできます。これは、レイヤーと仮想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>ここでは、葉を計(jì)算するために層を使用していることもわかります。 <p>
</p>
<pre class='brush:php;toolbar:false;'> // 創(chuàng)建舞臺(tái)
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>ゲームで葉を生成する場(chǎng)合、新しい葉を追加するときにレンダリングを一時(shí)停止する必要があり、すべての変更が完了した後にレンダリングを再開する必要があります。
<p>
</p>新しい要素を扱うこの方法により、新しい葉がほとんどすぐに表示されます。 <pre class='brush:php;toolbar:false;'> // 創(chuàng)建舞臺(tái)
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();
// 繪制一個(gè)人
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サイトでさえ-畫像処理が必要なタスクに遭遇することがよくあります-あらゆる場(chǎng)合にうまく機(jī)能するソリューションを見つけることは不可能ですが-GraphicsJSライブラリを考慮する必要があります-これはオープンソースで-堅(jiān)牢で-優(yōu)れたブラウザのサポートと-楽しく-便利で-もちろん便利な多くの機(jī)能を備えています"> HTML5への移行により、ネットワークが変更されました。最新のWebアプリケーションやシンプルなWebサイトでさえ、畫像処理が必要なタスクに遭遇することがよくあります。あらゆる場(chǎng)合にうまく機(jī)能するソリューションを見つけることは不可能ですが、GraphicsJSライブラリを考慮する必要があります。これはオープンソースで、堅(jiān)牢で、優(yōu)れたブラウザのサポートと、楽しく、便利で、もちろん便利な多くの機(jī)能を備えています。 </h2>
<p>以下のコメントでGrphicsJSに関するフィードバックを聞いてみたいです。あなたはすでにそれを使用していますか？新しいプロジェクトに使用することを検討しますか？理由を知りたいのですが、なぜ使わないのかを知りたいです。また、それらすべてを比較して比較するライブラリと記事を描く主要なJavaScriptのリストを執(zhí)筆しています。そこに見たい機(jī)能を自由に指摘してください。 </p>さらに読むための<h2 id="リンク">リンク</h2>
<ul>
<li>一般情報(bào)<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ì)問(wèn)<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は複雑なアニメーションを簡(jiǎn)単に処理するように設(shè)計(jì)されています。緩和機(jī)能、遅延、期間設(shè)定など、アニメーション機(jī)能の豊富なセットを提供します。グラフの屬性、その位置、サイズ、色など、アニメーション化できます。これにより、GraphicsJSはインタラクティブで動(dòng)的なグラフィックを作成するための強(qiáng)力なツールになります。 <p>
</p>GraphicsJSはすべてのブラウザと互換性がありますか？ <h3>
</h3>GraphicsJSは、Chrome、Firefox、Safari、Internet Explorerなど、すべての最新のブラウザーと互換性があるように設(shè)計(jì)されています。レンダリングにはSVGとVMLを使用していますが、これらはすべてそれらをサポートしています。これにより、グラフィックが一貫して見えるようになり、さまざまなプラットフォームやデバイスでうまく機(jī)能します。 <p>
</p>グラフィックスを使用してグラデーションを作成する方法は？ <h3>
</h3>グラフィックスでグラデーションを作成するのは簡(jiǎn)単です。勾配法を使用して、線形または放射狀の勾配を定義し、色と位置を指定し、任意の形狀に勾配を適用できます。これにより、カラフルなグラフィックを簡(jiǎn)単に作成できます。 <p>
</p>グラフィックスを使用してインタラクティブなグラフィックを作成できますか？ <h3>
</h3>はい、GraphicsJSは、インタラクティブなグラフィックを作成できる一連のイベント処理機(jī)能を提供します。イベントリスナーを任意のグラフに添付して、クリック、マウスの動(dòng)きなどのユーザーアクションに応答できます。これにより、GraphicsJSはインタラクティブなWebアプリケーションを作成するための優(yōu)れた選択肢になります。 <p>
</p>GraphicsJSはレイヤーをサポートしていますか？ <h3>
</h3>はい、GraphicsJSはレイヤーをサポートし、グラフィックを個(gè)別のグループに整理できるようにします。各レイヤーは獨(dú)立して操作できるため、複雑なグラフィックを簡(jiǎn)単に管理できます。また、各レイヤーの可視性とZオーダーを制御することもでき、グラフィックの細(xì)粒を制御できます。 <p></p>
<h3 id="グラフィックスを使用してグラフィックを最適化する方法は">グラフィックスを使用してグラフィックを最適化する方法は？ </h3>
<p>GraphicsJSは、グラフィックを最適化するのに役立ついくつかの機(jī)能を提供します。たとえば、作物方式を使用して、指定された領(lǐng)域の外側(cè)のグラフィックスの一部を非表示にすることで、必要なレンダリングの量を減らすことができます。キャッシュメソッドを使用して、グラフィックのレンダリングされた出力を保存することもできます。これにより、グラフィックを頻繁に塗り直すとパフォーマンスが向上します。 </p>
<h3 id="グラフィックスを使用してチャートとグラフィックを作成できますか">グラフィックスを使用してチャートとグラフィックを作成できますか？ </h3>
<p>GraphicsJSはチャートやグラフィックを作成するために特別に設(shè)計(jì)されていませんが、その強(qiáng)力な図面とアニメーション機(jī)能により、チャートやグラフィックを含むあらゆるタイプのグラフィックを作成できます。ライブラリの方法を使用して、線、曲線、長(zhǎng)方形、円などを描畫して、さまざまなチャートタイプを作成できます。 </p>
<h3 id="GraphicsJsは自由に使用できますか"> GraphicsJsは自由に使用できますか？ </h3>
<p>はい、GraphicsJSは無(wú)料のオープンソースライブラリです。プロジェクトで無(wú)料で使用できます。また、ライブラリは、最新のWeb標(biāo)準(zhǔn)とテクノロジーと同期していることを確認(rèn)するために積極的に維持されています。 </p><p>以上が強(qiáng)力な軽量グラフィックライブラリであるGraphicsJSの紹介の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。</p>
</div>
</div>
<div id="377j5v51b" class="wzconShengming_sp">
<div id="377j5v51b" class="bzsmdiv_sp">このウェブサイトの聲明</div>
<div>この記事の內(nèi)容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰屬します。このサイトは、それに相當(dāng)する法的責(zé)任を負(fù)いません。盜作または侵害の疑いのあるコンテンツを見つけた場(chǎng)合は、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="377j5v51b" 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="377j5v51b" class="phpgenera_Details_mainR4">
<div id="377j5v51b" class="phpmain1_4R_readrank">
<div id="377j5v51b" 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="377j5v51b" class="phpgenera_Details_mainR4_bottom">
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://miracleart.cn/ja/faq/1796819578.html" title="KB5060533を修正する方法Windows 10にインストールできませんか？" class="phpgenera_Details_mainR4_bottom_title">KB5060533を修正する方法Windows 10にインストールできませんか？</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>4週間前</span>
<span>By DDD</span>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://miracleart.cn/ja/faq/1796819730.html" title="砂丘：覚醒 - 斷熱布を入手する場(chǎng)所" class="phpgenera_Details_mainR4_bottom_title">砂丘：覚醒 - 斷熱布を入手する場(chǎng)所</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>4週間前</span>
<span>By Jack chen</span>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://miracleart.cn/ja/faq/1796819016.html" title="Gmailログイン：Gmail -Minitoolからサインアップ、サインイン、またはサインアウトする方法" class="phpgenera_Details_mainR4_bottom_title">Gmailログイン：Gmail -Minitoolからサインアップ、サインイン、またはサインアウトする方法</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>1 か月前</span>
<span>By Jack chen</span>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://miracleart.cn/ja/faq/1796819994.html" title="KB5060999を修正する方法Windows 11にインストールできませんか？" class="phpgenera_Details_mainR4_bottom_title">KB5060999を修正する方法Windows 11にインストールできませんか？</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>3週間前</span>
<span>By DDD</span>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://miracleart.cn/ja/faq/1796819536.html" title="汚染された聖杯のギルドガイド：アバロンの崩壊" class="phpgenera_Details_mainR4_bottom_title">汚染された聖杯のギルドガイド：アバロンの崩壊</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>4週間前</span>
<span>By Jack chen</span>
</div>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR3_more">
<a href="http://miracleart.cn/ja/article.html">もっと見る</a>
</div>
</div>
</div> -->
<div id="377j5v51b" class="phpgenera_Details_mainR3">
<div id="377j5v51b" class="phpmain1_4R_readrank">
<div id="377j5v51b" 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="377j5v51b" class="phpgenera_Details_mainR3_bottom">
<div id="377j5v51b" class="phpmain_tab2_mids_top">
<a href="http://miracleart.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="377j5v51b" class="phpmain_tab2_mids_info">
<a href="http://miracleart.cn/ja/ai/undress-ai-tool" title="Undress AI Tool" class="phpmain_tab2_mids_title">
<h3>Undress AI Tool</h3>
</a>
<p>脫衣畫像を無(wú)料で</p>
</div>
</div>
<div id="377j5v51b" class="phpmain_tab2_mids_top">
<a href="http://miracleart.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="377j5v51b" class="phpmain_tab2_mids_info">
<a href="http://miracleart.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="377j5v51b" class="phpmain_tab2_mids_top">
<a href="http://miracleart.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="377j5v51b" class="phpmain_tab2_mids_info">
<a href="http://miracleart.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="377j5v51b" class="phpmain_tab2_mids_top">
<a href="http://miracleart.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="377j5v51b" class="phpmain_tab2_mids_info">
<a href="http://miracleart.cn/ja/ai/clothoffio" title="Clothoff.io" class="phpmain_tab2_mids_title">
<h3>Clothoff.io</h3>
</a>
<p>AI衣類リムーバー</p>
</div>
</div>
<div id="377j5v51b" class="phpmain_tab2_mids_top">
<a href="http://miracleart.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="377j5v51b" class="phpmain_tab2_mids_info">
<a href="http://miracleart.cn/ja/ai/video-swap" title="Video Face Swap" class="phpmain_tab2_mids_title">
<h3>Video Face Swap</h3>
</a>
<p>完全無(wú)料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡(jiǎn)単に交換できます。</p>
</div>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR3_more">
<a href="http://miracleart.cn/ja/ai">もっと見る</a>
</div>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4">
<div id="377j5v51b" class="phpmain1_4R_readrank">
<div id="377j5v51b" 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="377j5v51b" class="phpgenera_Details_mainR4_bottom">
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://miracleart.cn/ja/faq/1796819578.html" title="KB5060533を修正する方法Windows 10にインストールできませんか？" class="phpgenera_Details_mainR4_bottom_title">KB5060533を修正する方法Windows 10にインストールできませんか？</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>4週間前</span>
<span>By DDD</span>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://miracleart.cn/ja/faq/1796819730.html" title="砂丘：覚醒 - 斷熱布を入手する場(chǎng)所" class="phpgenera_Details_mainR4_bottom_title">砂丘：覚醒 - 斷熱布を入手する場(chǎng)所</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>4週間前</span>
<span>By Jack chen</span>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://miracleart.cn/ja/faq/1796819016.html" title="Gmailログイン：Gmail -Minitoolからサインアップ、サインイン、またはサインアウトする方法" class="phpgenera_Details_mainR4_bottom_title">Gmailログイン：Gmail -Minitoolからサインアップ、サインイン、またはサインアウトする方法</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>1 か月前</span>
<span>By Jack chen</span>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://miracleart.cn/ja/faq/1796819994.html" title="KB5060999を修正する方法Windows 11にインストールできませんか？" class="phpgenera_Details_mainR4_bottom_title">KB5060999を修正する方法Windows 11にインストールできませんか？</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>3週間前</span>
<span>By DDD</span>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://miracleart.cn/ja/faq/1796819536.html" title="汚染された聖杯のギルドガイド：アバロンの崩壊" class="phpgenera_Details_mainR4_bottom_title">汚染された聖杯のギルドガイド：アバロンの崩壊</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>4週間前</span>
<span>By Jack chen</span>
</div>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR3_more">
<a href="http://miracleart.cn/ja/article.html">もっと見る</a>
</div>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR3">
<div id="377j5v51b" class="phpmain1_4R_readrank">
<div id="377j5v51b" 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="377j5v51b" class="phpgenera_Details_mainR3_bottom">
<div id="377j5v51b" class="phpmain_tab2_mids_top">
<a href="http://miracleart.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="377j5v51b" class="phpmain_tab2_mids_info">
<a href="http://miracleart.cn/ja/toolset/development-tools/92" title="メモ帳++7.3.1" class="phpmain_tab2_mids_title">
<h3>メモ帳++7.3.1</h3>
</a>
<p>使いやすく無(wú)料のコードエディター</p>
</div>
</div>
<div id="377j5v51b" class="phpmain_tab2_mids_top">
<a href="http://miracleart.cn/ja/toolset/development-tools/93" title="SublimeText3 中國(guó)語(yǔ)版" 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 中國(guó)語(yǔ)版" />
</a>
<div id="377j5v51b" class="phpmain_tab2_mids_info">
<a href="http://miracleart.cn/ja/toolset/development-tools/93" title="SublimeText3 中國(guó)語(yǔ)版" class="phpmain_tab2_mids_title">
<h3>SublimeText3 中國(guó)語(yǔ)版</h3>
</a>
<p>中國(guó)語(yǔ)版、とても使いやすい</p>
</div>
</div>
<div id="377j5v51b" class="phpmain_tab2_mids_top">
<a href="http://miracleart.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="377j5v51b" class="phpmain_tab2_mids_info">
<a href="http://miracleart.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="377j5v51b" class="phpmain_tab2_mids_top">
<a href="http://miracleart.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="377j5v51b" class="phpmain_tab2_mids_info">
<a href="http://miracleart.cn/ja/toolset/development-tools/469" title="ドリームウィーバー CS6" class="phpmain_tab2_mids_title">
<h3>ドリームウィーバー CS6</h3>
</a>
<p>ビジュアル Web 開発ツール</p>
</div>
</div>
<div id="377j5v51b" class="phpmain_tab2_mids_top">
<a href="http://miracleart.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="377j5v51b" class="phpmain_tab2_mids_info">
<a href="http://miracleart.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="377j5v51b" class="phpgenera_Details_mainR3_more">
<a href="http://miracleart.cn/ja/ai">もっと見る</a>
</div>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4">
<div id="377j5v51b" class="phpmain1_4R_readrank">
<div id="377j5v51b" 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="377j5v51b" class="phpgenera_Details_mainR4_bottom">
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://miracleart.cn/ja/faq/gmailyxdlrkzn" title="Gmailメールのログイン入り口はどこですか？" class="phpgenera_Details_mainR4_bottom_title">Gmailメールのログイン入り口はどこですか？</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/eyess.png" alt="" />
<span>8519</span>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/tiezi.png" alt="" />
<span>17</span>
</div>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://miracleart.cn/ja/faq/java-tutorial" title="Java チュートリアル" class="phpgenera_Details_mainR4_bottom_title">Java チュートリアル</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/eyess.png" alt="" />
<span>1744</span>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/tiezi.png" alt="" />
<span>16</span>
</div>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://miracleart.cn/ja/faq/cakephp-tutor" title="CakePHP チュートリアル" class="phpgenera_Details_mainR4_bottom_title">CakePHP チュートリアル</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/eyess.png" alt="" />
<span>1599</span>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/tiezi.png" alt="" />
<span>56</span>
</div>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://miracleart.cn/ja/faq/laravel-tutori" title="Laravel チュートリアル" class="phpgenera_Details_mainR4_bottom_title">Laravel チュートリアル</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/eyess.png" alt="" />
<span>1538</span>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/tiezi.png" alt="" />
<span>28</span>
</div>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://miracleart.cn/ja/faq/php-tutorial" title="PHP チュートリアル" class="phpgenera_Details_mainR4_bottom_title">PHP チュートリアル</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/eyess.png" alt="" />
<span>1397</span>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/tiezi.png" alt="" />
<span>31</span>
</div>
</div>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR3_more">
<a href="http://miracleart.cn/ja/faq/zt">もっと見る</a>
</div>
</div>
</div>
</div>
</div>
<div id="377j5v51b" class="Article_Details_main2">
<div id="377j5v51b" class="phpgenera_Details_mainL4">
<div id="377j5v51b" 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="377j5v51b" class="phpgenera_Details_mainL4_info">
<div id="377j5v51b" class="phphistorical_Version2_mids">
<a href="http://miracleart.cn/ja/faq/1796819009.html" title="JavaScript vs. Java：どの言語(yǔ)を?qū)Wぶべきですか？" 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/174948511111096.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="JavaScript vs. Java：どの言語(yǔ)を?qū)Wぶべきですか？" />
</a>
<a href="http://miracleart.cn/ja/faq/1796819009.html" title="JavaScript vs. Java：どの言語(yǔ)を?qū)Wぶべきですか？" class="phphistorical_Version2_mids_title">JavaScript vs. Java：どの言語(yǔ)を?qū)Wぶべきですか？</a>
<span id="377j5v51b" class="Articlelist_txts_time">Jun 10, 2025 am 12:05 AM</span>
<p class="Articlelist_txts_p">JavaScriptisidealforwebdevelopment,whileJavasuitslarge-scaleapplicationsandAndroiddevelopment.1)JavaScriptexcelsincreatinginteractivewebexperiencesandfull-stackdevelopmentwithNode.js.2)Javaisrobustforenterprisesoftwareandbackendsystems,offeringstrong</p>
</div>
<div id="377j5v51b" class="phphistorical_Version2_mids">
<a href="http://miracleart.cn/ja/faq/1796819628.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/174969522179516.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="JavaScriptで使用するコメントシンボル：明確な説明" />
</a>
<a href="http://miracleart.cn/ja/faq/1796819628.html" title="JavaScriptで使用するコメントシンボル：明確な説明" class="phphistorical_Version2_mids_title">JavaScriptで使用するコメントシンボル：明確な説明</a>
<span id="377j5v51b" class="Articlelist_txts_time">Jun 12, 2025 am 10:27 AM</span>
<p class="Articlelist_txts_p">JavaScriptでは、シングルラインコメント（//）またはマルチラインコメント（//）を選択することは、コメントの目的とプロジェクトの要件に依存します。 2。詳細(xì)なドキュメントには、マルチラインコメントを使用します。 3。コメントスタイルの一貫性を維持します。 4。過(guò)剰な承認(rèn)を避けます。 5.コメントがコードと同期して更新されていることを確認(rèn)してください。適切な注釈スタイルを選択すると、コードの読みやすさと保守性を向上させることができます。</p>
</div>
<div id="377j5v51b" class="phphistorical_Version2_mids">
<a href="http://miracleart.cn/ja/faq/1796819249.html" title="JavaScriptの究極のガイドコメント：コードの明確さを強(qiáng)化します" 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/174957144144613.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="JavaScriptの究極のガイドコメント：コードの明確さを強(qiáng)化します" />
</a>
<a href="http://miracleart.cn/ja/faq/1796819249.html" title="JavaScriptの究極のガイドコメント：コードの明確さを強(qiáng)化します" class="phphistorical_Version2_mids_title">JavaScriptの究極のガイドコメント：コードの明確さを強(qiáng)化します</a>
<span id="377j5v51b" class="Articlelist_txts_time">Jun 11, 2025 am 12:04 AM</span>
<p class="Articlelist_txts_p">はい、javascriptcommentsは不必要に使用されています。</p>
</div>
<div id="377j5v51b" class="phphistorical_Version2_mids">
<a href="http://miracleart.cn/ja/faq/1796822063.html" title="Java vs. 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/175035046165294.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Java vs. JavaScript：混亂を解消します" />
</a>
<a href="http://miracleart.cn/ja/faq/1796822063.html" title="Java vs. JavaScript：混亂を解消します" class="phphistorical_Version2_mids_title">Java vs. JavaScript：混亂を解消します</a>
<span id="377j5v51b" class="Articlelist_txts_time">Jun 20, 2025 am 12:27 AM</span>
<p class="Articlelist_txts_p">JavaとJavaScriptは異なるプログラミング言語(yǔ)であり、それぞれ異なるアプリケーションシナリオに適しています。 Javaは大規(guī)模なエンタープライズおよびモバイルアプリケーション開発に使用されますが、JavaScriptは主にWebページ開発に使用されます。</p>
</div>
<div id="377j5v51b" class="phphistorical_Version2_mids">
<a href="http://miracleart.cn/ja/faq/1796821632.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/175026483186295.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="JavaScriptコメント：短い説明" />
</a>
<a href="http://miracleart.cn/ja/faq/1796821632.html" title="JavaScriptコメント：短い説明" class="phphistorical_Version2_mids_title">JavaScriptコメント：短い説明</a>
<span id="377j5v51b" class="Articlelist_txts_time">Jun 19, 2025 am 12:40 AM</span>
<p class="Articlelist_txts_p">JavaScriptcommentsEareEssentialential-formaining、およびGuidingCodeexecution.1）single-linecommentseared forquickexplanations.2）多LinecommentsexplaincomplexlogiCorprovidededocumentation.3）clarifyspartsofcode.bestpractic</p>
</div>
<div id="377j5v51b" class="phphistorical_Version2_mids">
<a href="http://miracleart.cn/ja/faq/1796820343.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/174983106165148.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="JavaScriptのマスターコメント：包括的なガイド" />
</a>
<a href="http://miracleart.cn/ja/faq/1796820343.html" title="JavaScriptのマスターコメント：包括的なガイド" class="phphistorical_Version2_mids_title">JavaScriptのマスターコメント：包括的なガイド</a>
<span id="377j5v51b" class="Articlelist_txts_time">Jun 14, 2025 am 12:11 AM</span>
<p class="Articlelist_txts_p">ContureCrucialInjavascript formantaining andFosteringCollaboration.1）TheypindeBugging、Onboarding、およびUnderstandingCodeevolution.2）usesingle-linecomments for quickexplanations andmulti-linecomments fordeTeTaileddespransions.3）BestPractsinclud</p>
</div>
<div id="377j5v51b" class="phphistorical_Version2_mids">
<a href="http://miracleart.cn/ja/faq/1796820029.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/174974463014917.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="JavaScriptデータ型：ディープダイビング" />
</a>
<a href="http://miracleart.cn/ja/faq/1796820029.html" title="JavaScriptデータ型：ディープダイビング" class="phphistorical_Version2_mids_title">JavaScriptデータ型：ディープダイビング</a>
<span id="377j5v51b" class="Articlelist_txts_time">Jun 13, 2025 am 12:10 AM</span>
<p class="Articlelist_txts_p">javascripthasseveralprimitivedatypes：number、string、boolean、undefined、null、symbol、andbigint、andnon-primitiveTypeslike objectandarray</p>
</div>
<div id="377j5v51b" class="phphistorical_Version2_mids">
<a href="http://miracleart.cn/ja/faq/1796822037.html" title="JavaScript vs. Java：開発者向けの包括的な比較" 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/175035006093854.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="JavaScript vs. Java：開発者向けの包括的な比較" />
</a>
<a href="http://miracleart.cn/ja/faq/1796822037.html" title="JavaScript vs. Java：開発者向けの包括的な比較" class="phphistorical_Version2_mids_title">JavaScript vs. Java：開発者向けの包括的な比較</a>
<span id="377j5v51b" class="Articlelist_txts_time">Jun 20, 2025 am 12:21 AM</span>
<p class="Articlelist_txts_p">javascriptispreferredforwebdevelopment、whilejavaisbetterforlge-scalebackendsystemsandroidapps.1）javascriptexcelsininintingtivewebexperiences withitsdynAmicnature anddommanipulation.2）javaofferstruntypyping-dobject-reientedpeatures</p>
</div>
</div>
<a href="http://miracleart.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="377j5v51b" class="footer">
<div id="377j5v51b" class="footertop">
<img src="/static/imghw/logo.png" alt="">
<p>福祉オンライン PHP トレーニング，PHP 學(xué)習(xí)者の迅速な成長(zhǎng)を支援します！</p>
</div>
<div id="377j5v51b" class="footermid">
<a href="http://miracleart.cn/ja/about/us.html">私たちについて</a>
<a href="http://miracleart.cn/ja/about/disclaimer.html">免責(zé)事項(xiàng)</a>
<a href="http://miracleart.cn/ja/update/article_0_1.html">Sitemap</a>
</div>
<div id="377j5v51b" 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://miracleart.cn/" title="国产av日韩一区二区三区精品">国产av日韩一区二区三区精品</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="umgbv" class="pl_css_ganrao" style="display: none;"><progress id="umgbv"><track id="umgbv"></track></progress><pre id="umgbv"><mark id="umgbv"></mark></pre><optgroup id="umgbv"><td id="umgbv"><pre id="umgbv"><div id="umgbv"></div></pre></td></optgroup><form id="umgbv"></form><pre id="umgbv"><ol id="umgbv"></ol></pre><strike id="umgbv"><th id="umgbv"></th></strike><dfn id="umgbv"></dfn><ins id="umgbv"></ins><b id="umgbv"></b><listing id="umgbv"></listing><center id="umgbv"></center><menu id="umgbv"><font id="umgbv"><style id="umgbv"></style></font></menu><dfn id="umgbv"></dfn><nobr id="umgbv"></nobr><video id="umgbv"><sup id="umgbv"></sup></video><acronym id="umgbv"><u id="umgbv"><strike id="umgbv"><tr id="umgbv"></tr></strike></u></acronym><pre id="umgbv"><ol id="umgbv"></ol></pre><dfn id="umgbv"></dfn><option id="umgbv"></option><u id="umgbv"></u><menuitem id="umgbv"><code id="umgbv"><menuitem id="umgbv"><strong id="umgbv"></strong></menuitem></code></menuitem><kbd id="umgbv"><strong id="umgbv"><rp id="umgbv"></rp></strong></kbd><thead id="umgbv"><pre id="umgbv"><samp id="umgbv"><i id="umgbv"></i></samp></pre></thead><li id="umgbv"></li><menuitem id="umgbv"></menuitem><dd id="umgbv"><abbr id="umgbv"></abbr></dd><output id="umgbv"></output><big id="umgbv"></big><strike id="umgbv"></strike><legend id="umgbv"></legend><acronym id="umgbv"><noframes id="umgbv"><span id="umgbv"><optgroup id="umgbv"></optgroup></span></noframes></acronym><sup id="umgbv"><strong id="umgbv"><em id="umgbv"><input id="umgbv"></input></em></strong></sup><th id="umgbv"><dl id="umgbv"></dl></th><bdo id="umgbv"><mark id="umgbv"><listing id="umgbv"><sub id="umgbv"></sub></listing></mark></bdo><object id="umgbv"><tt id="umgbv"><center id="umgbv"><tr id="umgbv"></tr></center></tt></object><address id="umgbv"></address><code id="umgbv"><tr id="umgbv"></tr></code><object id="umgbv"><tt id="umgbv"><strike id="umgbv"><tr id="umgbv"></tr></strike></tt></object><xmp id="umgbv"><label id="umgbv"><meter id="umgbv"><p id="umgbv"></p></meter></label></xmp><acronym id="umgbv"></acronym><sup id="umgbv"><table id="umgbv"><address id="umgbv"></address></table></sup><strike id="umgbv"></strike><rp id="umgbv"></rp><tbody id="umgbv"></tbody><thead id="umgbv"><track id="umgbv"><tfoot id="umgbv"><track id="umgbv"></track></tfoot></track></thead><button id="umgbv"></button><sup id="umgbv"><strong id="umgbv"><em id="umgbv"></em></strong></sup><pre id="umgbv"><ol id="umgbv"><font id="umgbv"><style id="umgbv"></style></font></ol></pre><progress id="umgbv"><small id="umgbv"><progress id="umgbv"><dfn id="umgbv"></dfn></progress></small></progress><center id="umgbv"><optgroup id="umgbv"><meter id="umgbv"><bdo id="umgbv"></bdo></meter></optgroup></center></div>
</html>