Vous devez ensuite créer une étape et dessiner quelque chose dedans, comme un rectangle, un cercle ou une autre forme: <\/p>\n
\/\/ 創(chuàng)建舞臺(tái)\n var stage = acgraph.create('stage-container');\n \/\/ 繪制矩形\n var stage.rect(25, 50, 350, 300);<\/pre>\n Ce qui suit est un exemple sur Codepen où nous allons plus loin et dessinons le symbole des reliques de la mort. <\/p>\n
Notre premier chef-d'?uvre <\/h2>\n Remplir, tracer et modèle de modèle <\/h3>\n
Toute forme ou chemin peut être coloré à l'aide de paramètres de remplissage et de paramètres de course. Tout a un coup (bordure), mais seule la forme et les chemins fermés ont un rembourrage. Les réglages de remplissage et de course sont très riches et vous pouvez utiliser des gradients linéaires ou circulaires pour le remplissage et la course. De plus, les lignes peuvent être pointillées et de support l'image se remplit de plusieurs modes de carreaux. Mais ce sont toutes des choses assez standard que vous pouvez trouver dans presque toutes les bibliothèques. Ce qui rend GraphicsJS spécial, c'est sa fonction de remplissage de maillage et de modèle, qui non seulement vous permet d'utiliser directement 32 (!) Des modèles de remplissage de maillage disponibles directement, mais vous permet également de créer facilement des modèles personnalisés en formes ou en texte. <\/p>\n
Maintenant, voyons ce qui peut être réalisé exactement! Je vais dessiner un dessin simple d'un homme debout près de la maison et le remplir avec différents motifs et couleurs pour l'améliorer. Pour plus de simplicité, faisons-en une peinture d'art enfantine (et essayez de ne pas impliquer la rugosité de l'art). C'est tout: <\/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 Affichez les résultats sur Codepen. <\/p>\n
Comme vous pouvez le voir, nous utilisons maintenant des variables - toutes les méthodes de dessin de contenu sur l'étape renvoient une référence à l'objet créé et ce lien peut être utilisé pour modifier ou supprimer l'objet. <\/p>\n
Notez également comment les appels de cha?ne (par exemple stage.path().moveTo(320, 330).lineTo(320, 340);<\/code>) sont partout dans GraphicsJS, ce qui aide à raccourcir le code. Les appels encha?nés doivent être utilisés avec prudence, mais s'il est appliqué correctement, il rend le code plus compact et plus facile à lire. <\/p> Maintenant, remettez cette page à colorier à un enfant et laissez-les peindre. Parce que même les enfants peuvent ma?triser les techniques suivantes: <\/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> C'est à quoi ressemble notre exemple maintenant. <\/p>\n<p> Maintenant, nous avons une photo d'un Highlander debout à c?té d'un kilt, debout près de son chateau de briques avec de la paille sur le toit. Nous pouvons même risquer de dire qu'il s'agit en effet d'une ?uvre d'art que nous voulons obtenir le droit d'auteur. Faisons cela en utilisant des remplissages de motifs en fonction du texte personnalisé: <em>\n<\/em>\n<\/p> Comme vous pouvez le voir, cela est facile à faire: vous créez une instance d'un objet texte, puis formez un motif sur la scène et placez le texte dans le motif. <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> Afficher la couleur des maisons protégées par les droits d'auteur \/ graphicsjs sur Codepen. <\/p>\n<p> Créer un jeu d'art de puzzle en moins de 50 lignes de code <\/p>\n<h2> Dans la prochaine partie de cet article, je veux vous montrer comment créer un jeu de type Cookie Clicker en utilisant GraphicsJS en moins de 50 lignes de code. <\/h2>\n<p> Le nom de jeu est <\/p> \"balayer les rues dans le vent\" <p>, et le joueur joue le r?le d'un charognard et balaie les rues un après-midi venteux en automne. Le jeu utilise du code de l'exemple de feuille généré par le programme dans la galerie GraphicsJS. <em>\n<\/em> Vous pouvez afficher les jeux finis sur Codepen (ou la fin de l'article). <\/p>\n<p> Couches, zindex et Dom virtuel <\/p>\n<h3> Nous créons d'abord une étape (comme mentionné précédemment), puis déclarons quelques variables initiales: <\/h3>\n<p>\n<\/p> Pour ce jeu, nous utiliserons la couche - l'objet dans GraphicsJS utilisé pour regrouper les éléments. Si vous souhaitez appliquer des changements similaires aux éléments (tels que les transformations), vous devez regrouper les éléments. Vous pouvez modifier la couche en mode pause (plus à ce sujet plus tard), ce qui peut améliorer les performances et l'expérience utilisateur. <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> Dans cette démo, nous utilisons la fonction de couche pour nous aider à regrouper les feuilles et à les éviter de couvrir l'étiquette (il nous indique combien de feuilles sont balayées). Pour ce faire, nous créons une balise et appelons la méthode <\/p>, qui crée la couche de liaison de scène. Nous définissons la propriété <p> de cette couche sur la propriété <code>stage.layer<\/code> sous l'étiquette. <code>zIndex<\/code>\n<code>zIndex<\/code>\n<\/p> Après cela, nous pouvons nous assurer qu'ils ne remplacent pas le texte, peu importe le nombre de feuilles que nous créons dans la couche. <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> converti <\/p>\n<h3> Ensuite, ajoutons une fonction pour dessiner nos feuilles. Cela utilise l'API de transformation GraphicsJS pratique, qui vous permet de déplacer, d'échec, de rotation et de coupe des éléments et du groupe d'éléments. Il s'agit d'un outil très puissant lorsqu'il est combiné avec des couches et un DOM virtuel. <\/h3>\n<p>\n<\/p> Vous verrez que chaque chemin est créé de la même manière, mais la conversion sera effectuée. Cela produira un très beau motif de feuilles aléatoires. <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> événements de traitement <\/p>\n<h3> Tout objet, étape et calque dans GraphicsJS peut gérer les événements. Une liste complète des événements pris en charge peut être trouvé dans l'API EventType. Il y a quatre événements spéciaux sur scène pour contr?ler le rendu. <\/h3><p> Dans cet exemple de jeu, nous utilisons un écouteur d'événements attaché à l'objet Leaf de sorte que lorsque l'utilisateur plane sur eux, ils disparaissent un par un. Pour ce faire, ajoutez le code suivant au bas de la fonction <code>drawLeaves<\/code>, avant l'instruction <code>return<\/code>: <\/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>\n<p> Ici, nous pouvons également voir que nous utilisons des couches pour calculer les feuilles. <\/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>\n<p> Veuillez noter que nous ne stockons pas réellement le nombre de feuilles ici. Puisque nous ajoutons des feuilles à une couche spécifique et en retirons les feuilles, cela nous permet de suivre le nombre d'éléments enfants que nous avons (et donc combien de feuilles reste). <\/p>\n<p> GraphicsJS fournit un DOM virtuel qui est une implémentation SVG \/ VML spécifique au navigateur. Il est très utile pour faire beaucoup de grandes choses comme suivre tous les objets et les couches, appliquer des transformations aux groupes et optimiser le rendu avec aide nous permet de suivre et de contr?ler le processus de rendu. <\/p>\n<h3> Optimisation des performances <\/h3>\n<p> Les gestionnaires de DOM et d'événements virtuels permettent aux utilisateurs de GraphicsJS de contr?ler le rendu. Les articles de performance peuvent vous aider à comprendre la relation entre ces contenus. <\/p>\n<p> Lors de la génération de feuilles dans le jeu, nous devons mettre en pause le rendu lors de l'ajout de nouvelles feuilles, et reprendre le rendu après toutes les modifications terminées: <\/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> Cette méthode de traitement de nouveaux éléments fait appara?tre de nouvelles feuilles presque immédiatement. <\/p>\n<p> Enfin, commencez tout en appelant <code>shakeTree()<\/code>. <\/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>\n<h3> Résultat final <\/h3>\n<p> Afficher le nettoyant de rue \/ graphicsjs sur Codepen. <\/p>\n<h2> Conclusion <\/h2>\n<p> La transition vers HTML5 a changé le réseau. En ce qui concerne les applications Web modernes et même les sites Web simples, nous rencontrons souvent des taches qui nécessitent un traitement d'image. S'il est impossible de trouver une solution qui fonctionne bien dans tous les cas, vous devriez considérer la bibliothèque GraphicsJS. Il est open source, robuste, avec un excellent support de navigateur et de nombreuses fonctionnalités qui le rendent amusant, pratique et bien s?r utile. <\/p>\n<p> J'aimerais entendre vos commentaires sur les GrpHicsJ dans les commentaires ci-dessous. L'utilisez-vous déjà? Envisageriez-vous de l'utiliser pour un nouveau projet? J'adorerais savoir pourquoi ou pourquoi ne pas l'utiliser. J'écris également une liste de grandes bibliothèques et articles de dessin JavaScript qui les compareront et les compareront tous. N'hésitez pas à souligner les fonctionnalités que vous souhaitez y voir. <\/p>\n<h2> lien pour la lecture complémentaire <\/h2>\n<ul>\n<li> Informations générales <ul>\n<li> svg <\/li>\n<li> toile <\/li>\n<li> SVG vs toile <\/li>\n<\/ul>\n<\/li>\n<li> bibliothèque <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>\n<li> GraphicsJs sur github <\/li>\n<li> GraphicsJS Documentation <\/li>\n<li> Référence de l'API GraphicsJS <\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<h2> Des questions fréquemment posées sur les graphicsjs <\/h2>\n<h3> En quoi GraphicsJS est-il différent des autres bibliothèques graphiques JavaScript? <\/h3>\n<p> GraphicsJs se distingue par sa nature puissante et légère. Il s'agit d'une bibliothèque puissante qui permet aux développeurs de dessiner et d'animer tous les graphiques avec une haute précision et des performances élevées. Contrairement à d'autres bibliothèques, GraphicsJS fournit un ensemble complet de fonctionnalités, y compris des couches, des gradients, des modèles, et plus encore sans affecter la vitesse ou l'efficacité. Il prend également en charge tous les navigateurs modernes, ce qui en fait une option polyvalente pour les développeurs. <\/p>\n<h3> Comment démarrer avec GraphicsJS? <\/h3>\n<p> Pour commencer avec GraphicsJS, vous devez inclure la bibliothèque GraphicsJS dans votre fichier HTML. Vous pouvez télécharger la bibliothèque à partir du site officiel ou utiliser CDN. Une fois la bibliothèque incluse, vous pouvez commencer à créer les graphiques en appelant les fonctions et méthodes appropriées fournies par la bibliothèque. <\/p>\n<h3> Puis-je créer des animations complexes à l'aide de GraphicsJS? <\/h3>\n<p> Oui, GraphicsJS est con?u pour gérer facilement les animations complexes. Il fournit un riche ensemble de fonctionnalités d'animation, y compris les paramètres de fonction d'assouplissement, de retard et de durée. Vous pouvez animer n'importe quel attribut d'un graphique, tel que sa position, sa taille, sa couleur, etc. Cela fait de GraphicsJS un outil puissant pour créer des graphiques interactifs et dynamiques. <\/p>\n<h3> GraphicsJS est-il compatible avec tous les navigateurs? <\/h3>\n<p> GraphicsJS est con?u pour être compatible avec tous les navigateurs modernes, y compris Chrome, Firefox, Safari et Internet Explorer. Il utilise SVG et VML pour le rendu, qui les soutiennent tous. Cela garantit que vos graphiques sont cohérents et fonctionnent bien sur différentes plates-formes et appareils. <\/p>\n<h3> Comment créer des gradients en utilisant GraphicsJS? <\/h3>\n<p> La création de gradients avec GraphicsJS est simple. Vous pouvez utiliser la méthode du gradient pour définir des gradients linéaires ou radiaux, spécifier les couleurs et les positions, puis appliquer des gradients à n'importe quelle forme. Cela vous permet de créer facilement des graphiques colorés. <\/p>\n<h3> Puis-je créer des graphiques interactifs à l'aide de GraphicsJS? <\/h3>\n<p> Oui, GraphicsJS fournit un ensemble de capacités de gestion des événements qui vous permettent de créer des graphiques interactifs. Vous pouvez joindre un écouteur d'événements à n'importe quel graphique, vous permettant de répondre aux actions des utilisateurs telles que des clics, des mouvements de souris, etc. Cela fait de GraphicsJS un excellent choix pour créer des applications Web interactives. <\/p>\n<h3> GraphicsJS prend-il en charge les couches? <\/h3>\n<p> Oui, GraphicsJS prend en charge les couches, vous permettant d'organiser des graphiques en groupes distincts. Chaque couche peut être utilisée indépendamment, ce qui facilite la gestion des graphiques complexes. Vous pouvez également contr?ler la visibilité et l'ordre z de chaque couche, permettant un contr?le à grain fin des graphiques. <\/p>\n<h3> Comment optimiser mes graphiques à l'aide de GraphicsJS? <\/h3>\n<p> GraphicsJS fournit plusieurs fonctionnalités qui peuvent vous aider à optimiser vos graphiques. Par exemple, vous pouvez utiliser la méthode du recadrage pour masquer des parties des graphiques en dehors d'une zone spécifiée, réduisant ainsi la quantité de rendu requis. Vous pouvez également utiliser la méthode de cache pour stocker la sortie rendue des graphiques, améliorant ainsi les performances lorsque vous repeignez fréquemment les graphiques. <\/p>\n<h3> Puis-je créer des graphiques et des graphiques à l'aide de GraphicsJS? <\/h3>\n<p> Bien que GraphicsJS ne soit pas con?u spécifiquement pour la création de graphiques et de graphiques, ses puissantes capacités de dessin et d'animation lui permettent de créer tout type de graphiques, y compris les graphiques et les graphiques. Vous pouvez utiliser les méthodes de la bibliothèque pour dessiner des lignes, des courbes, des rectangles, des cercles et plus encore pour créer divers types de graphiques. <\/p>\n<h3> GraphicsJS est-il gratuit? <\/h3>\n<p> Oui, GraphicsJS est une bibliothèque open source gratuite. Vous pouvez l'utiliser gratuitement dans votre projet. La bibliothèque est également activement maintenue pour s'assurer qu'elle est synchronisée avec les dernières normes et technologies Web. <\/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://m.miracleart.cn/fr/" 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="communauté" class="head_nava head_nava-template1">communauté</a>
<div class="377j5v51b" id="dropdown-template1" style="display: none;">
<div id="377j5v51b" class="languagechoose">
<a href="http://m.miracleart.cn/fr/article.html" title="Articles" class="languagechoosea on">Articles</a>
<a href="http://m.miracleart.cn/fr/faq/zt" title="Sujets" class="languagechoosea">Sujets</a>
<a href="http://m.miracleart.cn/fr/wenda.html" title="Questions et réponses" class="languagechoosea">Questions et réponses</a>
</div>
</div>
</div>
<div id="377j5v51b" class="head_navs">
<a href="javascript:;" title="Apprendre" class="head_nava head_nava-template1_1">Apprendre</a>
<div class="377j5v51b" id="dropdown-template1_1" style="display: none;">
<div id="377j5v51b" class="languagechoose">
<a href="http://m.miracleart.cn/fr/course.html" title="Cours" class="languagechoosea on">Cours</a>
<a href="http://m.miracleart.cn/fr/dic/" title="Dictionnaire de programmation" class="languagechoosea">Dictionnaire de programmation</a>
</div>
</div>
</div>
<div id="377j5v51b" class="head_navs">
<a href="javascript:;" title="Bibliothèque d'outils" class="head_nava head_nava-template1_2">Bibliothèque d'outils</a>
<div class="377j5v51b" id="dropdown-template1_2" style="display: none;">
<div id="377j5v51b" class="languagechoose">
<a href="http://m.miracleart.cn/fr/toolset/development-tools" title="Outils de développement" class="languagechoosea on">Outils de développement</a>
<a href="http://m.miracleart.cn/fr/toolset/website-source-code" title="Code source du site Web" class="languagechoosea">Code source du site Web</a>
<a href="http://m.miracleart.cn/fr/toolset/php-libraries" title="Bibliothèques PHP" class="languagechoosea">Bibliothèques PHP</a>
<a href="http://m.miracleart.cn/fr/toolset/js-special-effects" title="Effets spéciaux JS" class="languagechoosea on">Effets spéciaux JS</a>
<a href="http://m.miracleart.cn/fr/toolset/website-materials" title="Matériel du site Web" class="languagechoosea on">Matériel du site Web</a>
<a href="http://m.miracleart.cn/fr/toolset/extension-plug-ins" title="Plugins d'extension" class="languagechoosea on">Plugins d'extension</a>
</div>
</div>
</div>
<div id="377j5v51b" class="head_navs">
<a href="http://m.miracleart.cn/fr/ai" title="Outils d'IA" class="head_nava head_nava-template1_3">Outils d'IA</a>
</div>
<div id="377j5v51b" class="head_navs">
<a href="javascript:;" title="Loisirs" class="head_nava head_nava-template1_3">Loisirs</a>
<div class="377j5v51b" id="dropdown-template1_3" style="display: none;">
<div id="377j5v51b" class="languagechoose">
<a href="http://m.miracleart.cn/fr/game" title="Téléchargement du jeu" class="languagechoosea on">Téléchargement du jeu</a>
<a href="http://m.miracleart.cn/fr/mobile-game-tutorial/" title="Tutoriels de jeu" class="languagechoosea">Tutoriels de jeu</a>
</div>
</div>
</div>
</div>
</div>
<div id="377j5v51b" class="head_search">
<input id="key_words" onkeydown="if (event.keyCode == 13) searchs('fr')" class="search-input" type="text" autocomplete="off" name="keywords" required="required" placeholder="Block,address,transaction,news" value="">
<a href="javascript:;" title="recherche" onclick="searchs('fr')"><img src="/static/imghw/find.png" alt="recherche"></a>
</div>
<div id="377j5v51b" class="head_right">
<div id="377j5v51b" class="haed_language">
<a href="javascript:;" class="layui-btn haed_language_btn">Fran?ais<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="日本語" class="languagechoosea">日本語</a>
<a href="javascript:setlang('ko');" title="???" class="languagechoosea">???</a>
<a href="javascript:setlang('ms');" title="Melayu" class="languagechoosea">Melayu</a>
<a href="javascript:;" 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">Table des matières</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="#points-clés" title=" points clés " > points clés </a>
</div>
<div id="377j5v51b" class="Article_Details_main1L2s ">
<a href="#Pourquoi-choisir-GraphicsJS" title=" Pourquoi choisir GraphicsJS " > Pourquoi choisir GraphicsJS </a>
</div>
<div id="377j5v51b" class="Article_Details_main1L2s ">
<a href="#GraphicsJS-Basics" title=" GraphicsJS Basics " > GraphicsJS Basics </a>
</div>
<div id="377j5v51b" class="Article_Details_main1L2s ">
<a href="#Notre-premier-chef-d-?uvre" title=" Notre premier chef-d'?uvre " > Notre premier chef-d'?uvre </a>
</div>
<div id="377j5v51b" class="Article_Details_main1L2s ">
<a href="#Remplir-tracer-et-modèle-de-modèle" title=" Remplir, tracer et modèle de modèle " > Remplir, tracer et modèle de modèle </a>
</div>
<div id="377j5v51b" class="Article_Details_main1L2s ">
<a href="#Dans-la-prochaine-partie-de-cet-article-je-veux-vous-montrer-comment-créer-un-jeu-de-type-Cookie-Clicker-en-utilisant-GraphicsJS-en-moins-de-lignes-de-code" title=" Dans la prochaine partie de cet article, je veux vous montrer comment créer un jeu de type Cookie Clicker en utilisant GraphicsJS en moins de 50 lignes de code. " > Dans la prochaine partie de cet article, je veux vous montrer comment créer un jeu de type Cookie Clicker en utilisant GraphicsJS en moins de 50 lignes de code. </a>
</div>
<div id="377j5v51b" class="Article_Details_main1L2s ">
<a href="#Nous-créons-d-abord-une-étape-comme-mentionné-précédemment-puis-déclarons-quelques-variables-initiales" title=" Nous créons d'abord une étape (comme mentionné précédemment), puis déclarons quelques variables initiales: " > Nous créons d'abord une étape (comme mentionné précédemment), puis déclarons quelques variables initiales: </a>
</div>
<div id="377j5v51b" class="Article_Details_main1L2s ">
<a href="#Ensuite-ajoutons-une-fonction-pour-dessiner-nos-feuilles-Cela-utilise-l-API-de-transformation-GraphicsJS-pratique-qui-vous-permet-de-déplacer-d-échec-de-rotation-et-de-coupe-des-éléments-et-du-groupe-d-éléments-Il-s-agit-d-un-outil-très-puissant-lorsqu-il-est-combiné-avec-des-couches-et-un-DOM-virtuel" title=" Ensuite, ajoutons une fonction pour dessiner nos feuilles. Cela utilise l'API de transformation GraphicsJS pratique, qui vous permet de déplacer, d'échec, de rotation et de coupe des éléments et du groupe d'éléments. Il s'agit d'un outil très puissant lorsqu'il est combiné avec des couches et un DOM virtuel. " > Ensuite, ajoutons une fonction pour dessiner nos feuilles. Cela utilise l'API de transformation GraphicsJS pratique, qui vous permet de déplacer, d'échec, de rotation et de coupe des éléments et du groupe d'éléments. Il s'agit d'un outil très puissant lorsqu'il est combiné avec des couches et un DOM virtuel. </a>
</div>
<div id="377j5v51b" class="Article_Details_main1L2s ">
<a href="#Tout-objet-étape-et-calque-dans-GraphicsJS-peut-gérer-les-événements-Une-liste-complète-des-événements-pris-en-charge-peut-être-trouvé-dans-l-API-EventType-Il-y-a-quatre-événements-spéciaux-sur-scène-pour-contr?ler-le-rendu" title=" Tout objet, étape et calque dans GraphicsJS peut gérer les événements. Une liste complète des événements pris en charge peut être trouvé dans l'API EventType. Il y a quatre événements spéciaux sur scène pour contr?ler le rendu. " > Tout objet, étape et calque dans GraphicsJS peut gérer les événements. Une liste complète des événements pris en charge peut être trouvé dans l'API EventType. Il y a quatre événements spéciaux sur scène pour contr?ler le rendu. </a>
</div>
<div id="377j5v51b" class="Article_Details_main1L2s ">
<a href="#Optimisation-des-performances" title=" Optimisation des performances " > Optimisation des performances </a>
</div>
<div id="377j5v51b" class="Article_Details_main1L2s ">
<a href="#Résultat-final" title=" Résultat final " > Résultat final </a>
</div>
<div id="377j5v51b" class="Article_Details_main1L2s ">
<a href="#Conclusion" title=" Conclusion " > Conclusion </a>
</div>
<div id="377j5v51b" class="Article_Details_main1L2s ">
<a href="#lien-pour-la-lecture-complémentaire" title=" lien pour la lecture complémentaire " > lien pour la lecture complémentaire </a>
</div>
<div id="377j5v51b" class="Article_Details_main1L2s ">
<a href="#Des-questions-fréquemment-posées-sur-les-graphicsjs" title=" Des questions fréquemment posées sur les graphicsjs " > Des questions fréquemment posées sur les graphicsjs </a>
</div>
<div id="377j5v51b" class="Article_Details_main1L2s ">
<a href="#En-quoi-GraphicsJS-est-il-différent-des-autres-bibliothèques-graphiques-JavaScript" title=" En quoi GraphicsJS est-il différent des autres bibliothèques graphiques JavaScript? " > En quoi GraphicsJS est-il différent des autres bibliothèques graphiques JavaScript? </a>
</div>
<div id="377j5v51b" class="Article_Details_main1L2s ">
<a href="#Comment-démarrer-avec-GraphicsJS" title=" Comment démarrer avec GraphicsJS? " > Comment démarrer avec GraphicsJS? </a>
</div>
<div id="377j5v51b" class="Article_Details_main1L2s ">
<a href="#Puis-je-créer-des-animations-complexes-à-l-aide-de-GraphicsJS" title=" Puis-je créer des animations complexes à l'aide de GraphicsJS? " > Puis-je créer des animations complexes à l'aide de GraphicsJS? </a>
</div>
<div id="377j5v51b" class="Article_Details_main1L2s ">
<a href="#GraphicsJS-est-il-compatible-avec-tous-les-navigateurs" title=" GraphicsJS est-il compatible avec tous les navigateurs? " > GraphicsJS est-il compatible avec tous les navigateurs? </a>
</div>
<div id="377j5v51b" class="Article_Details_main1L2s ">
<a href="#Comment-créer-des-gradients-en-utilisant-GraphicsJS" title=" Comment créer des gradients en utilisant GraphicsJS? " > Comment créer des gradients en utilisant GraphicsJS? </a>
</div>
<div id="377j5v51b" class="Article_Details_main1L2s ">
<a href="#Puis-je-créer-des-graphiques-interactifs-à-l-aide-de-GraphicsJS" title=" Puis-je créer des graphiques interactifs à l'aide de GraphicsJS? " > Puis-je créer des graphiques interactifs à l'aide de GraphicsJS? </a>
</div>
<div id="377j5v51b" class="Article_Details_main1L2s ">
<a href="#GraphicsJS-prend-il-en-charge-les-couches" title=" GraphicsJS prend-il en charge les couches? " > GraphicsJS prend-il en charge les couches? </a>
</div>
<div id="377j5v51b" class="Article_Details_main1L2s ">
<a href="#Comment-optimiser-mes-graphiques-à-l-aide-de-GraphicsJS" title=" Comment optimiser mes graphiques à l'aide de GraphicsJS? " > Comment optimiser mes graphiques à l'aide de GraphicsJS? </a>
</div>
<div id="377j5v51b" class="Article_Details_main1L2s ">
<a href="#Puis-je-créer-des-graphiques-et-des-graphiques-à-l-aide-de-GraphicsJS" title=" Puis-je créer des graphiques et des graphiques à l'aide de GraphicsJS? " > Puis-je créer des graphiques et des graphiques à l'aide de GraphicsJS? </a>
</div>
<div id="377j5v51b" class="Article_Details_main1L2s ">
<a href="#GraphicsJS-est-il-gratuit" title=" GraphicsJS est-il gratuit? " > GraphicsJS est-il gratuit? </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/fr/" title="Maison"
class="phpgenera_Details_mainL1a">Maison</a>
<img src="/static/imghw/top_right.png" alt="" />
<a href="http://m.miracleart.cn/fr/web-designer.html"
class="phpgenera_Details_mainL1a">interface Web</a>
<img src="/static/imghw/top_right.png" alt="" />
<a href="http://m.miracleart.cn/fr/js-tutorial.html"
class="phpgenera_Details_mainL1a">js tutoriel</a>
<img src="/static/imghw/top_right.png" alt="" />
<span>Présentation de GraphicsJS, une bibliothèque graphique légère puissante</span>
</div>
<div id="377j5v51b" class="Articlelist_txts">
<div id="377j5v51b" class="Articlelist_txts_info">
<h1 class="Articlelist_txts_title">Présentation de GraphicsJS, une bibliothèque graphique légère puissante</h1>
<div id="377j5v51b" class="Articlelist_txts_info_head">
<div id="377j5v51b" class="author_info">
<a href="http://m.miracleart.cn/fr/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/fr/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: la pierre angulaire des réseaux modernes. Aujourd'hui, SVG et Canvas sont souvent la technologie de choix lors de la création d'images interactives - Flash a été oublié, Silverlight est devenu une licorne rare au bord du réseau et peu de gens se souviennent des plugins tiers. </p>
<p> Les avantages et les inconvénients de chaque technique sont bien documentés, mais en bref, SVG est mieux adapté à la création et à la gestion des éléments interactifs. En effet, SVG est un format vectoriel basé sur XML qui, lorsqu'une image est chargée dans une page à l'aide de la balise <code><svg></svg></code>, chaque élément de celui-ci peut être utilisé dans le DOM SVG. </p>
<p> Dans cet article, je souhaite vous présenter GraphicsJS, une nouvelle et puissante bibliothèque de dessins JavaScript open source basée sur SVG (pour les versions IE plus anciennes, il a une alternative VML). Je vais commencer par introduire rapidement ses bases, puis présenter les capacités de la bibliothèque avec deux exemples courts et merveilleux: le premier exemple est entièrement sur l'art, et le deuxième exemple montre comment écrire un simple dans moins de 50 lignes de code Puzzle Art jeu. </p>
<h2 id="points-clés"> points clés </h2>
<ul>
<li> GraphicsJS est une nouvelle bibliothèque de dessins JavaScript puissante puissante basée sur SVG et fournit des alternatives VML pour les versions IE plus anciennes. Il est léger et flexible, avec de riches API JavaScript. </li>
<li> Publié par AnyChart, la bibliothèque est rendue dans les produits propriétaires d'Anychart depuis au moins trois ans, garantissant sa robustesse. Contrairement à la galerie de dessins JavaScript d'Anychart, GraphicsJS est disponible gratuitement pour les projets commerciaux et à but non lucratif. </li>
<li> GraphicsJS est la compatibilité entre les navigateurs et prend en charge Internet Explorer 6.0, Safari 3.0, Firefox 3.0 et Opera 9.5. Il est rendu dans VML dans des versions IE plus anciennes et en SVG dans tous les autres navigateurs. </li>
<li> Cette bibliothèque permet la combinaison de graphiques et d'animations, y compris des feux de joie animés, des galaxies rotatives, des précipitations et des jeux de puzzle jouables. Il contient également une documentation détaillée et des références API complètes. </li>
<li> La bibliothèque GraphicsJS peut être utilisée pour créer des applications Web interactives, y compris les couches, les gradients, les modèles, le traitement d'événements et l'optimisation des performances. Il prend également en charge des animations et des transformations complexes, ce qui en fait une option polyvalente pour les développeurs. </li>
</ul>
<h2 id="Pourquoi-choisir-GraphicsJS"> Pourquoi choisir GraphicsJS </h2>
<p> Il existe de nombreuses bibliothèques qui aident les développeurs à utiliser SVG: Rapha?l, Snap.Svg et Bonsaijs, pour ne nommer que quelques-unes des meilleures bibliothèques. Ces bibliothèques ont chacune leurs avantages et leurs inconvénients, mais une comparaison approfondie d'entre eux fera l'objet d'un autre article. Cet article concerne GraphicsJS, alors laissez-moi expliquer ce qu'il a et ce qu'il a. </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> Tout d'abord, GraphicsJS est léger et possède une API JavaScript très flexible. Il implémente de nombreuses fonctionnalités de texte riche, ainsi qu'un Dom virtuel distinct des implémentations HTML DOM spécifiques du navigateur. </p>
<p> Deuxièmement, il s'agit d'une nouvelle bibliothèque JavaScript open source publiée l'automne dernier par AnyChart, l'un des principaux développeurs de logiciels de visualisation de données interactifs au monde. AnyChart utilise GraphicsJS depuis au moins trois ans (depuis la sortie d'AnyChart 7.0) pour rendre les graphiques dans ses produits propriétaires, de sorte que GraphicsJS est entièrement testé au combat. (Avertissement: je suis le chef de la R&D chez AnyChart et le développeur principal chez GraphicsJS) </p>
<p> Troisièmement, contrairement à la bibliothèque de dessin JavaScript d'AnyChart, GraphicsJS est disponible gratuitement pour les projets commerciaux et à but non lucratif. Il est disponible sur GitHub sous la licence Apache. </p>
<p> Quatrièmement, GraphicsJS a la compatibilité entre les navigateurs et prend en charge Internet Explorer 6.0, Safari 3.0, Firefox 3.0 et Opera 9.5. Il est rendu dans VML dans des versions IE plus anciennes et en SVG dans tous les autres navigateurs. </p>
<p> Enfin, GraphicsJS vous permet de combiner parfaitement les graphiques et les animations. Découvrez sa galerie principale, y compris des feux de joie animés, des galaxies tournantes, des précipitations, des feuilles générées par procédure, 15 jeux de puzzle jouables et plus encore. GraphicsJS contient plus d'exemples dans sa documentation détaillée et sa référence API complète. </p>
<h2 id="GraphicsJS-Basics"> GraphicsJS Basics </h2>
<p> Pour commencer avec GraphicsJS, vous devez référencer la bibliothèque et créer un élément HTML au niveau de bloc pour le dessin: </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> Vous devez ensuite créer une étape et dessiner quelque chose dedans, comme un rectangle, un cercle ou une autre forme: </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> Ce qui suit est un exemple sur Codepen où nous allons plus loin et dessinons le symbole des reliques de la mort. </p>
<h2 id="Notre-premier-chef-d-?uvre"> Notre premier chef-d'?uvre </h2>
<h3 id="Remplir-tracer-et-modèle-de-modèle"> Remplir, tracer et modèle de modèle </h3>
<p> Toute forme ou chemin peut être coloré à l'aide de paramètres de remplissage et de paramètres de course. Tout a un coup (bordure), mais seule la forme et les chemins fermés ont un rembourrage. Les réglages de remplissage et de course sont très riches et vous pouvez utiliser des gradients linéaires ou circulaires pour le remplissage et la course. De plus, les lignes peuvent être pointillées et de support l'image se remplit de plusieurs modes de carreaux. Mais ce sont toutes des choses assez standard que vous pouvez trouver dans presque toutes les bibliothèques. Ce qui rend GraphicsJS spécial, c'est sa fonction de remplissage de maillage et de modèle, qui non seulement vous permet d'utiliser directement 32 (!) Des modèles de remplissage de maillage disponibles directement, mais vous permet également de créer facilement des modèles personnalisés en formes ou en texte. </p>
<p> Maintenant, voyons ce qui peut être réalisé exactement! Je vais dessiner un dessin simple d'un homme debout près de la maison et le remplir avec différents motifs et couleurs pour l'améliorer. Pour plus de simplicité, faisons-en une peinture d'art enfantine (et essayez de ne pas impliquer la rugosité de l'art). C'est tout: </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> Affichez les résultats sur Codepen. </p>
<p> Comme vous pouvez le voir, nous utilisons maintenant des variables - toutes les méthodes de dessin de contenu sur l'étape renvoient une référence à l'objet créé et ce lien peut être utilisé pour modifier ou supprimer l'objet. </p>
<p> Notez également comment les appels de cha?ne (par exemple <code>stage.path().moveTo(320, 330).lineTo(320, 340);</code>) sont partout dans GraphicsJS, ce qui aide à raccourcir le code. Les appels encha?nés doivent être utilisés avec prudence, mais s'il est appliqué correctement, il rend le code plus compact et plus facile à lire. </p><p> Maintenant, remettez cette page à colorier à un enfant et laissez-les peindre. Parce que même les enfants peuvent ma?triser les techniques suivantes: </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> C'est à quoi ressemble notre exemple maintenant. </p>
<p> Maintenant, nous avons une photo d'un Highlander debout à c?té d'un kilt, debout près de son chateau de briques avec de la paille sur le toit. Nous pouvons même risquer de dire qu'il s'agit en effet d'une ?uvre d'art que nous voulons obtenir le droit d'auteur. Faisons cela en utilisant des remplissages de motifs en fonction du texte personnalisé: <em>
</em>
</p> Comme vous pouvez le voir, cela est facile à faire: vous créez une instance d'un objet texte, puis formez un motif sur la scène et placez le texte dans le motif. <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> Afficher la couleur des maisons protégées par les droits d'auteur / graphicsjs sur Codepen. </p>
<p> Créer un jeu d'art de puzzle en moins de 50 lignes de code </p>
<h2 id="Dans-la-prochaine-partie-de-cet-article-je-veux-vous-montrer-comment-créer-un-jeu-de-type-Cookie-Clicker-en-utilisant-GraphicsJS-en-moins-de-lignes-de-code"> Dans la prochaine partie de cet article, je veux vous montrer comment créer un jeu de type Cookie Clicker en utilisant GraphicsJS en moins de 50 lignes de code. </h2>
<p> Le nom de jeu est </p> "balayer les rues dans le vent" <p>, et le joueur joue le r?le d'un charognard et balaie les rues un après-midi venteux en automne. Le jeu utilise du code de l'exemple de feuille généré par le programme dans la galerie GraphicsJS. <em>
</em> Vous pouvez afficher les jeux finis sur Codepen (ou la fin de l'article). </p>
<p> Couches, zindex et Dom virtuel </p>
<h3 id="Nous-créons-d-abord-une-étape-comme-mentionné-précédemment-puis-déclarons-quelques-variables-initiales"> Nous créons d'abord une étape (comme mentionné précédemment), puis déclarons quelques variables initiales: </h3>
<p>
</p> Pour ce jeu, nous utiliserons la couche - l'objet dans GraphicsJS utilisé pour regrouper les éléments. Si vous souhaitez appliquer des changements similaires aux éléments (tels que les transformations), vous devez regrouper les éléments. Vous pouvez modifier la couche en mode pause (plus à ce sujet plus tard), ce qui peut améliorer les performances et l'expérience utilisateur. <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> Dans cette démo, nous utilisons la fonction de couche pour nous aider à regrouper les feuilles et à les éviter de couvrir l'étiquette (il nous indique combien de feuilles sont balayées). Pour ce faire, nous créons une balise et appelons la méthode </p>, qui crée la couche de liaison de scène. Nous définissons la propriété <p> de cette couche sur la propriété <code>stage.layer</code> sous l'étiquette. <code>zIndex</code>
<code>zIndex</code>
</p> Après cela, nous pouvons nous assurer qu'ils ne remplacent pas le texte, peu importe le nombre de feuilles que nous créons dans la couche. <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> converti </p>
<h3 id="Ensuite-ajoutons-une-fonction-pour-dessiner-nos-feuilles-Cela-utilise-l-API-de-transformation-GraphicsJS-pratique-qui-vous-permet-de-déplacer-d-échec-de-rotation-et-de-coupe-des-éléments-et-du-groupe-d-éléments-Il-s-agit-d-un-outil-très-puissant-lorsqu-il-est-combiné-avec-des-couches-et-un-DOM-virtuel"> Ensuite, ajoutons une fonction pour dessiner nos feuilles. Cela utilise l'API de transformation GraphicsJS pratique, qui vous permet de déplacer, d'échec, de rotation et de coupe des éléments et du groupe d'éléments. Il s'agit d'un outil très puissant lorsqu'il est combiné avec des couches et un DOM virtuel. </h3>
<p>
</p> Vous verrez que chaque chemin est créé de la même manière, mais la conversion sera effectuée. Cela produira un très beau motif de feuilles aléatoires. <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> événements de traitement </p>
<h3 id="Tout-objet-étape-et-calque-dans-GraphicsJS-peut-gérer-les-événements-Une-liste-complète-des-événements-pris-en-charge-peut-être-trouvé-dans-l-API-EventType-Il-y-a-quatre-événements-spéciaux-sur-scène-pour-contr?ler-le-rendu"> Tout objet, étape et calque dans GraphicsJS peut gérer les événements. Une liste complète des événements pris en charge peut être trouvé dans l'API EventType. Il y a quatre événements spéciaux sur scène pour contr?ler le rendu. </h3><p> Dans cet exemple de jeu, nous utilisons un écouteur d'événements attaché à l'objet Leaf de sorte que lorsque l'utilisateur plane sur eux, ils disparaissent un par un. Pour ce faire, ajoutez le code suivant au bas de la fonction <code>drawLeaves</code>, avant l'instruction <code>return</code>: </p>
<pre class='brush:php;toolbar:false;'> <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>GraphicsJS Basic Example</title>
</head>
<body>
<div id="stage-container" style="width: 400px; height: 375px;"></div>
<??>
<??>
</body>
</html></pre>
<p> Ici, nous pouvons également voir que nous utilisons des couches pour calculer les feuilles. </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> Veuillez noter que nous ne stockons pas réellement le nombre de feuilles ici. Puisque nous ajoutons des feuilles à une couche spécifique et en retirons les feuilles, cela nous permet de suivre le nombre d'éléments enfants que nous avons (et donc combien de feuilles reste). </p>
<p> GraphicsJS fournit un DOM virtuel qui est une implémentation SVG / VML spécifique au navigateur. Il est très utile pour faire beaucoup de grandes choses comme suivre tous les objets et les couches, appliquer des transformations aux groupes et optimiser le rendu avec aide nous permet de suivre et de contr?ler le processus de rendu. </p>
<h3 id="Optimisation-des-performances"> Optimisation des performances </h3>
<p> Les gestionnaires de DOM et d'événements virtuels permettent aux utilisateurs de GraphicsJS de contr?ler le rendu. Les articles de performance peuvent vous aider à comprendre la relation entre ces contenus. </p>
<p> Lors de la génération de feuilles dans le jeu, nous devons mettre en pause le rendu lors de l'ajout de nouvelles feuilles, et reprendre le rendu après toutes les modifications terminées: </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> Cette méthode de traitement de nouveaux éléments fait appara?tre de nouvelles feuilles presque immédiatement. </p>
<p> Enfin, commencez tout en appelant <code>shakeTree()</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>
<h3 id="Résultat-final"> Résultat final </h3>
<p> Afficher le nettoyant de rue / graphicsjs sur Codepen. </p>
<h2 id="Conclusion"> Conclusion </h2>
<p> La transition vers HTML5 a changé le réseau. En ce qui concerne les applications Web modernes et même les sites Web simples, nous rencontrons souvent des taches qui nécessitent un traitement d'image. S'il est impossible de trouver une solution qui fonctionne bien dans tous les cas, vous devriez considérer la bibliothèque GraphicsJS. Il est open source, robuste, avec un excellent support de navigateur et de nombreuses fonctionnalités qui le rendent amusant, pratique et bien s?r utile. </p>
<p> J'aimerais entendre vos commentaires sur les GrpHicsJ dans les commentaires ci-dessous. L'utilisez-vous déjà? Envisageriez-vous de l'utiliser pour un nouveau projet? J'adorerais savoir pourquoi ou pourquoi ne pas l'utiliser. J'écris également une liste de grandes bibliothèques et articles de dessin JavaScript qui les compareront et les compareront tous. N'hésitez pas à souligner les fonctionnalités que vous souhaitez y voir. </p>
<h2 id="lien-pour-la-lecture-complémentaire"> lien pour la lecture complémentaire </h2>
<ul>
<li> Informations générales <ul>
<li> svg </li>
<li> toile </li>
<li> SVG vs toile </li>
</ul>
</li>
<li> bibliothèque <ul>
<li> GraphicsJS </li>
<li> Rapha?l </li>
<li> snap.svg </li>
<li> bonsaijs </li>
</ul>
</li>
<li> GraphicsJS <ul>
<li> GraphicsJs sur github </li>
<li> GraphicsJS Documentation </li>
<li> Référence de l'API GraphicsJS </li>
</ul>
</li>
</ul>
<h2 id="Des-questions-fréquemment-posées-sur-les-graphicsjs"> Des questions fréquemment posées sur les graphicsjs </h2>
<h3 id="En-quoi-GraphicsJS-est-il-différent-des-autres-bibliothèques-graphiques-JavaScript"> En quoi GraphicsJS est-il différent des autres bibliothèques graphiques JavaScript? </h3>
<p> GraphicsJs se distingue par sa nature puissante et légère. Il s'agit d'une bibliothèque puissante qui permet aux développeurs de dessiner et d'animer tous les graphiques avec une haute précision et des performances élevées. Contrairement à d'autres bibliothèques, GraphicsJS fournit un ensemble complet de fonctionnalités, y compris des couches, des gradients, des modèles, et plus encore sans affecter la vitesse ou l'efficacité. Il prend également en charge tous les navigateurs modernes, ce qui en fait une option polyvalente pour les développeurs. </p>
<h3 id="Comment-démarrer-avec-GraphicsJS"> Comment démarrer avec GraphicsJS? </h3>
<p> Pour commencer avec GraphicsJS, vous devez inclure la bibliothèque GraphicsJS dans votre fichier HTML. Vous pouvez télécharger la bibliothèque à partir du site officiel ou utiliser CDN. Une fois la bibliothèque incluse, vous pouvez commencer à créer les graphiques en appelant les fonctions et méthodes appropriées fournies par la bibliothèque. </p>
<h3 id="Puis-je-créer-des-animations-complexes-à-l-aide-de-GraphicsJS"> Puis-je créer des animations complexes à l'aide de GraphicsJS? </h3>
<p> Oui, GraphicsJS est con?u pour gérer facilement les animations complexes. Il fournit un riche ensemble de fonctionnalités d'animation, y compris les paramètres de fonction d'assouplissement, de retard et de durée. Vous pouvez animer n'importe quel attribut d'un graphique, tel que sa position, sa taille, sa couleur, etc. Cela fait de GraphicsJS un outil puissant pour créer des graphiques interactifs et dynamiques. </p>
<h3 id="GraphicsJS-est-il-compatible-avec-tous-les-navigateurs"> GraphicsJS est-il compatible avec tous les navigateurs? </h3>
<p> GraphicsJS est con?u pour être compatible avec tous les navigateurs modernes, y compris Chrome, Firefox, Safari et Internet Explorer. Il utilise SVG et VML pour le rendu, qui les soutiennent tous. Cela garantit que vos graphiques sont cohérents et fonctionnent bien sur différentes plates-formes et appareils. </p>
<h3 id="Comment-créer-des-gradients-en-utilisant-GraphicsJS"> Comment créer des gradients en utilisant GraphicsJS? </h3>
<p> La création de gradients avec GraphicsJS est simple. Vous pouvez utiliser la méthode du gradient pour définir des gradients linéaires ou radiaux, spécifier les couleurs et les positions, puis appliquer des gradients à n'importe quelle forme. Cela vous permet de créer facilement des graphiques colorés. </p>
<h3 id="Puis-je-créer-des-graphiques-interactifs-à-l-aide-de-GraphicsJS"> Puis-je créer des graphiques interactifs à l'aide de GraphicsJS? </h3>
<p> Oui, GraphicsJS fournit un ensemble de capacités de gestion des événements qui vous permettent de créer des graphiques interactifs. Vous pouvez joindre un écouteur d'événements à n'importe quel graphique, vous permettant de répondre aux actions des utilisateurs telles que des clics, des mouvements de souris, etc. Cela fait de GraphicsJS un excellent choix pour créer des applications Web interactives. </p>
<h3 id="GraphicsJS-prend-il-en-charge-les-couches"> GraphicsJS prend-il en charge les couches? </h3>
<p> Oui, GraphicsJS prend en charge les couches, vous permettant d'organiser des graphiques en groupes distincts. Chaque couche peut être utilisée indépendamment, ce qui facilite la gestion des graphiques complexes. Vous pouvez également contr?ler la visibilité et l'ordre z de chaque couche, permettant un contr?le à grain fin des graphiques. </p>
<h3 id="Comment-optimiser-mes-graphiques-à-l-aide-de-GraphicsJS"> Comment optimiser mes graphiques à l'aide de GraphicsJS? </h3>
<p> GraphicsJS fournit plusieurs fonctionnalités qui peuvent vous aider à optimiser vos graphiques. Par exemple, vous pouvez utiliser la méthode du recadrage pour masquer des parties des graphiques en dehors d'une zone spécifiée, réduisant ainsi la quantité de rendu requis. Vous pouvez également utiliser la méthode de cache pour stocker la sortie rendue des graphiques, améliorant ainsi les performances lorsque vous repeignez fréquemment les graphiques. </p>
<h3 id="Puis-je-créer-des-graphiques-et-des-graphiques-à-l-aide-de-GraphicsJS"> Puis-je créer des graphiques et des graphiques à l'aide de GraphicsJS? </h3>
<p> Bien que GraphicsJS ne soit pas con?u spécifiquement pour la création de graphiques et de graphiques, ses puissantes capacités de dessin et d'animation lui permettent de créer tout type de graphiques, y compris les graphiques et les graphiques. Vous pouvez utiliser les méthodes de la bibliothèque pour dessiner des lignes, des courbes, des rectangles, des cercles et plus encore pour créer divers types de graphiques. </p>
<h3 id="GraphicsJS-est-il-gratuit"> GraphicsJS est-il gratuit? </h3>
<p> Oui, GraphicsJS est une bibliothèque open source gratuite. Vous pouvez l'utiliser gratuitement dans votre projet. La bibliothèque est également activement maintenue pour s'assurer qu'elle est synchronisée avec les dernières normes et technologies Web. </p><p>Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!</p>
</div>
</div>
<div id="377j5v51b" class="wzconShengming_sp">
<div id="377j5v51b" class="bzsmdiv_sp">Déclaration de ce site Web</div>
<div>Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefa?on, veuillez contacter 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>Article chaud</h2>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottom">
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://m.miracleart.cn/fr/faq/1796832397.html" title="Guide de construction de Grass Wonder | Uma musume joli derby" class="phpgenera_Details_mainR4_bottom_title">Guide de construction de Grass Wonder | Uma musume joli derby</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>1 Il y a quelques mois</span>
<span>By Jack chen</span>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://m.miracleart.cn/fr/faq/1796833110.html" title="<??>: 99 nuits dans la forêt - tous les badges et comment les déverrouiller" class="phpgenera_Details_mainR4_bottom_title"><??>: 99 nuits dans la forêt - tous les badges et comment les déverrouiller</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>4 Il y a quelques semaines</span>
<span>By DDD</span>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://m.miracleart.cn/fr/faq/1796831605.html" title="Uma Musume Pretty Derby Banner Schedule (juillet 2025)" class="phpgenera_Details_mainR4_bottom_title">Uma Musume Pretty Derby Banner Schedule (juillet 2025)</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>1 Il y a quelques mois</span>
<span>By Jack chen</span>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://m.miracleart.cn/fr/faq/1796836699.html" title="Guide de température de Rimworld Odyssey pour les navires et Gravtech" class="phpgenera_Details_mainR4_bottom_title">Guide de température de Rimworld Odyssey pour les navires et Gravtech</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>3 Il y a quelques semaines</span>
<span>By Jack chen</span>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://m.miracleart.cn/fr/faq/1796831905.html" title="Windows Security est vide ou ne montre pas les options" class="phpgenera_Details_mainR4_bottom_title">Windows Security est vide ou ne montre pas les options</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>1 Il y a quelques mois</span>
<span>By 下次還敢</span>
</div>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR3_more">
<a href="http://m.miracleart.cn/fr/article.html">Afficher plus</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>Outils d'IA chauds</h2>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR3_bottom">
<div id="377j5v51b" class="phpmain_tab2_mids_top">
<a href="http://m.miracleart.cn/fr/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/fr/ai/undress-ai-tool" title="Undress AI Tool" class="phpmain_tab2_mids_title">
<h3>Undress AI Tool</h3>
</a>
<p>Images de déshabillage gratuites</p>
</div>
</div>
<div id="377j5v51b" class="phpmain_tab2_mids_top">
<a href="http://m.miracleart.cn/fr/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/fr/ai/undresserai-undress" title="Undresser.AI Undress" class="phpmain_tab2_mids_title">
<h3>Undresser.AI Undress</h3>
</a>
<p>Application basée sur l'IA pour créer des photos de nu réalistes</p>
</div>
</div>
<div id="377j5v51b" class="phpmain_tab2_mids_top">
<a href="http://m.miracleart.cn/fr/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/fr/ai/ai-clothes-remover" title="AI Clothes Remover" class="phpmain_tab2_mids_title">
<h3>AI Clothes Remover</h3>
</a>
<p>Outil d'IA en ligne pour supprimer les vêtements des photos.</p>
</div>
</div>
<div id="377j5v51b" class="phpmain_tab2_mids_top">
<a href="http://m.miracleart.cn/fr/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/fr/ai/clothoffio" title="Clothoff.io" class="phpmain_tab2_mids_title">
<h3>Clothoff.io</h3>
</a>
<p>Dissolvant de vêtements AI</p>
</div>
</div>
<div id="377j5v51b" class="phpmain_tab2_mids_top">
<a href="http://m.miracleart.cn/fr/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/fr/ai/video-swap" title="Video Face Swap" class="phpmain_tab2_mids_title">
<h3>Video Face Swap</h3>
</a>
<p>échangez les visages dans n'importe quelle vidéo sans effort grace à notre outil d'échange de visage AI entièrement gratuit?!</p>
</div>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR3_more">
<a href="http://m.miracleart.cn/fr/ai">Afficher plus</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>Article chaud</h2>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottom">
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://m.miracleart.cn/fr/faq/1796832397.html" title="Guide de construction de Grass Wonder | Uma musume joli derby" class="phpgenera_Details_mainR4_bottom_title">Guide de construction de Grass Wonder | Uma musume joli derby</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>1 Il y a quelques mois</span>
<span>By Jack chen</span>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://m.miracleart.cn/fr/faq/1796833110.html" title="<??>: 99 nuits dans la forêt - tous les badges et comment les déverrouiller" class="phpgenera_Details_mainR4_bottom_title"><??>: 99 nuits dans la forêt - tous les badges et comment les déverrouiller</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>4 Il y a quelques semaines</span>
<span>By DDD</span>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://m.miracleart.cn/fr/faq/1796831605.html" title="Uma Musume Pretty Derby Banner Schedule (juillet 2025)" class="phpgenera_Details_mainR4_bottom_title">Uma Musume Pretty Derby Banner Schedule (juillet 2025)</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>1 Il y a quelques mois</span>
<span>By Jack chen</span>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://m.miracleart.cn/fr/faq/1796836699.html" title="Guide de température de Rimworld Odyssey pour les navires et Gravtech" class="phpgenera_Details_mainR4_bottom_title">Guide de température de Rimworld Odyssey pour les navires et Gravtech</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>3 Il y a quelques semaines</span>
<span>By Jack chen</span>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://m.miracleart.cn/fr/faq/1796831905.html" title="Windows Security est vide ou ne montre pas les options" class="phpgenera_Details_mainR4_bottom_title">Windows Security est vide ou ne montre pas les options</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>1 Il y a quelques mois</span>
<span>By 下次還敢</span>
</div>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR3_more">
<a href="http://m.miracleart.cn/fr/article.html">Afficher plus</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>Outils chauds</h2>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR3_bottom">
<div id="377j5v51b" class="phpmain_tab2_mids_top">
<a href="http://m.miracleart.cn/fr/toolset/development-tools/92" title="Bloc-notes++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="Bloc-notes++7.3.1" />
</a>
<div id="377j5v51b" class="phpmain_tab2_mids_info">
<a href="http://m.miracleart.cn/fr/toolset/development-tools/92" title="Bloc-notes++7.3.1" class="phpmain_tab2_mids_title">
<h3>Bloc-notes++7.3.1</h3>
</a>
<p>éditeur de code facile à utiliser et gratuit</p>
</div>
</div>
<div id="377j5v51b" class="phpmain_tab2_mids_top">
<a href="http://m.miracleart.cn/fr/toolset/development-tools/93" title="SublimeText3 version chinoise" 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 version chinoise" />
</a>
<div id="377j5v51b" class="phpmain_tab2_mids_info">
<a href="http://m.miracleart.cn/fr/toolset/development-tools/93" title="SublimeText3 version chinoise" class="phpmain_tab2_mids_title">
<h3>SublimeText3 version chinoise</h3>
</a>
<p>Version chinoise, très simple à utiliser</p>
</div>
</div>
<div id="377j5v51b" class="phpmain_tab2_mids_top">
<a href="http://m.miracleart.cn/fr/toolset/development-tools/121" title="Envoyer 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="Envoyer Studio 13.0.1" />
</a>
<div id="377j5v51b" class="phpmain_tab2_mids_info">
<a href="http://m.miracleart.cn/fr/toolset/development-tools/121" title="Envoyer Studio 13.0.1" class="phpmain_tab2_mids_title">
<h3>Envoyer Studio 13.0.1</h3>
</a>
<p>Puissant environnement de développement intégré PHP</p>
</div>
</div>
<div id="377j5v51b" class="phpmain_tab2_mids_top">
<a href="http://m.miracleart.cn/fr/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/fr/toolset/development-tools/469" title="Dreamweaver CS6" class="phpmain_tab2_mids_title">
<h3>Dreamweaver CS6</h3>
</a>
<p>Outils de développement Web visuel</p>
</div>
</div>
<div id="377j5v51b" class="phpmain_tab2_mids_top">
<a href="http://m.miracleart.cn/fr/toolset/development-tools/500" title="SublimeText3 version 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 version Mac" />
</a>
<div id="377j5v51b" class="phpmain_tab2_mids_info">
<a href="http://m.miracleart.cn/fr/toolset/development-tools/500" title="SublimeText3 version Mac" class="phpmain_tab2_mids_title">
<h3>SublimeText3 version Mac</h3>
</a>
<p>Logiciel d'édition de code au niveau de Dieu (SublimeText3)</p>
</div>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR3_more">
<a href="http://m.miracleart.cn/fr/ai">Afficher plus</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>Sujets chauds</h2>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottom">
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://m.miracleart.cn/fr/faq/laravel-tutori" title="Tutoriel Laravel" class="phpgenera_Details_mainR4_bottom_title">Tutoriel 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>1601</span>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/tiezi.png" alt="" />
<span>29</span>
</div>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://m.miracleart.cn/fr/faq/php-tutorial" title="Tutoriel PHP" class="phpgenera_Details_mainR4_bottom_title">Tutoriel 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>1502</span>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/tiezi.png" alt="" />
<span>276</span>
</div>
</div>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR3_more">
<a href="http://m.miracleart.cn/fr/faq/zt">Afficher plus</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/fr/faq/1796836217.html" title="Comment faire une demande HTTP dans Node.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/175234432058757.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Comment faire une demande HTTP dans Node.js?" />
</a>
<a href="http://m.miracleart.cn/fr/faq/1796836217.html" title="Comment faire une demande HTTP dans Node.js?" class="phphistorical_Version2_mids_title">Comment faire une demande HTTP dans Node.js?</a>
<span id="377j5v51b" class="Articlelist_txts_time">Jul 13, 2025 am 02:18 AM</span>
<p class="Articlelist_txts_p">Il existe trois fa?ons courantes d'initier des demandes HTTP dans Node.js: utilisez des modules intégrés, Axios et Node-Fetch. 1. Utilisez le module HTTP / HTTPS intégré sans dépendances, ce qui convient aux scénarios de base, mais nécessite un traitement manuel de la couture des données et de la surveillance des erreurs, tels que l'utilisation de https.get () pour obtenir des données ou envoyer des demandes de post via .write (); 2.AXIOS est une bibliothèque tierce basée sur la promesse. Il a une syntaxe concise et des fonctions puissantes, prend en charge l'async / attendre, la conversion JSON automatique, l'intercepteur, etc. Il est recommandé de simplifier les opérations de demande asynchrones; 3.Node-Fetch fournit un style similaire à la récupération du navigateur, basé sur la promesse et la syntaxe simple</p>
</div>
<div id="377j5v51b" class="phphistorical_Version2_mids">
<a href="http://m.miracleart.cn/fr/faq/1796836292.html" title="Types de données JavaScript: référence primitive vs" class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/431/639/175234579081669.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Types de données JavaScript: référence primitive vs" />
</a>
<a href="http://m.miracleart.cn/fr/faq/1796836292.html" title="Types de données JavaScript: référence primitive vs" class="phphistorical_Version2_mids_title">Types de données JavaScript: référence primitive vs</a>
<span id="377j5v51b" class="Articlelist_txts_time">Jul 13, 2025 am 02:43 AM</span>
<p class="Articlelist_txts_p">Les types de données JavaScript sont divisés en types primitifs et types de référence. Les types primitifs incluent la cha?ne, le nombre, le booléen, le nul, un non défini et le symbole. Les valeurs sont immuables et les copies sont copiées lors de l'attribution des valeurs, de sorte qu'elles ne se affectent pas; Les types de référence tels que les objets, les tableaux et les fonctions stockent les adresses de mémoire, et les variables pointant vers le même objet s'afferchent mutuellement. Le typeof et l'instance de OFF peuvent être utilisés pour déterminer les types, mais prêtent attention aux problèmes historiques de typeofnull. Comprendre ces deux types de différences peut aider à écrire un code plus stable et fiable.</p>
</div>
<div id="377j5v51b" class="phphistorical_Version2_mids">
<a href="http://m.miracleart.cn/fr/faq/1796832745.html" title="Objet JavaScript Time, quelqu'un construit un site Web Eactexe, plus rapide sur Google Chrome, etc." class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/246/273/173914572643912.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Objet JavaScript Time, quelqu'un construit un site Web Eactexe, plus rapide sur Google Chrome, etc." />
</a>
<a href="http://m.miracleart.cn/fr/faq/1796832745.html" title="Objet JavaScript Time, quelqu'un construit un site Web Eactexe, plus rapide sur Google Chrome, etc." class="phphistorical_Version2_mids_title">Objet JavaScript Time, quelqu'un construit un site Web Eactexe, plus rapide sur Google Chrome, etc.</a>
<span id="377j5v51b" class="Articlelist_txts_time">Jul 08, 2025 pm 02:27 PM</span>
<p class="Articlelist_txts_p">Bonjour, développeurs JavaScript! Bienvenue dans JavaScript News de cette semaine! Cette semaine, nous nous concentrerons sur: le différend de marque d'Oracle avec Deno, les nouveaux objets Time JavaScript sont pris en charge par les navigateurs, les mises à jour Google Chrome et certains outils de développeurs puissants. Commen?ons! Le différend de marque d'Oracle avec la tentative de Deno Oracle d'enregistrer une marque "JavaScript" a provoqué la controverse. Ryan Dahl, le créateur de Node.js et Deno, a déposé une pétition pour annuler la marque, et il pense que JavaScript est un niveau ouvert et ne devrait pas être utilisé par Oracle</p>
</div>
<div id="377j5v51b" class="phphistorical_Version2_mids">
<a href="http://m.miracleart.cn/fr/faq/1796832608.html" title="Gestion des promesses: cha?nage, gestion des erreurs et combinateurs de promesses en javascript" class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/175191360175213.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Gestion des promesses: cha?nage, gestion des erreurs et combinateurs de promesses en javascript" />
</a>
<a href="http://m.miracleart.cn/fr/faq/1796832608.html" title="Gestion des promesses: cha?nage, gestion des erreurs et combinateurs de promesses en javascript" class="phphistorical_Version2_mids_title">Gestion des promesses: cha?nage, gestion des erreurs et combinateurs de promesses en javascript</a>
<span id="377j5v51b" class="Articlelist_txts_time">Jul 08, 2025 am 02:40 AM</span>
<p class="Articlelist_txts_p">La promesse est le mécanisme central pour gérer les opérations asynchrones en JavaScript. Comprendre les appels de cha?ne, la gestion des erreurs et les combinants est la clé pour ma?triser leurs applications. 1. L'appel de la cha?ne renvoie une nouvelle promesse à travers. Puis () pour réaliser la concaténation des processus asynchrones. Chaque .then () re?oit le résultat précédent et peut renvoyer une valeur ou une promesse; 2. La gestion des erreurs doit utiliser .catch () pour attraper des exceptions pour éviter les défaillances silencieuses, et peut renvoyer la valeur par défaut dans Catch pour continuer le processus; 3. Combinateurs tels que promesse.all () (réussi avec succès uniquement après tout succès), promesse.race () (le premier achèvement est retourné) et promesse.allsetTled () (en attente de toutes les achèvements)</p>
</div>
<div id="377j5v51b" class="phphistorical_Version2_mids">
<a href="http://m.miracleart.cn/fr/faq/1796832618.html" title="Qu'est-ce que l'API Cache et comment est-elle utilisée avec les travailleurs du service?" class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/175191380054750.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Qu'est-ce que l'API Cache et comment est-elle utilisée avec les travailleurs du service?" />
</a>
<a href="http://m.miracleart.cn/fr/faq/1796832618.html" title="Qu'est-ce que l'API Cache et comment est-elle utilisée avec les travailleurs du service?" class="phphistorical_Version2_mids_title">Qu'est-ce que l'API Cache et comment est-elle utilisée avec les travailleurs du service?</a>
<span id="377j5v51b" class="Articlelist_txts_time">Jul 08, 2025 am 02:43 AM</span>
<p class="Articlelist_txts_p">Cacheapi est un outil fourni par le navigateur pour mettre en cache les demandes de réseau, qui est souvent utilisée en conjonction avec travailleur de service pour améliorer les performances du site Web et l'expérience hors ligne. 1. Il permet aux développeurs de stocker manuellement des ressources telles que des scripts, des feuilles de style, des photos, etc.; 2. Il peut faire correspondre les réponses du cache en fonction des demandes; 3. Il prend en charge la suppression des caches spécifiques ou la nettoyage du cache entier; 4. Il peut mettre en ?uvre des stratégies de priorité de cache ou de priorité de réseau grace à l'écoute des événements Fetch; 5. Il est souvent utilisé pour le support hors ligne, accélérez la vitesse d'accès répétée, préchargement des ressources clés et du contenu de mise à jour des antécédents; 6. Lorsque vous l'utilisez, vous devez faire attention au contr?le de la version du cache, aux restrictions de stockage et à la différence entre le mécanisme de mise en cache HTTP.</p>
</div>
<div id="377j5v51b" class="phphistorical_Version2_mids">
<a href="http://m.miracleart.cn/fr/faq/1796832563.html" title="JS Roundup: une plongée profonde dans la boucle d'événement JavaScript" class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/431/639/175191266081499.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="JS Roundup: une plongée profonde dans la boucle d'événement JavaScript" />
</a>
<a href="http://m.miracleart.cn/fr/faq/1796832563.html" title="JS Roundup: une plongée profonde dans la boucle d'événement JavaScript" class="phphistorical_Version2_mids_title">JS Roundup: une plongée profonde dans la boucle d'événement JavaScript</a>
<span id="377j5v51b" class="Articlelist_txts_time">Jul 08, 2025 am 02:24 AM</span>
<p class="Articlelist_txts_p">La boucle d'événement de JavaScript gère les opérations asynchrones en coordonnant les piles d'appels, les webapis et les files d'attente de taches. 1. La pile d'appels exécute du code synchrone, et lors de la rencontre de taches asynchrones, il est remis à WebAPI pour le traitement; 2. Une fois que le WebAPI a terminé la tache en arrière-plan, il met le rappel dans la file d'attente correspondante (macro tache ou micro tache); 3. La boucle d'événement vérifie si la pile d'appels est vide. S'il est vide, le rappel est retiré de la file d'attente et poussé dans la pile d'appels pour l'exécution; 4. Micro taches (comme Promise. puis) ??prendre la priorité sur les taches macro (telles que Settimeout); 5. Comprendre la boucle d'événements permet d'éviter de bloquer le thread principal et d'optimiser l'ordre d'exécution du code.</p>
</div>
<div id="377j5v51b" class="phphistorical_Version2_mids">
<a href="http://m.miracleart.cn/fr/faq/1796832598.html" title="Comprendre l'événement bouillonnant et capturer dans les événements JavaScript 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/175191340168611.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Comprendre l'événement bouillonnant et capturer dans les événements JavaScript DOM" />
</a>
<a href="http://m.miracleart.cn/fr/faq/1796832598.html" title="Comprendre l'événement bouillonnant et capturer dans les événements JavaScript DOM" class="phphistorical_Version2_mids_title">Comprendre l'événement bouillonnant et capturer dans les événements JavaScript DOM</a>
<span id="377j5v51b" class="Articlelist_txts_time">Jul 08, 2025 am 02:36 AM</span>
<p class="Articlelist_txts_p">Les bulles d'événements se propagent de l'élément cible vers l'extérieur vers le n?ud d'ancêtre, tandis que la capture d'événements se propage de la couche externe vers l'intérieur vers l'élément cible. 1. événements Bubbles: Après avoir cliqué sur l'élément enfant, l'événement déclenche l'auditeur de l'élément parent vers le haut. Par exemple, après avoir cliqué sur le bouton, il sortira d'abord cliqué sur l'enfant, puis parent. 2. Capture d'événement: définissez le troisième paramètre sur true, afin que l'auditeur soit exécuté dans l'étape de capture, tels que le déclenchement de l'écouteur de capture de l'élément parent avant de cliquer sur le bouton. 3. Les utilisations pratiques incluent la gestion unifiée des événements d'éléments enfants, le prétraitement d'interception et l'optimisation des performances. 4. Le flux d'événements DOM est divisé en trois étapes: capture, cible et bulle, et l'écouteur par défaut est exécuté dans l'étape de la bulle.</p>
</div>
<div id="377j5v51b" class="phphistorical_Version2_mids">
<a href="http://m.miracleart.cn/fr/faq/1796833774.html" title="Un tour d'horizon des fonctions d'ordre supérieur au-delà de la carte et du filtre" 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/175211891141086.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Un tour d'horizon des fonctions d'ordre supérieur au-delà de la carte et du filtre" />
</a>
<a href="http://m.miracleart.cn/fr/faq/1796833774.html" title="Un tour d'horizon des fonctions d'ordre supérieur au-delà de la carte et du filtre" class="phphistorical_Version2_mids_title">Un tour d'horizon des fonctions d'ordre supérieur au-delà de la carte et du filtre</a>
<span id="377j5v51b" class="Articlelist_txts_time">Jul 10, 2025 am 11:41 AM</span>
<p class="Articlelist_txts_p">Dans les tableaux JavaScript, en plus de la carte et du filtre, il existe d'autres méthodes puissantes et rarement utilisées. 1. La réduction peut non seulement résumer, mais également compter, se regrouper, aplatir les tableaux et construire de nouvelles structures; 2. Find et FindIndex sont utilisés pour trouver des éléments ou des index individuels; 3.Il et tout sont utilisés pour déterminer si les conditions existent ou que toutes les personnes se rencontrent; 4.Sort peut être trié mais changera le tableau d'origine; 5. Faites attention à la copie du tableau lorsque vous l'utilisez pour éviter les effets secondaires. Ces méthodes rendent le code plus concis et efficace.</p>
</div>
</div>
<a href="http://m.miracleart.cn/fr/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>Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！</p>
</div>
<div id="377j5v51b" class="footermid">
<a href="http://m.miracleart.cn/fr/about/us.html">à propos de nous</a>
<a href="http://m.miracleart.cn/fr/about/disclaimer.html">Clause de non-responsabilité</a>
<a href="http://m.miracleart.cn/fr/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="2wkog" class="pl_css_ganrao" style="display: none;"><dfn id="2wkog"><table id="2wkog"><th id="2wkog"></th></table></dfn><kbd id="2wkog"></kbd><samp id="2wkog"></samp><source id="2wkog"></source><menu id="2wkog"></menu><dl id="2wkog"></dl><samp id="2wkog"></samp><button id="2wkog"></button><optgroup id="2wkog"></optgroup><dd id="2wkog"><pre id="2wkog"><bdo id="2wkog"></bdo></pre></dd><tr id="2wkog"><abbr id="2wkog"><fieldset id="2wkog"></fieldset></abbr></tr><tr id="2wkog"></tr><dd id="2wkog"><tbody id="2wkog"><s id="2wkog"></s></tbody></dd><tfoot id="2wkog"></tfoot><pre id="2wkog"><optgroup id="2wkog"><menu id="2wkog"></menu></optgroup></pre><table id="2wkog"></table><cite id="2wkog"><dl id="2wkog"><pre id="2wkog"></pre></dl></cite><tr id="2wkog"></tr><tr id="2wkog"></tr><object id="2wkog"><dfn id="2wkog"><kbd id="2wkog"></kbd></dfn></object><xmp id="2wkog"><small id="2wkog"><rt id="2wkog"></rt></small></xmp><menu id="2wkog"></menu><tr id="2wkog"></tr><strong id="2wkog"><sup id="2wkog"><acronym id="2wkog"></acronym></sup></strong><center id="2wkog"></center><s id="2wkog"></s><tfoot id="2wkog"></tfoot><center id="2wkog"></center><tbody id="2wkog"><del id="2wkog"><table id="2wkog"></table></del></tbody><samp id="2wkog"><small id="2wkog"><td id="2wkog"></td></small></samp><tr id="2wkog"></tr><tr id="2wkog"><small id="2wkog"><samp id="2wkog"></samp></small></tr><th id="2wkog"></th><em id="2wkog"><rt id="2wkog"><center id="2wkog"></center></rt></em><del id="2wkog"><center id="2wkog"><input id="2wkog"></input></center></del><strong id="2wkog"><th id="2wkog"><button id="2wkog"></button></th></strong><wbr id="2wkog"></wbr><th id="2wkog"><button id="2wkog"><em id="2wkog"></em></button></th><pre id="2wkog"></pre><dfn id="2wkog"><center id="2wkog"><tbody id="2wkog"></tbody></center></dfn><abbr id="2wkog"></abbr><tr id="2wkog"></tr><tr id="2wkog"><small id="2wkog"><dfn id="2wkog"></dfn></small></tr><center id="2wkog"><em id="2wkog"><tr id="2wkog"></tr></em></center><table id="2wkog"></table><acronym id="2wkog"><li id="2wkog"><dd id="2wkog"></dd></li></acronym><menu id="2wkog"><tfoot id="2wkog"><em id="2wkog"></em></tfoot></menu><tbody id="2wkog"></tbody><nav id="2wkog"></nav><option id="2wkog"></option><center id="2wkog"><nav id="2wkog"><strike id="2wkog"></strike></nav></center><dfn id="2wkog"></dfn><dl id="2wkog"><delect id="2wkog"><bdo id="2wkog"></bdo></delect></dl><nav id="2wkog"><blockquote id="2wkog"><em id="2wkog"></em></blockquote></nav><blockquote id="2wkog"></blockquote><em id="2wkog"><rt id="2wkog"><center id="2wkog"></center></rt></em><kbd id="2wkog"><tbody id="2wkog"><blockquote id="2wkog"></blockquote></tbody></kbd><object id="2wkog"></object><abbr id="2wkog"></abbr><noframes id="2wkog"><fieldset id="2wkog"><samp id="2wkog"></samp></fieldset></noframes><input id="2wkog"></input><xmp id="2wkog"></xmp><acronym id="2wkog"><li id="2wkog"><code id="2wkog"></code></li></acronym><acronym id="2wkog"><small id="2wkog"><td id="2wkog"></td></small></acronym><cite id="2wkog"></cite><acronym id="2wkog"></acronym><source id="2wkog"></source><wbr id="2wkog"></wbr><em id="2wkog"></em><center id="2wkog"><tbody id="2wkog"><tr id="2wkog"></tr></tbody></center><delect id="2wkog"></delect><tbody id="2wkog"></tbody><wbr id="2wkog"><center id="2wkog"><tbody id="2wkog"></tbody></center></wbr><blockquote id="2wkog"></blockquote><code id="2wkog"></code><center id="2wkog"><acronym id="2wkog"><menu id="2wkog"></menu></acronym></center><tfoot id="2wkog"><em id="2wkog"><cite id="2wkog"></cite></em></tfoot><noframes id="2wkog"><li id="2wkog"><tfoot id="2wkog"></tfoot></li></noframes><th id="2wkog"></th><object id="2wkog"><del id="2wkog"><code id="2wkog"></code></del></object><kbd id="2wkog"></kbd><tr id="2wkog"></tr><dd id="2wkog"></dd><object id="2wkog"></object><blockquote id="2wkog"><kbd id="2wkog"><optgroup id="2wkog"></optgroup></kbd></blockquote><samp id="2wkog"><code id="2wkog"><dfn id="2wkog"></dfn></code></samp><td id="2wkog"></td><s id="2wkog"></s><center id="2wkog"></center><center id="2wkog"></center><dl id="2wkog"><pre id="2wkog"><s id="2wkog"></s></pre></dl><source id="2wkog"></source><abbr id="2wkog"></abbr><option id="2wkog"><optgroup id="2wkog"><xmp id="2wkog"></xmp></optgroup></option><tr id="2wkog"></tr><dd id="2wkog"></dd><acronym id="2wkog"><nav id="2wkog"><rt id="2wkog"></rt></nav></acronym><bdo id="2wkog"></bdo></div>
</html>