Sie sollten dann eine Bühne erstellen und etwas darin zeichnen, z. B. einen Rechteck, einen Kreis oder eine andere Form: <\/p>\n
\/\/ 創(chuàng)建舞臺(tái)\n var stage = acgraph.create('stage-container');\n \/\/ 繪制矩形\n var stage.rect(25, 50, 350, 300);<\/pre>\n Folgendes ist ein Beispiel auf Codepen, in dem wir noch einen Schritt weiter gehen und das Symbol für heilige Heiligtümer zeichnen. <\/p>\n
Unser erstes Meisterwerk <\/h2>\n Füllung, Schlaganfall und Muster füllen <\/h3>\n
Jede Form oder Pfad kann mit Fülleinstellungen und Schlaganfalleinstellungen gef?rbt werden. Alles hat einen Schlaganfall (Grenze), aber nur die Form und die geschlossenen Pfade haben Polsterung. Füll- und Schlaganfalleinstellungen sind sehr reichhaltig und Sie k?nnen lineare oder kreisf?rmige Gradienten für Füllung und Schlaganfall verwenden. Zus?tzlich k?nnen die Zeilen gepunktet und das Bildfüllen mit mehreren Fliesenmodi unterstützt werden. Aber das ist alles ziemlich übliche Sachen, die Sie in fast jeder Bibliothek finden k?nnen. Was GraphicsJs besonders macht, ist die Mesh- und Muster -Füllfunktion, mit der Sie nicht nur 32 (!) Von den verfügbaren Mesh -Füllmustern direkt verwenden k?nnen, sondern Sie auch einfach benutzerdefinierte Muster aus Formen oder Text erstellen k?nnen. <\/p>\n
Lassen Sie uns jetzt sehen, was genau erreicht werden kann! Ich werde eine einfache Zeichnung eines Mannes zeichnen, der in der N?he des Hauses steht, und sie mit verschiedenen Mustern und Farben füllen, um ihn zu verbessern. Lassen Sie uns zum Einfachheit halber zu einem kindlichen Kunstgem?lde machen (und versuchen Sie, keine Kunstrauheit einzubeziehen). Das war's: <\/p>\n
\/\/ 創(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 Zeigen Sie die Ergebnisse auf CodePen an. <\/p>\n
Wie Sie sehen, verwenden wir jetzt Variablen - alle Methoden zum Zeichnen von Inhalten auf der Bühne geben eine Referenz auf das erstellte Objekt zurück. Mit diesem Link k?nnen Sie das Objekt ?ndern oder l?schen. <\/p>\n
Beachten Sie auch, wie Kettenaufrufe (z. B. stage.path().moveTo(320, 330).lineTo(320, 340);<\/code>) überall in GraphicsJs enthalten sind, was dazu beitr?gt, den Code zu verkürzen. Angekettete Anrufe sollten mit Vorsicht verwendet werden. Wenn er jedoch ordnungsgem?? angewendet wird, macht er den Code kompakter und leichter zu lesen. <\/p> Lassen Sie uns diese Malvorlagen nun einem Kind ausgeben und es malen lassen. Weil sogar Kinder die folgenden Techniken beherrschen k?nnen: <\/p>\n
\n \n \n \n GraphicsJS Basic Example<\/title> \n <\/head>\n <body>
<h1><a href="http://m.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>\n<p> So sieht unser Beispiel jetzt aus. <\/p>\n<p> Nun, wir haben ein Bild von einem Highlander neben einem Kilt, der in der N?he seines Ziegelburgs mit Stroh auf dem Dach steht. Wir k?nnen sogar riskieren, zu sagen, dass dies tats?chlich ein Kunstwerk ist, das wir Urheberrecht erhalten m?chten. Lassen Sie uns dies mit Muster -Füllungen basierend auf benutzerdefiniertem Text tun: <em>\n<\/em>\n<\/p> Wie Sie sehen k?nnen, ist dies einfach: Sie erstellen eine Instanz eines Textobjekts, bilden dann ein Muster auf der Bühne und legen den Text in das Muster. <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>\n<p> Farben urheberrechtlich geschützte H?user\/GraphicsJs auf CodePen anzeigen. <\/p>\n<p> Erstellen Sie ein Puzzle -Kunstspiel in weniger als 50 Codezeilen <\/p>\n<h2> Im n?chsten Teil dieses Artikels m?chte ich Ihnen zeigen, wie Sie ein Cookie-Clicker-?hnliches Spiel mit Grafikjs in weniger als 50 Codezeilen erstellen. <\/h2>\n<p> Der Spielname lautet <\/p> \"Die Stra?en im Wind fegen\" <p>, und der Spieler spielt die Rolle eines Aasfressers und fegt die Stra?en an einem windigen Nachmittag im Herbst. Das Spiel verwendet einen Code aus dem Programm für Programm generiertes Leaf in der GraphicsJS-Galerie. <em>\n<\/em> Sie k?nnen die fertigen Spiele auf CodePen (oder das Ende des Artikels) anzeigen. <\/p>\n<p> Ebenen, Zindex und virtuelles Dom <\/p>\n<h3> Wir erstellen zuerst eine Stufe (wie bereits erw?hnt) und deklarieren dann einige anf?ngliche Variablen: <\/h3>\n<p>\n<\/p> Für dieses Spiel werden wir die Ebene verwenden - das Objekt in GraphicsJs, die zum Gruppieren von Elementen verwendet werden. Wenn Sie ?hnliche ?nderungen an Elementen (z. B. Transformationen) anwenden m?chten, müssen Sie Elemente gruppieren. Sie k?nnen die Ebene im Pause -Modus (dazu sp?ter mehr) ?ndern, was die Leistung und die Benutzererfahrung verbessern kann. <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> In dieser Demo verwenden wir die Ebenenfunktion, um uns zu helfen, die Bl?tter zusammenzuarbeiten und sie zu vermeiden, das Etikett abzudecken (es zeigt uns, wie viele Bl?tter gefegt werden). Dazu erstellen wir ein Tag und rufen die <\/p> -Methode auf, die die Bühnenbindungsschicht erstellt. Wir setzen die Eigenschaft <p> dieser Ebene auf die <code>stage.layer<\/code> -Sache unterhalb des Etiketts. <code>zIndex<\/code>\n<code>zIndex<\/code>\n<\/p> Danach k?nnen wir sicherstellen, dass sie den Text nicht überschreiben, egal wie viele Bl?tter wir in der Ebene erstellen. <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<p> konvertieren <\/p>\n<h3> Fügen wir als n?chstes eine Funktion hinzu, um unsere Bl?tter zu zeichnen. Dies verwendet die praktische GraphicsJS -Transformations -API, mit der Sie Elemente und Gruppe von Elementen bewegen, skalieren, drehen und schneiden k?nnen. Dies ist ein sehr leistungsstarkes Werkzeug in Kombination mit Ebenen und virtuellem DOM. <\/h3>\n<p>\n<\/p> Sie werden sehen, dass jeder Pfad auf die gleiche Weise erstellt wird, aber dann wird die Konvertierung durchgeführt. Dies erzeugt ein sehr sch?nes zuf?lliges Blattmuster. <pre class='brush:php;toolbar:false;'> \/\/ 169 是版權(quán)符號(hào)的字符代碼\n var text = acgraph.text().text(String.fromCharCode(169)).opacity(0.2);\n var pattern_font = stage.pattern(text.getBounds());\n pattern_font.addChild(text);\n \/\/ 用圖案填充整個(gè)圖像\n frame.fill(pattern_font);<\/pre>\n<p> Verarbeitungsereignisse <\/p>\n<h3> Jedes Objekt, Bühnen und Schicht in Grafikjs kann Ereignisse verarbeiten. Eine vollst?ndige Liste unterstützter Ereignisse finden Sie in der EventType -API. Es gibt vier besondere Ereignisse auf der Bühne, um das Rendern zu kontrollieren. <\/h3><p> In diesem Spielbeispiel verwenden wir einen Ereignish?rer, der an das Blattobjekt angeschlossen ist, damit der Benutzer, wenn er sie über sie hebt, einzeln verschwinden. Fügen Sie dazu den folgenden Code zum Ende der <code>drawLeaves<\/code> -Funktion vor der <code>return<\/code> -Anweisung: <\/p> hinzu: <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>\n<p>\n<\/p> Hier k?nnen wir auch sehen, dass wir Ebenen zur Berechnung von Bl?ttern verwenden. <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>\n<p>\n<\/p> Bitte beachten Sie, dass wir hier nicht die Anzahl der Bl?tter nicht speichern. Da wir einer bestimmten Schicht Bl?tter hinzufügen und Bl?tter von ihnen entfernen, k?nnen wir nachverfolgen, wie viele Kinderelemente wir haben (und daher, wie viele Bl?tter übrig bleiben). <p>\n<\/p> GraphicsJs bietet ein virtuelles DOM, das abstrakt, leicht und von Browser-spezifischen SVG\/VML-Implementierungen getrennt ist. Es ist sehr nützlich, um viele gro?artige Dinge wie die Verfolgung aller Objekte und Ebenen, die Anwendung von Transformationen auf Gruppen und die Optimierung des Renders mit Hilfe zu erm?glichen, den Rendering -Prozess zu verfolgen und zu steuern. <h3>\n<\/h3> Leistungsoptimierung <p>\n<\/p> Die virtuellen DOM- und Ereignishandler erm?glichen es GraphicsJS -Benutzern, das Rendering zu steuern. Aufführungsartikel k?nnen Ihnen helfen, die Beziehung zwischen diesen Inhalten zu verstehen. <p>\n<\/p> Beim Erzeugen von Bl?ttern im Spiel müssen wir das Rendering beim Hinzufügen neuer Bl?tter pausieren und das Rendering erst wieder aufnehmen, nachdem alle ?nderungen abgeschlossen sind: <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>\n<\/p> Diese Methode des Umgangs mit neuen Elementen l?sst neue Bl?tter fast sofort erscheinen. <p>\n<code>shakeTree()<\/code> Starten Sie schlie?lich alles, indem Sie <\/p> rufen. <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>\n<\/h3> Endergebnis <p>\n<\/p> Stra?enreiniger\/GraphicsJs auf CodePen anzeigen. <h2>\n<\/h2> Schlussfolgerung <p>\n<\/p> Der übergang zu HTML5 hat das Netzwerk ver?ndert. Wenn es um moderne Webanwendungen und sogar einfache Websites geht, begegnen wir h?ufig Aufgaben, die eine Bildverarbeitung erfordern. Es ist zwar unm?glich, eine L?sung zu finden, die in jedem Fall gut funktioniert, aber Sie sollten die Grafikbibliothek berücksichtigen. Es ist Open Source, robust, mit exzellenten Browserunterstützung und vielen Funktionen, die es lustig, bequem und natürlich nützlich machen. <p>\n<\/p> Ich würde gerne Ihr Feedback zu GrPhicsJs in den Kommentaren unten h?ren. Benutzt du es schon? Würden Sie in Betracht ziehen, es für ein neues Projekt zu verwenden? Ich würde gerne wissen, warum oder warum nicht. Ich schreibe auch eine Liste der wichtigsten JavaScript -Zeichnungsbibliotheken und -artikel, die alle vergleichen und vergleichen. Fühlen Sie sich frei, auf die Funktionen hinzuweisen, die Sie dort sehen m?chten.
<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://m.miracleart.cn/de/" 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="Gemeinschaft" class="head_nava head_nava-template1">Gemeinschaft</a>
<div class="377j5v51b" id="dropdown-template1" style="display: none;">
<div id="377j5v51b" class="languagechoose">
<a href="http://m.miracleart.cn/de/article.html" title="Artikel" class="languagechoosea on">Artikel</a>
<a href="http://m.miracleart.cn/de/faq/zt" title="Themen" class="languagechoosea">Themen</a>
<a href="http://m.miracleart.cn/de/wenda.html" title="Fragen und Antworten" class="languagechoosea">Fragen und Antworten</a>
</div>
</div>
</div>
<div id="377j5v51b" class="head_navs">
<a href="javascript:;" title="Lernen" class="head_nava head_nava-template1_1">Lernen</a>
<div class="377j5v51b" id="dropdown-template1_1" style="display: none;">
<div id="377j5v51b" class="languagechoose">
<a href="http://m.miracleart.cn/de/course.html" title="Kurs" class="languagechoosea on">Kurs</a>
<a href="http://m.miracleart.cn/de/dic/" title="Programmierw?rterbuch" class="languagechoosea">Programmierw?rterbuch</a>
</div>
</div>
</div>
<div id="377j5v51b" class="head_navs">
<a href="javascript:;" title="Tools-Bibliothek" class="head_nava head_nava-template1_2">Tools-Bibliothek</a>
<div class="377j5v51b" id="dropdown-template1_2" style="display: none;">
<div id="377j5v51b" class="languagechoose">
<a href="http://m.miracleart.cn/de/toolset/development-tools" title="Entwicklungswerkzeuge" class="languagechoosea on">Entwicklungswerkzeuge</a>
<a href="http://m.miracleart.cn/de/toolset/website-source-code" title="Quellcode der Website" class="languagechoosea">Quellcode der Website</a>
<a href="http://m.miracleart.cn/de/toolset/php-libraries" title="PHP-Bibliotheken" class="languagechoosea">PHP-Bibliotheken</a>
<a href="http://m.miracleart.cn/de/toolset/js-special-effects" title="JS-Spezialeffekte" class="languagechoosea on">JS-Spezialeffekte</a>
<a href="http://m.miracleart.cn/de/toolset/website-materials" title="Website-Materialien" class="languagechoosea on">Website-Materialien</a>
<a href="http://m.miracleart.cn/de/toolset/extension-plug-ins" title="Erweiterungs-Plug-Ins" class="languagechoosea on">Erweiterungs-Plug-Ins</a>
</div>
</div>
</div>
<div id="377j5v51b" class="head_navs">
<a href="http://m.miracleart.cn/de/ai" title="KI-Tools" class="head_nava head_nava-template1_3">KI-Tools</a>
</div>
<div id="377j5v51b" class="head_navs">
<a href="javascript:;" title="Freizeit" class="head_nava head_nava-template1_3">Freizeit</a>
<div class="377j5v51b" id="dropdown-template1_3" style="display: none;">
<div id="377j5v51b" class="languagechoose">
<a href="http://m.miracleart.cn/de/game" title="Spiel-Download" class="languagechoosea on">Spiel-Download</a>
<a href="http://m.miracleart.cn/de/mobile-game-tutorial/" title="Spiel-Tutorials" class="languagechoosea">Spiel-Tutorials</a>
</div>
</div>
</div>
</div>
</div>
<div id="377j5v51b" class="head_search">
<input id="key_words" onkeydown="if (event.keyCode == 13) searchs('de')" class="search-input" type="text" autocomplete="off" name="keywords" required="required" placeholder="Block,address,transaction,news" value="">
<a href="javascript:;" title="suchen" onclick="searchs('de')"><img src="/static/imghw/find.png" alt="suchen"></a>
</div>
<div id="377j5v51b" class="head_right">
<div id="377j5v51b" class="haed_language">
<a href="javascript:;" class="layui-btn haed_language_btn">Deutsch<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:setlang('ja');" 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:;" 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">Inhaltsverzeichnis</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="#Schlüsselpunkte" title=" Schlüsselpunkte " > Schlüsselpunkte </a>
</div>
<div id="377j5v51b" class="Article_Details_main1L2s ">
<a href="#Warum-grafische-Js" title=" Warum grafische Js " > Warum grafische Js </a>
</div>
<div id="377j5v51b" class="Article_Details_main1L2s ">
<a href="#GraphicsJS-Grundlagen" title=" GraphicsJS -Grundlagen " > GraphicsJS -Grundlagen </a>
</div>
<div id="377j5v51b" class="Article_Details_main1L2s ">
<a href="#Unser-erstes-Meisterwerk" title=" Unser erstes Meisterwerk " > Unser erstes Meisterwerk </a>
</div>
<div id="377j5v51b" class="Article_Details_main1L2s ">
<a href="#Füllung-Schlaganfall-und-Muster-füllen" title=" Füllung, Schlaganfall und Muster füllen " > Füllung, Schlaganfall und Muster füllen </a>
</div>
<div id="377j5v51b" class="Article_Details_main1L2s ">
<a href="#Im-n?chsten-Teil-dieses-Artikels-m?chte-ich-Ihnen-zeigen-wie-Sie-ein-Cookie-Clicker-?hnliches-Spiel-mit-Grafikjs-in-weniger-als-Codezeilen-erstellen" title=" Im n?chsten Teil dieses Artikels m?chte ich Ihnen zeigen, wie Sie ein Cookie-Clicker-?hnliches Spiel mit Grafikjs in weniger als 50 Codezeilen erstellen. " > Im n?chsten Teil dieses Artikels m?chte ich Ihnen zeigen, wie Sie ein Cookie-Clicker-?hnliches Spiel mit Grafikjs in weniger als 50 Codezeilen erstellen. </a>
</div>
<div id="377j5v51b" class="Article_Details_main1L2s ">
<a href="#Wir-erstellen-zuerst-eine-Stufe-wie-bereits-erw?hnt-und-deklarieren-dann-einige-anf?ngliche-Variablen" title=" Wir erstellen zuerst eine Stufe (wie bereits erw?hnt) und deklarieren dann einige anf?ngliche Variablen: " > Wir erstellen zuerst eine Stufe (wie bereits erw?hnt) und deklarieren dann einige anf?ngliche Variablen: </a>
</div>
<div id="377j5v51b" class="Article_Details_main1L2s ">
<a href="#Fügen-wir-als-n?chstes-eine-Funktion-hinzu-um-unsere-Bl?tter-zu-zeichnen-Dies-verwendet-die-praktische-GraphicsJS-Transformations-API-mit-der-Sie-Elemente-und-Gruppe-von-Elementen-bewegen-skalieren-drehen-und-schneiden-k?nnen-Dies-ist-ein-sehr-leistungsstarkes-Werkzeug-in-Kombination-mit-Ebenen-und-virtuellem-DOM" title=" Fügen wir als n?chstes eine Funktion hinzu, um unsere Bl?tter zu zeichnen. Dies verwendet die praktische GraphicsJS -Transformations -API, mit der Sie Elemente und Gruppe von Elementen bewegen, skalieren, drehen und schneiden k?nnen. Dies ist ein sehr leistungsstarkes Werkzeug in Kombination mit Ebenen und virtuellem DOM. " > Fügen wir als n?chstes eine Funktion hinzu, um unsere Bl?tter zu zeichnen. Dies verwendet die praktische GraphicsJS -Transformations -API, mit der Sie Elemente und Gruppe von Elementen bewegen, skalieren, drehen und schneiden k?nnen. Dies ist ein sehr leistungsstarkes Werkzeug in Kombination mit Ebenen und virtuellem DOM. </a>
</div>
<div id="377j5v51b" class="Article_Details_main1L2s ">
<a href="#Jedes-Objekt-Bühnen-und-Schicht-in-Grafikjs-kann-Ereignisse-verarbeiten-Eine-vollst?ndige-Liste-unterstützter-Ereignisse-finden-Sie-in-der-EventType-API-Es-gibt-vier-besondere-Ereignisse-auf-der-Bühne-um-das-Rendern-zu-kontrollieren" title=" Jedes Objekt, Bühnen und Schicht in Grafikjs kann Ereignisse verarbeiten. Eine vollst?ndige Liste unterstützter Ereignisse finden Sie in der EventType -API. Es gibt vier besondere Ereignisse auf der Bühne, um das Rendern zu kontrollieren. " > Jedes Objekt, Bühnen und Schicht in Grafikjs kann Ereignisse verarbeiten. Eine vollst?ndige Liste unterstützter Ereignisse finden Sie in der EventType -API. Es gibt vier besondere Ereignisse auf der Bühne, um das Rendern zu kontrollieren. </a>
</div>
<div id="377j5v51b" class="Article_Details_main1L2s ">
<a href="#Link-zum-weiteren-Lesen" title=" Link zum weiteren Lesen " > Link zum weiteren Lesen </a>
</div>
<div id="377j5v51b" class="Article_Details_main1L2s ">
<a href="#h?ufig-gestellte-Fragen-zu-GraphicsJs" title=" h?ufig gestellte Fragen zu GraphicsJs " > h?ufig gestellte Fragen zu GraphicsJs </a>
</div>
<div id="377j5v51b" class="Article_Details_main1L2s ">
<a href="#Wie-unterscheidet-sich-GraphicsJs-von-anderen-JavaScript-Grafikbibliotheken" title=" Wie unterscheidet sich GraphicsJs von anderen JavaScript -Grafikbibliotheken? " > Wie unterscheidet sich GraphicsJs von anderen JavaScript -Grafikbibliotheken? </a>
</div>
<div id="377j5v51b" class="Article_Details_main1L2s ">
<a href="#wie-ich-mit-GraphicsJs-anf?ngst" title=" wie ich mit GraphicsJs anf?ngst? " > wie ich mit GraphicsJs anf?ngst? </a>
</div>
<div id="377j5v51b" class="Article_Details_main1L2s ">
<a href="#Kann-ich-komplexe-Animationen-mit-GraphicsJs-erstellen" title=" Kann ich komplexe Animationen mit GraphicsJs erstellen? " > Kann ich komplexe Animationen mit GraphicsJs erstellen? </a>
</div>
<div id="377j5v51b" class="Article_Details_main1L2s ">
<a href="#Ist-GraphicsJs-mit-allen-Browsern-kompatibel" title=" Ist GraphicsJs mit allen Browsern kompatibel? " > Ist GraphicsJs mit allen Browsern kompatibel? </a>
</div>
<div id="377j5v51b" class="Article_Details_main1L2s ">
<a href="#Wie-erstelle-ich-Gradienten-mit-GraphicsJs" title=" Wie erstelle ich Gradienten mit GraphicsJs? " > Wie erstelle ich Gradienten mit GraphicsJs? </a>
</div>
<div id="377j5v51b" class="Article_Details_main1L2s ">
<a href="#Kann-ich-interaktive-Grafiken-mit-GraphicsJs-erstellen" title=" Kann ich interaktive Grafiken mit GraphicsJs erstellen? " > Kann ich interaktive Grafiken mit GraphicsJs erstellen? </a>
</div>
<div id="377j5v51b" class="Article_Details_main1L2s ">
<a href="#unterstützt-Grafikschichten" title=" unterstützt Grafikschichten? " > unterstützt Grafikschichten? </a>
</div>
<div id="377j5v51b" class="Article_Details_main1L2s ">
<a href="#Wie-optimieren-Sie-meine-Grafiken-mithilfe-von-Grafikjs" title=" Wie optimieren Sie meine Grafiken mithilfe von Grafikjs? " > Wie optimieren Sie meine Grafiken mithilfe von Grafikjs? </a>
</div>
<div id="377j5v51b" class="Article_Details_main1L2s ">
<a href="#Kann-ich-Diagramme-und-Grafiken-mit-GraphicsJs-erstellen" title=" Kann ich Diagramme und Grafiken mit GraphicsJs erstellen? " > Kann ich Diagramme und Grafiken mit GraphicsJs erstellen? </a>
</div>
<div id="377j5v51b" class="Article_Details_main1L2s ">
<a href="#Ist-GraphicsJs-kostenlos-zu-bedienen" title=" Ist GraphicsJs kostenlos zu bedienen? " > Ist GraphicsJs kostenlos zu bedienen? </a>
</div>
</div>
</div>
</div>
<div id="377j5v51b" class="Article_Details_main1M">
<div id="377j5v51b" class="phpgenera_Details_mainL1">
<a href="http://m.miracleart.cn/de/" title="Heim"
class="phpgenera_Details_mainL1a">Heim</a>
<img src="/static/imghw/top_right.png" alt="" />
<a href="http://m.miracleart.cn/de/web-designer.html"
class="phpgenera_Details_mainL1a">Web-Frontend</a>
<img src="/static/imghw/top_right.png" alt="" />
<a href="http://m.miracleart.cn/de/js-tutorial.html"
class="phpgenera_Details_mainL1a">js-Tutorial</a>
<img src="/static/imghw/top_right.png" alt="" />
<span>Einführung von GraphicsJs, einer leichten leichten Grafikbibliothek</span>
</div>
<div id="377j5v51b" class="Articlelist_txts">
<div id="377j5v51b" class="Articlelist_txts_info">
<h1 class="Articlelist_txts_title">Einführung von GraphicsJs, einer leichten leichten Grafikbibliothek</h1>
<div id="377j5v51b" class="Articlelist_txts_info_head">
<div id="377j5v51b" class="author_info">
<a href="http://m.miracleart.cn/de/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://m.miracleart.cn/de/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: Der Eckpfeiler moderner Netzwerke. Heutzutage sind SVG und Leinwand h?ufig die Technologie der Wahl beim Erstellen interaktiver Bilder-Flash wurde vergessen, Silverlight ist zu einem seltenen Einhorn am Rande des Netzwerks geworden, und nur wenige Menschen erinnern sich an Drittanbieter-Plugins. </p>
<p> Die Vor- und Nachteile jeder Technik sind gut dokumentiert, aber in Kurz gesagt ist SVG besser zum Erstellen und Umgang mit interaktiven Elementen geeignet. Dies liegt daran, dass SVG ein XML-basiertes Vektorformat ist, bei dem ein Bild mit dem <code><svg></svg></code> -Tag in eine Seite geladen wird, kann jedes Element in der SVG-DOM verwendet werden. </p>
<p> In diesem Artikel m?chte ich Ihnen GraphicsJs vorstellen, einer neuen und leistungsstarken Open -Source -JavaScript -Zeichnungsbibliothek basierend auf SVG (für ?ltere IE -Versionen hat sie eine VML -Alternative). Ich werde zun?chst schnell seine Grundlagen vorstellen und dann die Funktionen der Bibliothek mit zwei kurzen und wunderbaren Beispielen pr?sentieren: Das erste Beispiel geht ausschlie?lich um Kunst, und das zweite Beispiel zeigt, wie man ein einfaches in weniger als 50 Zeilen von Code -Puzzle -Kunst schreibt Spiel. </p>
<h2 id="Schlüsselpunkte"> Schlüsselpunkte </h2>
<ul>
<li> GraphicsJS ist eine neue, leistungsstarke Open -Source -JavaScript -Zeichnungsbibliothek, die auf SVG basiert und VML -Alternativen für ?ltere IE -Versionen bietet. Es ist leicht und flexibel, mit reichen Javascript -APIs. </li>
<li> von Anychart ver?ffentlicht, die Bibliothek wird seit mindestens drei Jahren in propriet?ren Produkten von Anychart wiedergegeben, was ihre Robustheit gew?hrleistet. Im Gegensatz zu JavaScript Drawing Gallery von Anychart ist GraphicsJS kostenlos für kommerzielle und gemeinnützige Projekte erh?ltlich. </li>
<li> GraphicsJS ist die Kompatibilit?t für die Cross-Browser-Kompatibilit?t und unterstützt Internet Explorer 6.0, Safari 3.0, Firefox 3.0 und Opera 9.5. Es wird in VML in ?lteren IE -Versionen und in SVG in allen anderen Browsern in SVG gerendert. </li>
<li> Diese Bibliothek erm?glicht die Kombination aus Grafik und Animation, einschlie?lich animierter Lagerfeuer, rotierenden Galaxien, Niederschlag und spielbarer 15 Puzzlespiele. Es enth?lt auch detaillierte Dokumentation und umfassende API -Referenzen. </li>
<li> Die GraphicsJS -Bibliothek kann verwendet werden, um interaktive Webanwendungen zu erstellen, einschlie?lich Ebenen, Gradienten, Mustern, Ereignisverarbeitung und Leistungsoptimierung. Es unterstützt auch komplexe Animationen und Transformationen und macht es zu einer vielseitigen Option für Entwickler. </li>
</ul>
<h2 id="Warum-grafische-Js"> Warum grafische Js </h2> ausw?hlen
<p> Es gibt viele Bibliotheken, die Entwicklern helfen, SVG zu verwenden: Rapha?l, Snap.svg und Bonsaijs, um nur einige der besten Bibliotheken zu nennen. Diese Bibliotheken haben jeweils ihre Vor- und Nachteile, aber ein gründlicher Vergleich wird Gegenstand eines anderen Artikels sein. In diesem Artikel geht es um GraphicsJs. Lassen Sie mich also erkl?ren, was er hat und was er hat. </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>
<p> Zun?chst ist GraphicsJs leicht und verfügt über eine sehr flexible JavaScript -API. Es implementiert viele reiche Textmerkmale sowie ein virtuelles DOM, das von Browser-spezifischen HTML-DOM-Implementierungen getrennt ist. </p>
<p> Zweitens handelt es sich um eine neue Open -Source -JavaScript -Bibliothek, die im vergangenen Herbst von Anychart ver?ffentlicht wurde, einem der weltweit führenden Entwickler für interaktive Datenvisualisierungssoftware. Anychart verwendet GraficsJs seit mindestens drei Jahren (seit der Ver?ffentlichung von Anychart 7.0), um Diagramme in seinen propriet?ren Produkten zu rendern, sodass GraphicsJs vollst?ndig bek?mpft werden. (Haftungsausschluss: Ich bin der F & E -Leiter bei Anychart und der Lead -Entwickler bei GraphicsJs) </p>
<p> Drittens ist im Gegensatz zu JavaScript Drawing Library von Anychart kostenlos für kommerzielle und gemeinnützige Projekte kostenlos erh?ltlich. Es ist auf GitHub unter der Apache -Lizenz verfügbar. </p>
<p> Viertens hat GraphicsJS eine Kreuzbarkeit des Cross-Browsers und unterstützt Internet Explorer 6.0, Safari 3.0, Firefox 3.0 und Opera 9.5. Es wird in VML in ?lteren IE -Versionen und in SVG in allen anderen Browsern in SVG gerendert. </p>
<p> Zuletzt k?nnen Sie Grafik -J -Js -Unternehmen perfekt kombinieren. Schauen Sie sich die Hauptgalerie an, einschlie?lich animierter Lagerfeuer, sich drehenden Galaxien, Niederschlagsmenschen, prozedural erzeugten Bl?ttern, spielbare 15 Puzzlespiele und vieles mehr. GraphicsJs enth?lt weitere Beispiele in seiner detaillierten Dokumentation und umfassenden API -Referenz. </p>
<h2 id="GraphicsJS-Grundlagen"> GraphicsJS -Grundlagen </h2>
<p> Um mit GraphicsJs zu beginnen, müssen Sie auf die Bibliothek verweisen und ein HTML-Element auf Blockebene für die Zeichnung erstellen: </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> Sie sollten dann eine Bühne erstellen und etwas darin zeichnen, z. B. einen Rechteck, einen Kreis oder eine andere Form: </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> Folgendes ist ein Beispiel auf Codepen, in dem wir noch einen Schritt weiter gehen und das Symbol für heilige Heiligtümer zeichnen. </p>
<h2 id="Unser-erstes-Meisterwerk"> Unser erstes Meisterwerk </h2>
<h3 id="Füllung-Schlaganfall-und-Muster-füllen"> Füllung, Schlaganfall und Muster füllen </h3>
<p> Jede Form oder Pfad kann mit Fülleinstellungen und Schlaganfalleinstellungen gef?rbt werden. Alles hat einen Schlaganfall (Grenze), aber nur die Form und die geschlossenen Pfade haben Polsterung. Füll- und Schlaganfalleinstellungen sind sehr reichhaltig und Sie k?nnen lineare oder kreisf?rmige Gradienten für Füllung und Schlaganfall verwenden. Zus?tzlich k?nnen die Zeilen gepunktet und das Bildfüllen mit mehreren Fliesenmodi unterstützt werden. Aber das ist alles ziemlich übliche Sachen, die Sie in fast jeder Bibliothek finden k?nnen. Was GraphicsJs besonders macht, ist die Mesh- und Muster -Füllfunktion, mit der Sie nicht nur 32 (!) Von den verfügbaren Mesh -Füllmustern direkt verwenden k?nnen, sondern Sie auch einfach benutzerdefinierte Muster aus Formen oder Text erstellen k?nnen. </p>
<p> Lassen Sie uns jetzt sehen, was genau erreicht werden kann! Ich werde eine einfache Zeichnung eines Mannes zeichnen, der in der N?he des Hauses steht, und sie mit verschiedenen Mustern und Farben füllen, um ihn zu verbessern. Lassen Sie uns zum Einfachheit halber zu einem kindlichen Kunstgem?lde machen (und versuchen Sie, keine Kunstrauheit einzubeziehen). Das war's: </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> Zeigen Sie die Ergebnisse auf CodePen an. </p>
<p> Wie Sie sehen, verwenden wir jetzt Variablen - alle Methoden zum Zeichnen von Inhalten auf der Bühne geben eine Referenz auf das erstellte Objekt zurück. Mit diesem Link k?nnen Sie das Objekt ?ndern oder l?schen. </p>
<p> Beachten Sie auch, wie Kettenaufrufe (z. B. <code>stage.path().moveTo(320, 330).lineTo(320, 340);</code>) überall in GraphicsJs enthalten sind, was dazu beitr?gt, den Code zu verkürzen. Angekettete Anrufe sollten mit Vorsicht verwendet werden. Wenn er jedoch ordnungsgem?? angewendet wird, macht er den Code kompakter und leichter zu lesen. </p><p> Lassen Sie uns diese Malvorlagen nun einem Kind ausgeben und es malen lassen. Weil sogar Kinder die folgenden Techniken beherrschen k?nnen: </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> So sieht unser Beispiel jetzt aus. </p>
<p> Nun, wir haben ein Bild von einem Highlander neben einem Kilt, der in der N?he seines Ziegelburgs mit Stroh auf dem Dach steht. Wir k?nnen sogar riskieren, zu sagen, dass dies tats?chlich ein Kunstwerk ist, das wir Urheberrecht erhalten m?chten. Lassen Sie uns dies mit Muster -Füllungen basierend auf benutzerdefiniertem Text tun: <em>
</em>
</p> Wie Sie sehen k?nnen, ist dies einfach: Sie erstellen eine Instanz eines Textobjekts, bilden dann ein Muster auf der Bühne und legen den Text in das Muster. <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> Farben urheberrechtlich geschützte H?user/GraphicsJs auf CodePen anzeigen. </p>
<p> Erstellen Sie ein Puzzle -Kunstspiel in weniger als 50 Codezeilen </p>
<h2 id="Im-n?chsten-Teil-dieses-Artikels-m?chte-ich-Ihnen-zeigen-wie-Sie-ein-Cookie-Clicker-?hnliches-Spiel-mit-Grafikjs-in-weniger-als-Codezeilen-erstellen"> Im n?chsten Teil dieses Artikels m?chte ich Ihnen zeigen, wie Sie ein Cookie-Clicker-?hnliches Spiel mit Grafikjs in weniger als 50 Codezeilen erstellen. </h2>
<p> Der Spielname lautet </p> "Die Stra?en im Wind fegen" <p>, und der Spieler spielt die Rolle eines Aasfressers und fegt die Stra?en an einem windigen Nachmittag im Herbst. Das Spiel verwendet einen Code aus dem Programm für Programm generiertes Leaf in der GraphicsJS-Galerie. <em>
</em> Sie k?nnen die fertigen Spiele auf CodePen (oder das Ende des Artikels) anzeigen. </p>
<p> Ebenen, Zindex und virtuelles Dom </p>
<h3 id="Wir-erstellen-zuerst-eine-Stufe-wie-bereits-erw?hnt-und-deklarieren-dann-einige-anf?ngliche-Variablen"> Wir erstellen zuerst eine Stufe (wie bereits erw?hnt) und deklarieren dann einige anf?ngliche Variablen: </h3>
<p>
</p> Für dieses Spiel werden wir die Ebene verwenden - das Objekt in GraphicsJs, die zum Gruppieren von Elementen verwendet werden. Wenn Sie ?hnliche ?nderungen an Elementen (z. B. Transformationen) anwenden m?chten, müssen Sie Elemente gruppieren. Sie k?nnen die Ebene im Pause -Modus (dazu sp?ter mehr) ?ndern, was die Leistung und die Benutzererfahrung verbessern kann. <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> In dieser Demo verwenden wir die Ebenenfunktion, um uns zu helfen, die Bl?tter zusammenzuarbeiten und sie zu vermeiden, das Etikett abzudecken (es zeigt uns, wie viele Bl?tter gefegt werden). Dazu erstellen wir ein Tag und rufen die </p> -Methode auf, die die Bühnenbindungsschicht erstellt. Wir setzen die Eigenschaft <p> dieser Ebene auf die <code>stage.layer</code> -Sache unterhalb des Etiketts. <code>zIndex</code>
<code>zIndex</code>
</p> Danach k?nnen wir sicherstellen, dass sie den Text nicht überschreiben, egal wie viele Bl?tter wir in der Ebene erstellen. <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> konvertieren </p>
<h3 id="Fügen-wir-als-n?chstes-eine-Funktion-hinzu-um-unsere-Bl?tter-zu-zeichnen-Dies-verwendet-die-praktische-GraphicsJS-Transformations-API-mit-der-Sie-Elemente-und-Gruppe-von-Elementen-bewegen-skalieren-drehen-und-schneiden-k?nnen-Dies-ist-ein-sehr-leistungsstarkes-Werkzeug-in-Kombination-mit-Ebenen-und-virtuellem-DOM"> Fügen wir als n?chstes eine Funktion hinzu, um unsere Bl?tter zu zeichnen. Dies verwendet die praktische GraphicsJS -Transformations -API, mit der Sie Elemente und Gruppe von Elementen bewegen, skalieren, drehen und schneiden k?nnen. Dies ist ein sehr leistungsstarkes Werkzeug in Kombination mit Ebenen und virtuellem DOM. </h3>
<p>
</p> Sie werden sehen, dass jeder Pfad auf die gleiche Weise erstellt wird, aber dann wird die Konvertierung durchgeführt. Dies erzeugt ein sehr sch?nes zuf?lliges Blattmuster. <pre class='brush:php;toolbar:false;'> // 169 是版權(quán)符號(hào)的字符代碼
var text = acgraph.text().text(String.fromCharCode(169)).opacity(0.2);
var pattern_font = stage.pattern(text.getBounds());
pattern_font.addChild(text);
// 用圖案填充整個(gè)圖像
frame.fill(pattern_font);</pre>
<p> Verarbeitungsereignisse </p>
<h3 id="Jedes-Objekt-Bühnen-und-Schicht-in-Grafikjs-kann-Ereignisse-verarbeiten-Eine-vollst?ndige-Liste-unterstützter-Ereignisse-finden-Sie-in-der-EventType-API-Es-gibt-vier-besondere-Ereignisse-auf-der-Bühne-um-das-Rendern-zu-kontrollieren"> Jedes Objekt, Bühnen und Schicht in Grafikjs kann Ereignisse verarbeiten. Eine vollst?ndige Liste unterstützter Ereignisse finden Sie in der EventType -API. Es gibt vier besondere Ereignisse auf der Bühne, um das Rendern zu kontrollieren. </h3><p> In diesem Spielbeispiel verwenden wir einen Ereignish?rer, der an das Blattobjekt angeschlossen ist, damit der Benutzer, wenn er sie über sie hebt, einzeln verschwinden. Fügen Sie dazu den folgenden Code zum Ende der <code>drawLeaves</code> -Funktion vor der <code>return</code> -Anweisung: </p> hinzu: <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> Hier k?nnen wir auch sehen, dass wir Ebenen zur Berechnung von Bl?ttern verwenden. <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> Bitte beachten Sie, dass wir hier nicht die Anzahl der Bl?tter nicht speichern. Da wir einer bestimmten Schicht Bl?tter hinzufügen und Bl?tter von ihnen entfernen, k?nnen wir nachverfolgen, wie viele Kinderelemente wir haben (und daher, wie viele Bl?tter übrig bleiben). <p>
</p> GraphicsJs bietet ein virtuelles DOM, das abstrakt, leicht und von Browser-spezifischen SVG/VML-Implementierungen getrennt ist. Es ist sehr nützlich, um viele gro?artige Dinge wie die Verfolgung aller Objekte und Ebenen, die Anwendung von Transformationen auf Gruppen und die Optimierung des Renders mit Hilfe zu erm?glichen, den Rendering -Prozess zu verfolgen und zu steuern. <h3>
</h3> Leistungsoptimierung <p>
</p> Die virtuellen DOM- und Ereignishandler erm?glichen es GraphicsJS -Benutzern, das Rendering zu steuern. Aufführungsartikel k?nnen Ihnen helfen, die Beziehung zwischen diesen Inhalten zu verstehen. <p>
</p> Beim Erzeugen von Bl?ttern im Spiel müssen wir das Rendering beim Hinzufügen neuer Bl?tter pausieren und das Rendering erst wieder aufnehmen, nachdem alle ?nderungen abgeschlossen sind: <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> Diese Methode des Umgangs mit neuen Elementen l?sst neue Bl?tter fast sofort erscheinen. <p>
<code>shakeTree()</code> Starten Sie schlie?lich alles, indem Sie </p> rufen. <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>
</h3> Endergebnis <p>
</p> Stra?enreiniger/GraphicsJs auf CodePen anzeigen. <h2>
</h2> Schlussfolgerung <p>
</p> Der übergang zu HTML5 hat das Netzwerk ver?ndert. Wenn es um moderne Webanwendungen und sogar einfache Websites geht, begegnen wir h?ufig Aufgaben, die eine Bildverarbeitung erfordern. Es ist zwar unm?glich, eine L?sung zu finden, die in jedem Fall gut funktioniert, aber Sie sollten die Grafikbibliothek berücksichtigen. Es ist Open Source, robust, mit exzellenten Browserunterstützung und vielen Funktionen, die es lustig, bequem und natürlich nützlich machen. <p>
</p> Ich würde gerne Ihr Feedback zu GrPhicsJs in den Kommentaren unten h?ren. Benutzt du es schon? Würden Sie in Betracht ziehen, es für ein neues Projekt zu verwenden? Ich würde gerne wissen, warum oder warum nicht. Ich schreibe auch eine Liste der wichtigsten JavaScript -Zeichnungsbibliotheken und -artikel, die alle vergleichen und vergleichen. Fühlen Sie sich frei, auf die Funktionen hinzuweisen, die Sie dort sehen m?chten. <h2 id="Link-zum-weiteren-Lesen"> Link zum weiteren Lesen </h2>
<ul>
<li> Allgemeine Informationen <ul>
<li> svg </li>
<li> canvas </li>
<li> SVG gegen Leinwand </li>
</ul>
</li>
<li> Bibliothek <ul>
<li> GraphicsJS </li>
<li> rapha?l </li>
<li> snap.svg </li>
<li> bonsaijs </li>
</ul>
</li>
<li> GraphicsJS <ul>
<li> GraphicsJs auf GitHub </li>
<li> GraphicsJS -Dokumentation </li>
<li> GraphicsJS API Referenz </li>
</ul>
</li>
</ul>
<h2 id="h?ufig-gestellte-Fragen-zu-GraphicsJs"> h?ufig gestellte Fragen zu GraphicsJs </h2>
<h3 id="Wie-unterscheidet-sich-GraphicsJs-von-anderen-JavaScript-Grafikbibliotheken"> Wie unterscheidet sich GraphicsJs von anderen JavaScript -Grafikbibliotheken? </h3>
<p> GraphicsJs zeichnet sich aus seiner leistungsstarken und leichten Natur aus. Es ist eine leistungsstarke Bibliothek, mit der Entwickler alle Grafiken mit hoher Pr?zision und hoher Leistung zeichnen und animieren k?nnen. Im Gegensatz zu anderen Bibliotheken bietet GraphicsJS eine umfassende Reihe von Funktionen, darunter Ebenen, Gradienten, Muster und mehr, ohne die Geschwindigkeit oder Effizienz zu beeinflussen. Es unterstützt auch alle modernen Browser und macht es zu einer vielseitigen Option für Entwickler. </p>
<h3 id="wie-ich-mit-GraphicsJs-anf?ngst"> wie ich mit GraphicsJs anf?ngst? </h3>
<p> Um mit GraphicsJs zu beginnen, müssen Sie die GraphicsJS -Bibliothek in Ihre HTML -Datei aufnehmen. Sie k?nnen die Bibliothek von der offiziellen Website herunterladen oder CDN verwenden. Sobald die Bibliothek enthalten ist, k?nnen Sie die Grafiken erstellen, indem Sie die entsprechenden Funktionen und Methoden der Bibliothek aufrufen. </p>
<h3 id="Kann-ich-komplexe-Animationen-mit-GraphicsJs-erstellen"> Kann ich komplexe Animationen mit GraphicsJs erstellen? </h3>
<p> Ja, GraphicsJs ist so konzipiert, dass komplexe Animationen problemlos verarbeitet werden. Es bietet eine Reihe von Animationsfunktionen, einschlie?lich Lockerungsfunktions-, Verz?gerungs- und Dauereinstellungen. Sie k?nnen jedes Attribut eines Diagramms wie seiner Position, Gr??e, Farbe und mehr animieren. Dies macht GraphicsJs zu einem leistungsstarken Tool zum Erstellen interaktiver und dynamischer Grafiken. </p>
<h3 id="Ist-GraphicsJs-mit-allen-Browsern-kompatibel"> Ist GraphicsJs mit allen Browsern kompatibel? </h3>
<p> GraphicsJs ist so konzipiert, dass sie mit allen modernen Browsern kompatibel ist, einschlie?lich Chrome, Firefox, Safari und Internet Explorer. Es verwendet SVG und VML zum Rendern, die sie alle unterstützen. Dies stellt sicher, dass Ihre Grafiken konsistent aussehen und auf verschiedenen Plattformen und Ger?ten gut abschneiden. </p>
<h3 id="Wie-erstelle-ich-Gradienten-mit-GraphicsJs"> Wie erstelle ich Gradienten mit GraphicsJs? </h3>
<p> Es ist einfach, Gradienten mit GraphicsJs zu erstellen. Sie k?nnen die Gradientenmethode verwenden, um lineare oder radiale Gradienten zu definieren, Farben und Positionen anzugeben und dann Gradienten auf jede Form anzuwenden. Auf diese Weise k?nnen Sie leicht farbenfrohe Grafiken erstellen. </p>
<h3 id="Kann-ich-interaktive-Grafiken-mit-GraphicsJs-erstellen"> Kann ich interaktive Grafiken mit GraphicsJs erstellen? </h3>
<p> Ja, GraphicsJs bietet eine Reihe von Funktionen zur Ereignisbearbeitung, mit denen Sie interaktive Grafiken erstellen k?nnen. Sie k?nnen einen Ereignish?rer an alle Grafiken anh?ngen, mit denen Sie auf Benutzeraktionen wie Klicks, Mausbewegungen und mehr antworten k?nnen. Dies macht GraphicsJs zu einer hervorragenden Wahl für das Erstellen interaktiver Webanwendungen. </p>
<h3 id="unterstützt-Grafikschichten"> unterstützt Grafikschichten? </h3>
<p> Ja, GraphicsJs unterstützt Ebenen und erm?glicht es Ihnen, Grafiken in separate Gruppen zu organisieren. Jede Schicht kann unabh?ngig voneinander betrieben werden, wodurch die Verwaltung komplexer Grafiken einfacher wird. Sie k?nnen auch die Sichtbarkeit und Z-Ordnung jeder Schicht steuern, wodurch die Grafik eine feink?rnige Kontrolle erm?glicht. </p>
<h3 id="Wie-optimieren-Sie-meine-Grafiken-mithilfe-von-Grafikjs"> Wie optimieren Sie meine Grafiken mithilfe von Grafikjs? </h3>
<p> GraphicsJS bietet mehrere Funktionen, mit denen Sie Ihre Grafiken optimieren k?nnen. Sie k?nnen beispielsweise die Erntemethode verwenden, um Teile der Grafiken au?erhalb eines bestimmten Bereichs zu verbergen, wodurch die Menge der erforderlichen Rendering verringert wird. Sie k?nnen auch die Cache -Methode verwenden, um die gerenderte Ausgabe der Grafiken zu speichern, wodurch die Leistung verbessert wird, wenn Sie die Grafiken h?ufig neu streichen. </p>
<h3 id="Kann-ich-Diagramme-und-Grafiken-mit-GraphicsJs-erstellen"> Kann ich Diagramme und Grafiken mit GraphicsJs erstellen? </h3>
<p> W?hrend GraphicsJS nicht speziell zum Erstellen von Diagrammen und Grafiken entwickelt wurde, erm?glichen es ihm die leistungsstarken Zeichnungs- und Animationsfunktionen, alle Arten von Grafiken, einschlie?lich Diagrammen und Grafiken, zu erstellen. Mit den Methoden der Bibliothek k?nnen Sie Linien, Kurven, Rechtecke, Kreise und mehr zeichnen, um verschiedene Diagrammtypen zu erstellen. </p>
<h3 id="Ist-GraphicsJs-kostenlos-zu-bedienen"> Ist GraphicsJs kostenlos zu bedienen? </h3>
<p> Ja, GraphicsJs ist eine kostenlose Open -Source -Bibliothek. Sie k?nnen es kostenlos in Ihrem Projekt verwenden. Die Bibliothek wird auch aktiv gepflegt, um sicherzustellen, dass sie mit den neuesten Webstandards und -technologien synchronisiert ist. </p><p>Das obige ist der detaillierte Inhalt vonEinführung von GraphicsJs, einer leichten leichten Grafikbibliothek. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!</p>
</div>
</div>
<div id="377j5v51b" class="wzconShengming_sp">
<div id="377j5v51b" class="bzsmdiv_sp">Erkl?rung dieser Website</div>
<div>Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn</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>Hei?er Artikel</h2>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottom">
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://m.miracleart.cn/de/faq/1796821119.html" title="Handbuch: Stellar Blade Dateispeicherort speichern/Datei speichern/nicht speichern" class="phpgenera_Details_mainR4_bottom_title">Handbuch: Stellar Blade Dateispeicherort speichern/Datei speichern/nicht speichern</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>4 Wochen vor</span>
<span>By DDD</span>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://m.miracleart.cn/de/faq/1796827210.html" title="Oguri Cap Build Guide | Ein hübsches Derby -Musume" class="phpgenera_Details_mainR4_bottom_title">Oguri Cap Build Guide | Ein hübsches Derby -Musume</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>2 Wochen vor</span>
<span>By Jack chen</span>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://m.miracleart.cn/de/faq/1796828723.html" title="Agnes Tachyon Build Guide | Ein hübsches Derby -Musume" class="phpgenera_Details_mainR4_bottom_title">Agnes Tachyon Build Guide | Ein hübsches Derby -Musume</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>1 Wochen vor</span>
<span>By Jack chen</span>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://m.miracleart.cn/de/faq/1796821436.html" title="Dune: Erwachen - Fortgeschrittener Planetologe Quest Walkthrough" class="phpgenera_Details_mainR4_bottom_title">Dune: Erwachen - Fortgeschrittener Planetologe Quest Walkthrough</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>3 Wochen vor</span>
<span>By Jack chen</span>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://m.miracleart.cn/de/faq/1796821278.html" title="Datum alles: Dirk und Harper Relationship Guide" class="phpgenera_Details_mainR4_bottom_title">Datum alles: Dirk und Harper Relationship Guide</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>4 Wochen vor</span>
<span>By Jack chen</span>
</div>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR3_more">
<a href="http://m.miracleart.cn/de/article.html">Mehr anzeigen</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>Hei?e KI -Werkzeuge</h2>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR3_bottom">
<div id="377j5v51b" class="phpmain_tab2_mids_top">
<a href="http://m.miracleart.cn/de/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://m.miracleart.cn/de/ai/undress-ai-tool" title="Undress AI Tool" class="phpmain_tab2_mids_title">
<h3>Undress AI Tool</h3>
</a>
<p>Ausziehbilder kostenlos</p>
</div>
</div>
<div id="377j5v51b" class="phpmain_tab2_mids_top">
<a href="http://m.miracleart.cn/de/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://m.miracleart.cn/de/ai/undresserai-undress" title="Undresser.AI Undress" class="phpmain_tab2_mids_title">
<h3>Undresser.AI Undress</h3>
</a>
<p>KI-gestützte App zum Erstellen realistischer Aktfotos</p>
</div>
</div>
<div id="377j5v51b" class="phpmain_tab2_mids_top">
<a href="http://m.miracleart.cn/de/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://m.miracleart.cn/de/ai/ai-clothes-remover" title="AI Clothes Remover" class="phpmain_tab2_mids_title">
<h3>AI Clothes Remover</h3>
</a>
<p>Online-KI-Tool zum Entfernen von Kleidung aus Fotos.</p>
</div>
</div>
<div id="377j5v51b" class="phpmain_tab2_mids_top">
<a href="http://m.miracleart.cn/de/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://m.miracleart.cn/de/ai/clothoffio" title="Clothoff.io" class="phpmain_tab2_mids_title">
<h3>Clothoff.io</h3>
</a>
<p>KI-Kleiderentferner</p>
</div>
</div>
<div id="377j5v51b" class="phpmain_tab2_mids_top">
<a href="http://m.miracleart.cn/de/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://m.miracleart.cn/de/ai/video-swap" title="Video Face Swap" class="phpmain_tab2_mids_title">
<h3>Video Face Swap</h3>
</a>
<p>Tauschen Sie Gesichter in jedem Video mühelos mit unserem v?llig kostenlosen KI-Gesichtstausch-Tool aus!</p>
</div>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR3_more">
<a href="http://m.miracleart.cn/de/ai">Mehr anzeigen</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>Hei?er Artikel</h2>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottom">
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://m.miracleart.cn/de/faq/1796821119.html" title="Handbuch: Stellar Blade Dateispeicherort speichern/Datei speichern/nicht speichern" class="phpgenera_Details_mainR4_bottom_title">Handbuch: Stellar Blade Dateispeicherort speichern/Datei speichern/nicht speichern</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>4 Wochen vor</span>
<span>By DDD</span>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://m.miracleart.cn/de/faq/1796827210.html" title="Oguri Cap Build Guide | Ein hübsches Derby -Musume" class="phpgenera_Details_mainR4_bottom_title">Oguri Cap Build Guide | Ein hübsches Derby -Musume</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>2 Wochen vor</span>
<span>By Jack chen</span>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://m.miracleart.cn/de/faq/1796828723.html" title="Agnes Tachyon Build Guide | Ein hübsches Derby -Musume" class="phpgenera_Details_mainR4_bottom_title">Agnes Tachyon Build Guide | Ein hübsches Derby -Musume</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>1 Wochen vor</span>
<span>By Jack chen</span>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://m.miracleart.cn/de/faq/1796821436.html" title="Dune: Erwachen - Fortgeschrittener Planetologe Quest Walkthrough" class="phpgenera_Details_mainR4_bottom_title">Dune: Erwachen - Fortgeschrittener Planetologe Quest Walkthrough</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>3 Wochen vor</span>
<span>By Jack chen</span>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://m.miracleart.cn/de/faq/1796821278.html" title="Datum alles: Dirk und Harper Relationship Guide" class="phpgenera_Details_mainR4_bottom_title">Datum alles: Dirk und Harper Relationship Guide</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>4 Wochen vor</span>
<span>By Jack chen</span>
</div>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR3_more">
<a href="http://m.miracleart.cn/de/article.html">Mehr anzeigen</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>Hei?e Werkzeuge</h2>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR3_bottom">
<div id="377j5v51b" class="phpmain_tab2_mids_top">
<a href="http://m.miracleart.cn/de/toolset/development-tools/92" title="Notepad++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="Notepad++7.3.1" />
</a>
<div id="377j5v51b" class="phpmain_tab2_mids_info">
<a href="http://m.miracleart.cn/de/toolset/development-tools/92" title="Notepad++7.3.1" class="phpmain_tab2_mids_title">
<h3>Notepad++7.3.1</h3>
</a>
<p>Einfach zu bedienender und kostenloser Code-Editor</p>
</div>
</div>
<div id="377j5v51b" class="phpmain_tab2_mids_top">
<a href="http://m.miracleart.cn/de/toolset/development-tools/93" title="SublimeText3 chinesische Version" 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 chinesische Version" />
</a>
<div id="377j5v51b" class="phpmain_tab2_mids_info">
<a href="http://m.miracleart.cn/de/toolset/development-tools/93" title="SublimeText3 chinesische Version" class="phpmain_tab2_mids_title">
<h3>SublimeText3 chinesische Version</h3>
</a>
<p>Chinesische Version, sehr einfach zu bedienen</p>
</div>
</div>
<div id="377j5v51b" class="phpmain_tab2_mids_top">
<a href="http://m.miracleart.cn/de/toolset/development-tools/121" title="Senden Sie Studio 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="Senden Sie Studio 13.0.1" />
</a>
<div id="377j5v51b" class="phpmain_tab2_mids_info">
<a href="http://m.miracleart.cn/de/toolset/development-tools/121" title="Senden Sie Studio 13.0.1" class="phpmain_tab2_mids_title">
<h3>Senden Sie Studio 13.0.1</h3>
</a>
<p>Leistungsstarke integrierte PHP-Entwicklungsumgebung</p>
</div>
</div>
<div id="377j5v51b" class="phpmain_tab2_mids_top">
<a href="http://m.miracleart.cn/de/toolset/development-tools/469" title="Dreamweaver 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="Dreamweaver CS6" />
</a>
<div id="377j5v51b" class="phpmain_tab2_mids_info">
<a href="http://m.miracleart.cn/de/toolset/development-tools/469" title="Dreamweaver CS6" class="phpmain_tab2_mids_title">
<h3>Dreamweaver CS6</h3>
</a>
<p>Visuelle Webentwicklungstools</p>
</div>
</div>
<div id="377j5v51b" class="phpmain_tab2_mids_top">
<a href="http://m.miracleart.cn/de/toolset/development-tools/500" title="SublimeText3 Mac-Version" 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-Version" />
</a>
<div id="377j5v51b" class="phpmain_tab2_mids_info">
<a href="http://m.miracleart.cn/de/toolset/development-tools/500" title="SublimeText3 Mac-Version" class="phpmain_tab2_mids_title">
<h3>SublimeText3 Mac-Version</h3>
</a>
<p>Codebearbeitungssoftware auf Gottesniveau (SublimeText3)</p>
</div>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR3_more">
<a href="http://m.miracleart.cn/de/ai">Mehr anzeigen</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>Hei?e Themen</h2>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottom">
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://m.miracleart.cn/de/faq/gmailyxdlrkzn" title="Wo ist der Login-Zugang für Gmail-E-Mail?" class="phpgenera_Details_mainR4_bottom_title">Wo ist der Login-Zugang für Gmail-E-Mail?</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>8637</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://m.miracleart.cn/de/faq/java-tutorial" title="Java-Tutorial" class="phpgenera_Details_mainR4_bottom_title">Java-Tutorial</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>1783</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://m.miracleart.cn/de/faq/cakephp-tutor" title="CakePHP-Tutorial" class="phpgenera_Details_mainR4_bottom_title">CakePHP-Tutorial</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>1727</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://m.miracleart.cn/de/faq/laravel-tutori" title="Laravel-Tutorial" class="phpgenera_Details_mainR4_bottom_title">Laravel-Tutorial</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>1577</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://m.miracleart.cn/de/faq/php-tutorial" title="PHP-Tutorial" class="phpgenera_Details_mainR4_bottom_title">PHP-Tutorial</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>1442</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://m.miracleart.cn/de/faq/zt">Mehr anzeigen</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://m.miracleart.cn/de/faq/1796822063.html" title="Java vs. JavaScript: Die Verwirrung beseitigen" 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: Die Verwirrung beseitigen" />
</a>
<a href="http://m.miracleart.cn/de/faq/1796822063.html" title="Java vs. JavaScript: Die Verwirrung beseitigen" class="phphistorical_Version2_mids_title">Java vs. JavaScript: Die Verwirrung beseitigen</a>
<span id="377j5v51b" class="Articlelist_txts_time">Jun 20, 2025 am 12:27 AM</span>
<p class="Articlelist_txts_p">Java und JavaScript sind unterschiedliche Programmiersprachen, die jeweils für verschiedene Anwendungsszenarien geeignet sind. Java wird für die Entwicklung gro?er Unternehmen und mobiler Anwendungen verwendet, w?hrend JavaScript haupts?chlich für die Entwicklung von Webseiten verwendet wird.</p>
</div>
<div id="377j5v51b" class="phphistorical_Version2_mids">
<a href="http://m.miracleart.cn/de/faq/1796821632.html" title="JavaScript -Kommentare: Kurzer Erl?uterung" 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 -Kommentare: Kurzer Erl?uterung" />
</a>
<a href="http://m.miracleart.cn/de/faq/1796821632.html" title="JavaScript -Kommentare: Kurzer Erl?uterung" class="phphistorical_Version2_mids_title">JavaScript -Kommentare: Kurzer Erl?uterung</a>
<span id="377j5v51b" class="Articlelist_txts_time">Jun 19, 2025 am 12:40 AM</span>
<p class="Articlelist_txts_p">JavaScriptComents AreseessentialFormaintaining, Lesen und GuidingCodeexexecution.1) einzelne Linecommments Arequickickexplanationen.2) Multi-LindexplainComproxlogicorProvedetailedDocumentation.3) InlinecommentsclarifyspecificPartsosensofCode.BestPracticic</p>
</div>
<div id="377j5v51b" class="phphistorical_Version2_mids">
<a href="http://m.miracleart.cn/de/faq/1796827639.html" title="Wie arbeite man mit Daten und Zeiten in 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/175130445135407.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Wie arbeite man mit Daten und Zeiten in JS?" />
</a>
<a href="http://m.miracleart.cn/de/faq/1796827639.html" title="Wie arbeite man mit Daten und Zeiten in JS?" class="phphistorical_Version2_mids_title">Wie arbeite man mit Daten und Zeiten in JS?</a>
<span id="377j5v51b" class="Articlelist_txts_time">Jul 01, 2025 am 01:27 AM</span>
<p class="Articlelist_txts_p">Die folgenden Punkte sollten bei der Verarbeitung von Daten und Zeiten in JavaScript festgestellt werden: 1. Es gibt viele M?glichkeiten, Datumsobjekte zu erstellen. Es wird empfohlen, ISO -Format -Zeichenfolgen zu verwenden, um die Kompatibilit?t sicherzustellen. 2. Die Zeitinformationen erhalten und festlegen k?nnen und setzen Sie Methoden fest, und beachten Sie, dass der Monat mit 0 beginnt. 3. Die manuell formatierende Daten sind Zeichenfolgen erforderlich, und auch Bibliotheken von Drittanbietern k?nnen verwendet werden. 4. Es wird empfohlen, Bibliotheken zu verwenden, die Zeitzonen wie Luxon unterstützen. Das Beherrschen dieser wichtigen Punkte kann h?ufige Fehler effektiv vermeiden.</p>
</div>
<div id="377j5v51b" class="phphistorical_Version2_mids">
<a href="http://m.miracleart.cn/de/faq/1796828200.html" title="Warum sollten Sie Tags am Ende des platzieren?" 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/175139053194540.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Warum sollten Sie Tags am Ende des platzieren?" />
</a>
<a href="http://m.miracleart.cn/de/faq/1796828200.html" title="Warum sollten Sie Tags am Ende des platzieren?" class="phphistorical_Version2_mids_title">Warum sollten Sie Tags am Ende des platzieren?</a>
<span id="377j5v51b" class="Articlelist_txts_time">Jul 02, 2025 am 01:22 AM</span>
<p class="Articlelist_txts_p">PlatztagsattheBottomofabogpostorwebpageServeSpracticalPurposesforseo, Usexperience und design.1ithelpswithseobyallowingEnginestoaccessKeyword-relevantTagswithoutClutteringHemainContent.2.</p>
</div>
<div id="377j5v51b" class="phphistorical_Version2_mids">
<a href="http://m.miracleart.cn/de/faq/1796822037.html" title="JavaScript vs. Java: Ein umfassender Vergleich für Entwickler" 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: Ein umfassender Vergleich für Entwickler" />
</a>
<a href="http://m.miracleart.cn/de/faq/1796822037.html" title="JavaScript vs. Java: Ein umfassender Vergleich für Entwickler" class="phphistorical_Version2_mids_title">JavaScript vs. Java: Ein umfassender Vergleich für Entwickler</a>
<span id="377j5v51b" class="Articlelist_txts_time">Jun 20, 2025 am 12:21 AM</span>
<p class="Articlelist_txts_p">JavaScriptispreferredforwebdevelopment,whileJavaisbetterforlarge-scalebackendsystemsandAndroidapps.1)JavaScriptexcelsincreatinginteractivewebexperienceswithitsdynamicnatureandDOMmanipulation.2)Javaoffersstrongtypingandobject-orientedfeatures,idealfor</p>
</div>
<div id="377j5v51b" class="phphistorical_Version2_mids">
<a href="http://m.miracleart.cn/de/faq/1796822137.html" title="JavaScript: Datentypen zur effizienten Codierung untersuchen" 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/175035157160537.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="JavaScript: Datentypen zur effizienten Codierung untersuchen" />
</a>
<a href="http://m.miracleart.cn/de/faq/1796822137.html" title="JavaScript: Datentypen zur effizienten Codierung untersuchen" class="phphistorical_Version2_mids_title">JavaScript: Datentypen zur effizienten Codierung untersuchen</a>
<span id="377j5v51b" class="Articlelist_txts_time">Jun 20, 2025 am 12:46 AM</span>
<p class="Articlelist_txts_p">JavaScripthassevenfundamentaldatatypes:number,string,boolean,undefined,null,object,andsymbol.1)Numbersuseadouble-precisionformat,usefulforwidevaluerangesbutbecautiouswithfloating-pointarithmetic.2)Stringsareimmutable,useefficientconcatenationmethodsf</p>
</div>
<div id="377j5v51b" class="phphistorical_Version2_mids">
<a href="http://m.miracleart.cn/de/faq/1796828191.html" title="Was sprudelt und f?ngt Ereignis im Dom?" 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/175139034116786.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Was sprudelt und f?ngt Ereignis im Dom?" />
</a>
<a href="http://m.miracleart.cn/de/faq/1796828191.html" title="Was sprudelt und f?ngt Ereignis im Dom?" class="phphistorical_Version2_mids_title">Was sprudelt und f?ngt Ereignis im Dom?</a>
<span id="377j5v51b" class="Articlelist_txts_time">Jul 02, 2025 am 01:19 AM</span>
<p class="Articlelist_txts_p">Ereigniserfassung und Blase sind zwei Phasen der Ereignisausbreitung in DOM. Die Erfassung erfolgt von der oberen Schicht bis zum Zielelement, und die Blase ist vom Zielelement bis zur oberen Schicht. 1. Die Ereigniserfassung wird implementiert, indem der UseCapture -Parameter von AddEventListener auf true festgelegt wird. 2. Ereignisblase ist das Standardverhalten, Uscapture ist auf false oder weggelassen. 3. Die Ereignisausbreitung kann verwendet werden, um die Ereignisausbreitung zu verhindern. 4. Event Bubbling unterstützt die Ereignisdelegation, um die Effizienz der dynamischen Inhaltsverarbeitung zu verbessern. 5. Capture kann verwendet werden, um Ereignisse im Voraus abzufangen, wie z. B. Protokollierung oder Fehlerverarbeitung. Das Verst?ndnis dieser beiden Phasen hilft dabei, das Timing und die Reaktion von JavaScript auf Benutzeroperationen genau zu steuern.</p>
</div>
<div id="377j5v51b" class="phphistorical_Version2_mids">
<a href="http://m.miracleart.cn/de/faq/1796820615.html" title="Was ist der Unterschied zwischen Java und 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/175012302052703.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Was ist der Unterschied zwischen Java und JavaScript?" />
</a>
<a href="http://m.miracleart.cn/de/faq/1796820615.html" title="Was ist der Unterschied zwischen Java und JavaScript?" class="phphistorical_Version2_mids_title">Was ist der Unterschied zwischen Java und JavaScript?</a>
<span id="377j5v51b" class="Articlelist_txts_time">Jun 17, 2025 am 09:17 AM</span>
<p class="Articlelist_txts_p">Java und JavaScript sind verschiedene Programmiersprachen. 1.Java ist eine statisch typisierte und kompilierte Sprache, die für Unternehmensanwendungen und gro?e Systeme geeignet ist. 2. JavaScript ist ein dynamischer Typ und eine interpretierte Sprache, die haupts?chlich für die Webinteraktion und die Front-End-Entwicklung verwendet wird.</p>
</div>
</div>
<a href="http://m.miracleart.cn/de/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>Online-PHP-Schulung für das Gemeinwohl，Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln！</p>
</div>
<div id="377j5v51b" class="footermid">
<a href="http://m.miracleart.cn/de/about/us.html">über uns</a>
<a href="http://m.miracleart.cn/de/about/disclaimer.html">Haftungsausschluss</a>
<a href="http://m.miracleart.cn/de/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://m.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="zpz5o" class="pl_css_ganrao" style="display: none;"><nobr id="zpz5o"></nobr><rp id="zpz5o"></rp><menuitem id="zpz5o"></menuitem><dfn id="zpz5o"><button id="zpz5o"><strong id="zpz5o"></strong></button></dfn><strong id="zpz5o"><ol id="zpz5o"><form id="zpz5o"><em id="zpz5o"></em></form></ol></strong><button id="zpz5o"></button><thead id="zpz5o"></thead><tfoot id="zpz5o"></tfoot><source id="zpz5o"></source><var id="zpz5o"></var><optgroup id="zpz5o"><strike id="zpz5o"><tbody id="zpz5o"></tbody></strike></optgroup><em id="zpz5o"><tt id="zpz5o"><strong id="zpz5o"><acronym id="zpz5o"></acronym></strong></tt></em><small id="zpz5o"></small><pre id="zpz5o"><dfn id="zpz5o"></dfn></pre><table id="zpz5o"><p id="zpz5o"><big id="zpz5o"><progress id="zpz5o"></progress></big></p></table><abbr id="zpz5o"></abbr><object id="zpz5o"><big id="zpz5o"></big></object><strike id="zpz5o"></strike><strike id="zpz5o"></strike><meter id="zpz5o"><menuitem id="zpz5o"></menuitem></meter><em id="zpz5o"><nav id="zpz5o"><p id="zpz5o"></p></nav></em><sub id="zpz5o"></sub><font id="zpz5o"><li id="zpz5o"><code id="zpz5o"></code></li></font><abbr id="zpz5o"></abbr><dl id="zpz5o"></dl><strong id="zpz5o"></strong><rt id="zpz5o"><source id="zpz5o"></source></rt><strike id="zpz5o"><pre id="zpz5o"></pre></strike><ruby id="zpz5o"><nobr id="zpz5o"><legend id="zpz5o"></legend></nobr></ruby><ul id="zpz5o"><kbd id="zpz5o"><strong id="zpz5o"><td id="zpz5o"></td></strong></kbd></ul><samp id="zpz5o"><nobr id="zpz5o"><label id="zpz5o"></label></nobr></samp><mark id="zpz5o"><noframes id="zpz5o"><p id="zpz5o"><strike id="zpz5o"></strike></p></noframes></mark><pre id="zpz5o"><delect id="zpz5o"><listing id="zpz5o"><dfn id="zpz5o"></dfn></listing></delect></pre><ruby id="zpz5o"><delect id="zpz5o"><listing id="zpz5o"></listing></delect></ruby><ins id="zpz5o"></ins><progress id="zpz5o"><optgroup id="zpz5o"><fieldset id="zpz5o"><i id="zpz5o"></i></fieldset></optgroup></progress><em id="zpz5o"></em><nav id="zpz5o"></nav><tfoot id="zpz5o"><tbody id="zpz5o"></tbody></tfoot><kbd id="zpz5o"></kbd><small id="zpz5o"></small><tr id="zpz5o"></tr><dd id="zpz5o"><ruby id="zpz5o"><menu id="zpz5o"><input id="zpz5o"></input></menu></ruby></dd><form id="zpz5o"></form><center id="zpz5o"></center><div id="zpz5o"></div><nobr id="zpz5o"></nobr><dfn id="zpz5o"><var id="zpz5o"><wbr id="zpz5o"></wbr></var></dfn><thead id="zpz5o"><small id="zpz5o"><strong id="zpz5o"></strong></small></thead><ol id="zpz5o"><xmp id="zpz5o"><ul id="zpz5o"><th id="zpz5o"></th></ul></xmp></ol><rt id="zpz5o"></rt><small id="zpz5o"></small><delect id="zpz5o"><listing id="zpz5o"></listing></delect><td id="zpz5o"><ins id="zpz5o"><output id="zpz5o"><nav id="zpz5o"></nav></output></ins></td><object id="zpz5o"></object><small id="zpz5o"><form id="zpz5o"><acronym id="zpz5o"></acronym></form></small><td id="zpz5o"><center id="zpz5o"></center></td><delect id="zpz5o"><listing id="zpz5o"></listing></delect><form id="zpz5o"></form><strike id="zpz5o"></strike><center id="zpz5o"></center><legend id="zpz5o"><dfn id="zpz5o"><acronym id="zpz5o"><strong id="zpz5o"></strong></acronym></dfn></legend><pre id="zpz5o"></pre><rt id="zpz5o"></rt><abbr id="zpz5o"><table id="zpz5o"></table></abbr><legend id="zpz5o"></legend><menuitem id="zpz5o"></menuitem><ins id="zpz5o"></ins><wbr id="zpz5o"><blockquote id="zpz5o"><video id="zpz5o"><tr id="zpz5o"></tr></video></blockquote></wbr><rt id="zpz5o"></rt><dl id="zpz5o"><legend id="zpz5o"><dfn id="zpz5o"></dfn></legend></dl><pre id="zpz5o"><span id="zpz5o"></span></pre><div id="zpz5o"><acronym id="zpz5o"></acronym></div><div id="zpz5o"></div><tt id="zpz5o"><bdo id="zpz5o"><dl id="zpz5o"><pre id="zpz5o"></pre></dl></bdo></tt><em id="zpz5o"><legend id="zpz5o"><menu id="zpz5o"></menu></legend></em><output id="zpz5o"><th id="zpz5o"><rt id="zpz5o"></rt></th></output><meter id="zpz5o"></meter><big id="zpz5o"><center id="zpz5o"><output id="zpz5o"></output></center></big><i id="zpz5o"></i><kbd id="zpz5o"><tr id="zpz5o"><var id="zpz5o"></var></tr></kbd><cite id="zpz5o"></cite><acronym id="zpz5o"></acronym><acronym id="zpz5o"><sub id="zpz5o"><nobr id="zpz5o"></nobr></sub></acronym><output id="zpz5o"></output><tr id="zpz5o"><abbr id="zpz5o"></abbr></tr><center id="zpz5o"></center><pre id="zpz5o"></pre><xmp id="zpz5o"><span id="zpz5o"><kbd id="zpz5o"></kbd></span></xmp><i id="zpz5o"><legend id="zpz5o"></legend></i><acronym id="zpz5o"></acronym><optgroup id="zpz5o"></optgroup><listing id="zpz5o"><rt id="zpz5o"><source id="zpz5o"><ins id="zpz5o"></ins></source></rt></listing><abbr id="zpz5o"><table id="zpz5o"></table></abbr><source id="zpz5o"></source><table id="zpz5o"><thead id="zpz5o"><tr id="zpz5o"></tr></thead></table><bdo id="zpz5o"><dl id="zpz5o"></dl></bdo><blockquote id="zpz5o"><video id="zpz5o"></video></blockquote><button id="zpz5o"></button><form id="zpz5o"><tbody id="zpz5o"><abbr id="zpz5o"></abbr></tbody></form></div>
</html>