<bdo id="qusgo"></bdo>
anda harus membuat panggung dan menarik sesuatu di dalamnya, seperti segi empat tepat, bulatan, atau bentuk lain: <\/p>\n
\/\/ 創(chuàng)建舞臺\n var stage = acgraph.create('stage-container');\n \/\/ 繪制矩形\n var stage.rect(25, 50, 350, 300);<\/pre>\n Berikut adalah contoh pada Codepen di mana kita melangkah lebih jauh dan menarik simbol Deathly Hallows. <\/p>\n
Karya pertama kami <\/h2>\n isi, strok dan corak mengisi <\/h3>\n
apa -apa bentuk atau laluan boleh berwarna menggunakan tetapan mengisi dan tetapan strok. Segala -galanya mempunyai strok (sempadan), tetapi hanya bentuk dan laluan tertutup yang mempunyai padding. Tetapan isi dan strok sangat kaya, dan anda boleh menggunakan kecerunan linear atau bulat untuk mengisi dan strok. Di samping itu, garisan boleh bertitik dan menyokong imej yang mengisi dengan pelbagai mod jubin. Tetapi ini semua perkara yang cukup standard yang anda dapati di hampir mana -mana perpustakaan. Apa yang menjadikan GraphicsJS istimewa adalah ciri pengisian dan coraknya, yang bukan sahaja membolehkan anda menggunakan 32 (!) Corak mengisi mesh yang tersedia secara langsung, tetapi juga membolehkan anda dengan mudah membuat corak tersuai yang diperbuat daripada bentuk atau teks. <\/p>\n
Sekarang, mari kita lihat apa sebenarnya yang dapat dicapai! Saya akan melukis lukisan seorang lelaki yang berdiri di dekat rumah dan mengisi dengan corak dan warna yang berbeza untuk meningkatkannya. Untuk kesederhanaan, mari kita menjadikannya lukisan seni kebudak -budakan (dan cuba untuk tidak melibatkan kekasaran seni). Itu sahaja: <\/p>\n
\/\/ 創(chuàng)建舞臺\n var stage = acgraph.create('stage-container');\n\n \/\/ 繪制框架\n var frame = stage.rect(25, 50, 350, 300);\n\n \/\/ 繪制房子\n var walls = stage.rect(50, 250, 200, 100);\n var roof = stage.path()\n .moveTo(50, 250)\n .lineTo(150, 180)\n .lineTo(250, 250)\n .close();\n\n \/\/ 繪制一個人\n var head = stage.circle(330, 280, 10);\n var neck = stage.path().moveTo(330, 290).lineTo(330, 300);\n var kilt = stage.triangleUp(330, 320, 20);\n var rightLeg = stage.path().moveTo(320, 330).lineTo(320, 340);\n var leftLeg = stage.path().moveTo(340, 330).lineTo(340, 340);<\/pre>\n Lihat hasil pada codepen. <\/p>\n
Seperti yang anda lihat, kami kini menggunakan pembolehubah - semua kaedah lukisan kandungan pada panggung mengembalikan rujukan kepada objek yang dicipta dan pautan ini boleh digunakan untuk menukar atau memadam objek. <\/p>\n
Juga perhatikan bagaimana panggilan rantai (mis. stage.path().moveTo(320, 330).lineTo(320, 340);<\/code>) berada di mana -mana di GraphicsJS, yang membantu memendekkan kod. Panggilan rantaian hendaklah digunakan dengan berhati -hati, tetapi jika digunakan dengan betul, ia menjadikan kod itu lebih padat dan lebih mudah dibaca. <\/p> Sekarang, mari kita tangankan halaman pewarna ini kepada anak dan biarkan mereka melukis. Kerana walaupun kanak -kanak dapat menguasai teknik berikut: <\/p>\n
\n \n \n \n GraphicsJS Basic Example<\/title> \n <\/head>\n <body>
<h1><a href="http://ipnx.cn/">亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱</a></h1>\n <div class="wjcelcm34c" id=\"stage-container\" style=\"width: 400px; height: 375px;\"><\/div>\n\n <??>\n <??>\n <\/body>\n <\/html><\/pre>\n<p> Ini adalah bagaimana contoh kita kelihatan sekarang. <\/p>\n<p> Sekarang, kita mempunyai gambar Highlander yang berdiri di sebelah kilt, berdiri di dekat istana bata dengan jerami di atas bumbung. Kita juga boleh berisiko mengatakan bahawa ini sememangnya karya seni yang kita mahu mendapatkan hak cipta. Mari kita lakukan ini menggunakan corak mengisi berdasarkan teks tersuai: <em>\n<\/em>\n<\/p> seperti yang anda lihat, ini mudah dilakukan: Anda membuat contoh objek teks, kemudian membentuk corak di panggung dan meletakkan teks ke dalam corak. <pre class='brush:php;toolbar:false;'> \/\/ 創(chuàng)建舞臺\n var stage = acgraph.create('stage-container');\n \/\/ 繪制矩形\n var stage.rect(25, 50, 350, 300);<\/pre>\n<p> Lihat Rumah Hak Cipta Warna\/Graphicsjs pada Codepen. <\/p>\n<p> Buat permainan seni teka -teki dalam kurang daripada 50 baris kod <\/p>\n<h2> Di bahagian seterusnya artikel ini, saya ingin menunjukkan kepada anda cara membuat permainan seperti cookie clicker menggunakan GraphicsJS dalam kurang daripada 50 baris kod. <\/h2>\n<p> Nama permainan adalah <\/p> \"menyapu jalan -jalan di angin\" <p>, dan pemain memainkan peranan seorang pemulung dan menyapu jalan -jalan pada petang berangin pada musim luruh. Permainan ini menggunakan beberapa kod dari contoh daun yang dihasilkan oleh program di galeri GraphicsJS. <em>\n<\/em> Anda boleh melihat permainan selesai di Codepen (atau akhir artikel). <\/p>\n<p> lapisan, zindex dan maya dom <\/p>\n<h3> kita mula -mula membuat pentas (seperti yang dinyatakan sebelum ini) dan kemudian mengisytiharkan beberapa pembolehubah awal: <\/h3>\n<p>\n<\/p> Untuk permainan ini, kami akan menggunakan lapisan - objek dalam grafik yang digunakan untuk elemen kumpulan. Jika anda ingin menggunakan perubahan yang serupa dengan elemen (seperti transformasi), anda mesti kumpulan elemen. Anda boleh menukar lapisan dalam mod jeda (lebih lanjut mengenai ini kemudian), yang dapat meningkatkan prestasi dan pengalaman pengguna. <pre class='brush:php;toolbar:false;'> \/\/ 創(chuàng)建舞臺\n var stage = acgraph.create('stage-container');\n\n \/\/ 繪制框架\n var frame = stage.rect(25, 50, 350, 300);\n\n \/\/ 繪制房子\n var walls = stage.rect(50, 250, 200, 100);\n var roof = stage.path()\n .moveTo(50, 250)\n .lineTo(150, 180)\n .lineTo(250, 250)\n .close();\n\n \/\/ 繪制一個人\n var head = stage.circle(330, 280, 10);\n var neck = stage.path().moveTo(330, 290).lineTo(330, 300);\n var kilt = stage.triangleUp(330, 320, 20);\n var rightLeg = stage.path().moveTo(320, 330).lineTo(320, 340);\n var leftLeg = stage.path().moveTo(340, 330).lineTo(340, 340);<\/pre>\n<p> Dalam demo ini, kami menggunakan fungsi lapisan untuk membantu kami mengumpulkan daun bersama -sama dan mengelakkan mereka menutup label (ia memberitahu kami berapa banyak daun disapu). Untuk melakukan ini, kami membuat tag dan panggil kaedah <\/p>, yang mewujudkan lapisan mengikat panggung. Kami menetapkan sifat <p> lapisan ini ke harta <code>stage.layer<\/code> di bawah label. <code>zIndex<\/code>\n<code>zIndex<\/code>\n<\/p> Selepas melakukan ini, kita dapat memastikan bahawa mereka tidak menulis semula teks tidak kira berapa banyak daun yang kita buat di lapisan. <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> Convert <\/p>\n<h3> Seterusnya, mari tambahkan fungsi untuk menarik daun kita. Ini menggunakan API Transformasi GraphicsJS yang mudah, yang membolehkan anda bergerak, skala, berputar, dan memotong unsur -unsur dan kumpulan elemen. Ini adalah alat yang sangat kuat apabila digabungkan dengan lapisan dan DOM maya. <\/h3>\n<p>\n<\/p> anda akan melihat bahawa setiap jalan dicipta dengan cara yang sama, tetapi kemudian penukaran akan dilakukan. Ini akan menghasilkan corak daun rawak yang sangat indah. <pre class='brush:php;toolbar:false;'> \/\/ 169 是版權(quán)符號的字符代碼\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 \/\/ 用圖案填充整個圖像\n frame.fill(pattern_font);<\/pre>\n<p> Peristiwa Pemprosesan <\/p>\n<h3> Sebarang objek, peringkat, dan lapisan dalam GraphicsJs boleh mengendalikan peristiwa. Senarai lengkap acara yang disokong boleh didapati di API EventType. Terdapat empat acara khas di pentas untuk mengawal rendering. <\/h3><p> Dalam contoh permainan ini, kami menggunakan pendengar acara yang melekat pada objek daun supaya apabila pengguna melayang ke atas mereka, mereka hilang satu demi satu. Untuk melakukan ini, tambahkan kod berikut ke bahagian bawah fungsi <code>drawLeaves<\/code>, sebelum pernyataan <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="wjcelcm34c" id=\"stage-container\" style=\"width: 400px; height: 375px;\"><\/div>\n\n <??>\n <??>\n <\/body>\n <\/html><\/pre>\n<p> di sini kita juga dapat melihat bahawa kita menggunakan lapisan untuk mengira daun. <\/p>\n<pre class='brush:php;toolbar:false;'> \/\/ 創(chuàng)建舞臺\n var stage = acgraph.create('stage-container');\n \/\/ 繪制矩形\n var stage.rect(25, 50, 350, 300);<\/pre>\n<p> Sila ambil perhatian bahawa kami tidak menyimpan jumlah daun di sini. Oleh kerana kita menambah daun ke lapisan tertentu dan mengeluarkan daun dari mereka, ini membolehkan kita mengesan berapa banyak elemen kanak -kanak yang kita ada (dan oleh itu berapa banyak daun yang tersisa). <\/p>\n<p> GraphicsJS menyediakan DOM maya yang merupakan abstrak, ringan dan berasingan dari pelaksanaan SVG\/VML khusus penyemak imbas. Ia sangat berguna untuk melakukan banyak perkara hebat seperti menjejaki semua objek dan lapisan, menggunakan transformasi kepada kumpulan, dan mengoptimumkan rendering dengan bantuan membolehkan kami mengesan dan mengawal proses rendering. <\/p>\n<h3> Pengoptimuman Prestasi <\/h3>\n<p> DOM maya dan pengendali acara membolehkan pengguna GraphicsJS mengawal rendering. Artikel prestasi dapat membantu anda memahami hubungan antara kandungan ini. <\/p>\n<p> Apabila menjana daun dalam permainan, kita perlu berhenti sejenak apabila menambahkan daun baru, dan hanya menyambung semula rendering selepas semua perubahan selesai: <\/p>\n<pre class='brush:php;toolbar:false;'> \/\/ 創(chuàng)建舞臺\n var stage = acgraph.create('stage-container');\n\n \/\/ 繪制框架\n var frame = stage.rect(25, 50, 350, 300);\n\n \/\/ 繪制房子\n var walls = stage.rect(50, 250, 200, 100);\n var roof = stage.path()\n .moveTo(50, 250)\n .lineTo(150, 180)\n .lineTo(250, 250)\n .close();\n\n \/\/ 繪制一個人\n var head = stage.circle(330, 280, 10);\n var neck = stage.path().moveTo(330, 290).lineTo(330, 300);\n var kilt = stage.triangleUp(330, 320, 20);\n var rightLeg = stage.path().moveTo(320, 330).lineTo(320, 340);\n var leftLeg = stage.path().moveTo(340, 330).lineTo(340, 340);<\/pre>\n<p> Kaedah ini menangani unsur -unsur baru menjadikan daun baru muncul dengan segera. <\/p>\n<p> Akhirnya, mulakan segala -galanya dengan memanggil <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> Hasil Akhir <\/h3>\n<p> Lihat Street Cleaner\/Graphicsjs pada Codepen. <\/p>\n<h2> Kesimpulan <\/h2>\n<p> Peralihan ke HTML5 telah mengubah rangkaian. Ketika datang ke aplikasi web moden dan juga laman web yang mudah, kami sering menghadapi tugas yang memerlukan pemprosesan imej. Walaupun mustahil untuk mencari penyelesaian yang berfungsi dengan baik dalam setiap kes, anda harus mempertimbangkan perpustakaan GraphicsJS. Ia adalah sumber terbuka, teguh, dengan sokongan penyemak imbas yang sangat baik dan banyak ciri yang menjadikannya menyeronokkan, mudah dan tentu saja berguna. <\/p>\n<p> Saya suka mendengar maklum balas anda di Grphicsjs dalam komen di bawah. Adakah anda sudah menggunakannya? Adakah anda akan mempertimbangkan untuk menggunakannya untuk projek baru? Saya suka tahu mengapa, atau mengapa tidak menggunakannya. Saya juga menulis senarai perpustakaan dan artikel lukisan utama JavaScript yang akan membandingkan dan membandingkan semuanya. Jangan ragu untuk menunjukkan ciri -ciri yang ingin anda lihat di sana. <\/p>\n<h2> pautan untuk bacaan selanjutnya <\/h2>\n<ul>\n<li> Maklumat Umum <ul>\n<li> svg <\/li>\n<li> kanvas <\/li>\n<li> SVG vs Canvas <\/li>\n<\/ul>\n<\/li>\n<li> perpustakaan <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 pada GitHub <\/li>\n<li> Dokumentasi GraphicsJS <\/li>\n<li> GraphicsJS API Rujukan <\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<h2> soalan yang sering ditanya mengenai graphicsjs <\/h2>\n<h3> Bagaimana grafik berbeza dari perpustakaan grafik javascript lain? <\/h3>\n<p> Graphicsjs menonjol untuk sifatnya yang kuat dan ringan. Ia adalah perpustakaan yang kuat yang membolehkan pemaju untuk menarik dan menghidupkan sebarang grafik dengan ketepatan yang tinggi dan prestasi tinggi. Tidak seperti perpustakaan lain, GraphicsJS menyediakan satu set ciri yang komprehensif termasuk lapisan, kecerunan, corak, dan banyak lagi tanpa menjejaskan kelajuan atau kecekapan. Ia juga menyokong semua pelayar moden, menjadikannya pilihan serba boleh untuk pemaju. <\/p>\n<h3> Bagaimana untuk memulakan dengan Graphicsjs? <\/h3>\n<p> Untuk memulakan dengan GraphicsJS, anda perlu memasukkan perpustakaan GraphicsJS dalam fail HTML anda. Anda boleh memuat turun perpustakaan dari laman web rasmi atau menggunakan CDN. Sebaik sahaja perpustakaan dimasukkan, anda boleh mula membuat grafik dengan memanggil fungsi dan kaedah yang sesuai yang disediakan oleh perpustakaan. <\/p>\n<h3> Bolehkah saya membuat animasi kompleks menggunakan Graphicsjs? <\/h3>\n<p> Ya, GraphicsJS direka untuk mengendalikan animasi kompleks dengan mudah. Ia menyediakan satu set ciri animasi yang kaya termasuk fungsi pelonggaran, kelewatan dan jangka masa. Anda boleh menghidupkan sebarang atribut graf, seperti kedudukan, saiz, warna, dan banyak lagi. Ini menjadikan GraphicsJs alat yang berkuasa untuk mewujudkan grafik interaktif dan dinamik. <\/p>\n<h3> Adakah GraphicsJS serasi dengan semua penyemak imbas? <\/h3>\n<p> GraphicsJS direka untuk bersesuaian dengan semua pelayar moden, termasuk Chrome, Firefox, Safari, dan Internet Explorer. Ia menggunakan SVG dan VML untuk rendering, yang semuanya menyokong mereka. Ini memastikan bahawa grafik anda kelihatan konsisten dan berfungsi dengan baik pada platform dan peranti yang berbeza. <\/p>\n<h3> Bagaimana untuk membuat kecerunan menggunakan Graphicsjs? <\/h3>\n<p> Membuat kecerunan dengan GraphicsJS adalah mudah. Anda boleh menggunakan kaedah kecerunan untuk menentukan kecerunan linear atau radial, menentukan warna dan kedudukan, dan kemudian gunakan kecerunan untuk sebarang bentuk. Ini membolehkan anda membuat grafik berwarna -warni dengan mudah. <\/p>\n<h3> Bolehkah saya membuat grafik interaktif menggunakan Graphicsjs? <\/h3>\n<p> Ya, GraphicsJS menyediakan satu set keupayaan pengendalian acara yang membolehkan anda membuat grafik interaktif. Anda boleh melampirkan pendengar acara ke mana -mana graf, yang membolehkan anda bertindak balas terhadap tindakan pengguna seperti klik, pergerakan tetikus, dan banyak lagi. Ini menjadikan GraphicsJs pilihan yang sangat baik untuk membuat aplikasi web interaktif. <\/p>\n<h3> Adakah lapisan sokongan GraphicsJS? <\/h3>\n<p> Ya, GraphicsJS menyokong lapisan, membolehkan anda mengatur grafik ke dalam kumpulan berasingan. Setiap lapisan boleh dikendalikan secara bebas, menjadikannya lebih mudah untuk menguruskan grafik kompleks. Anda juga boleh mengawal penglihatan dan z-order setiap lapisan, yang membolehkan kawalan grafik halus. <\/p>\n<h3> Bagaimana untuk mengoptimumkan grafik saya menggunakan Graphicsjs? <\/h3>\n<p> GraphicsJS menyediakan beberapa ciri yang dapat membantu anda mengoptimumkan grafik anda. Sebagai contoh, anda boleh menggunakan kaedah tanaman untuk menyembunyikan bahagian -bahagian grafik di luar kawasan tertentu, dengan itu mengurangkan jumlah rendering yang diperlukan. Anda juga boleh menggunakan kaedah cache untuk menyimpan output grafik yang diberikan, dengan itu meningkatkan prestasi apabila anda mengecat grafik dengan kerap. <\/p>\n<h3> Bolehkah saya membuat carta dan grafik menggunakan Graphicsjs? <\/h3>\n<p> Walaupun GraphicsJS tidak direka khusus untuk membuat carta dan grafik, keupayaan lukisan dan animasi yang kuat membolehkannya membuat apa -apa jenis grafik, termasuk carta dan grafik. Anda boleh menggunakan kaedah perpustakaan untuk menarik garis, lengkung, segi empat tepat, bulatan, dan banyak lagi untuk membuat pelbagai jenis carta. <\/p>\n<h3> Adakah Graphicsjs percuma untuk digunakan? <\/h3>\n<p> Ya, GraphicsJS adalah perpustakaan sumber terbuka percuma. Anda boleh menggunakannya secara percuma dalam projek anda. Perpustakaan juga diselenggarakan secara aktif untuk memastikan ia selaras dengan piawaian dan teknologi web terkini. <\/p>"} </script>
<meta http-equiv="Cache-Control" content="no-transform" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<script>var V_PATH="/";window.onerror=function(){ return true; };</script>
</head>
<body data-commit-time="2023-12-28T14:50:12+08:00" class="editor_body body2_2">
<link rel="stylesheet" type="text/css" href="/static/csshw/stylehw.css">
<header>
<div id="wjcelcm34c" class="head">
<div id="wjcelcm34c" class="haed_left">
<div id="wjcelcm34c" class="haed_logo">
<a href="http://ipnx.cn/ms/" title="" class="haed_logo_a">
<img src="/static/imghw/logo.png" alt="" class="haed_logoimg">
</a>
</div>
<div id="wjcelcm34c" class="head_nav">
<div id="wjcelcm34c" class="head_navs">
<a href="javascript:;" title="masyarakat" class="head_nava head_nava-template1">masyarakat</a>
<div class="wjcelcm34c" id="dropdown-template1" style="display: none;">
<div id="wjcelcm34c" class="languagechoose">
<a href="http://ipnx.cn/ms/article.html" title="Artikel" class="languagechoosea on">Artikel</a>
<a href="http://ipnx.cn/ms/faq/zt" title="Topik" class="languagechoosea">Topik</a>
<a href="http://ipnx.cn/ms/wenda.html" title="Soal Jawab" class="languagechoosea">Soal Jawab</a>
</div>
</div>
</div>
<div id="wjcelcm34c" class="head_navs">
<a href="javascript:;" title="Belajar" class="head_nava head_nava-template1_1">Belajar</a>
<div class="wjcelcm34c" id="dropdown-template1_1" style="display: none;">
<div id="wjcelcm34c" class="languagechoose">
<a href="http://ipnx.cn/ms/course.html" title="Kursus" class="languagechoosea on">Kursus</a>
<a href="http://ipnx.cn/ms/dic/" title="Kamus Pengaturcaraan" class="languagechoosea">Kamus Pengaturcaraan</a>
</div>
</div>
</div>
<div id="wjcelcm34c" class="head_navs">
<a href="javascript:;" title="Perpustakaan Alatan" class="head_nava head_nava-template1_2">Perpustakaan Alatan</a>
<div class="wjcelcm34c" id="dropdown-template1_2" style="display: none;">
<div id="wjcelcm34c" class="languagechoose">
<a href="http://ipnx.cn/ms/toolset/development-tools" title="Alat pembangunan" class="languagechoosea on">Alat pembangunan</a>
<a href="http://ipnx.cn/ms/toolset/website-source-code" title="Kod sumber laman web" class="languagechoosea">Kod sumber laman web</a>
<a href="http://ipnx.cn/ms/toolset/php-libraries" title="Perpustakaan PHP" class="languagechoosea">Perpustakaan PHP</a>
<a href="http://ipnx.cn/ms/toolset/js-special-effects" title="Kesan khas JS" class="languagechoosea on">Kesan khas JS</a>
<a href="http://ipnx.cn/ms/toolset/website-materials" title="Bahan laman web" class="languagechoosea on">Bahan laman web</a>
<a href="http://ipnx.cn/ms/toolset/extension-plug-ins" title="Pemalam sambungan" class="languagechoosea on">Pemalam sambungan</a>
</div>
</div>
</div>
<div id="wjcelcm34c" class="head_navs">
<a href="http://ipnx.cn/ms/ai" title="Alat AI" class="head_nava head_nava-template1_3">Alat AI</a>
</div>
<div id="wjcelcm34c" class="head_navs">
<a href="javascript:;" title="Masa lapang" class="head_nava head_nava-template1_3">Masa lapang</a>
<div class="wjcelcm34c" id="dropdown-template1_3" style="display: none;">
<div id="wjcelcm34c" class="languagechoose">
<a href="http://ipnx.cn/ms/game" title="Muat Turun Permainan" class="languagechoosea on">Muat Turun Permainan</a>
<a href="http://ipnx.cn/ms/mobile-game-tutorial/" title="Tutorial Permainan" class="languagechoosea">Tutorial Permainan</a>
</div>
</div>
</div>
</div>
</div>
<div id="wjcelcm34c" class="head_search">
<input id="key_words" onkeydown="if (event.keyCode == 13) searchs('ms')" class="search-input" type="text" autocomplete="off" name="keywords" required="required" placeholder="Block,address,transaction,news" value="">
<a href="javascript:;" title="cari" onclick="searchs('ms')"><img src="/static/imghw/find.png" alt="cari"></a>
</div>
<div id="wjcelcm34c" class="head_right">
<div id="wjcelcm34c" class="haed_language">
<a href="javascript:;" class="layui-btn haed_language_btn">Melayu<i class="layui-icon layui-icon-triangle-d"></i></a>
<div class="wjcelcm34c" id="dropdown-template" style="display: none;">
<div id="wjcelcm34c" class="languagechoose">
<a href="javascript:setlang('zh-cn');" title="簡體中文" class="languagechoosea">簡體中文</a>
<a href="javascript:setlang('en');" title="English" class="languagechoosea">English</a>
<a href="javascript:setlang('zh-tw');" title="繁體中文" class="languagechoosea">繁體中文</a>
<a href="javascript:setlang('ja');" title="日本語" class="languagechoosea">日本語</a>
<a href="javascript:setlang('ko');" title="???" class="languagechoosea">???</a>
<a href="javascript:;" title="Melayu" class="languagechoosea">Melayu</a>
<a href="javascript:setlang('fr');" title="Fran?ais" class="languagechoosea">Fran?ais</a>
<a href="javascript:setlang('de');" title="Deutsch" class="languagechoosea">Deutsch</a>
</div>
</div>
</div>
<span id="wjcelcm34c" class="head_right_line"></span>
<div style="display: block;" id="login" class="haed_login ">
<a href="javascript:;" title="Login" class="haed_logina ">Login</a>
</div>
<div style="display: block;" id="reg" class="head_signup login">
<a href="javascript:;" title="singup" class="head_signupa">singup</a>
</div>
</div>
</div>
</header>
<main>
<div id="wjcelcm34c" class="Article_Details_main">
<div id="wjcelcm34c" class="Article_Details_main1">
<div id="wjcelcm34c" class="Article_Details_main1L">
<div id="wjcelcm34c" class="Article_Details_main1Lmain" id="Article_Details_main1Lmain">
<div id="wjcelcm34c" class="Article_Details_main1L1">Jadual Kandungan</div>
<div id="wjcelcm34c" class="Article_Details_main1L2" id="Article_Details_main1L2">
<!-- 左側(cè)懸浮，文章定位標題1 id="Article_Details_main1L2s_1"-->
<div id="wjcelcm34c" class="Article_Details_main1L2s ">
<a href="#mata-utama" title=" mata utama " > mata utama </a>
</div>
<div id="wjcelcm34c" class="Article_Details_main1L2s ">
<a href="#mengapa-memilih-graphicsjs" title=" mengapa memilih graphicsjs " > mengapa memilih graphicsjs </a>
</div>
<div id="wjcelcm34c" class="Article_Details_main1L2s ">
<a href="#Asas-GraphicsJS" title=" Asas GraphicsJS " > Asas GraphicsJS </a>
</div>
<div id="wjcelcm34c" class="Article_Details_main1L2s ">
<a href="#Karya-pertama-kami" title=" Karya pertama kami " > Karya pertama kami </a>
</div>
<div id="wjcelcm34c" class="Article_Details_main1L2s ">
<a href="#isi-strok-dan-corak-mengisi" title=" isi, strok dan corak mengisi " > isi, strok dan corak mengisi </a>
</div>
<div id="wjcelcm34c" class="Article_Details_main1L2s ">
<a href="#Di-bahagian-seterusnya-artikel-ini-saya-ingin-menunjukkan-kepada-anda-cara-membuat-permainan-seperti-cookie-clicker-menggunakan-GraphicsJS-dalam-kurang-daripada-baris-kod" title=" Di bahagian seterusnya artikel ini, saya ingin menunjukkan kepada anda cara membuat permainan seperti cookie clicker menggunakan GraphicsJS dalam kurang daripada 50 baris kod. " > Di bahagian seterusnya artikel ini, saya ingin menunjukkan kepada anda cara membuat permainan seperti cookie clicker menggunakan GraphicsJS dalam kurang daripada 50 baris kod. </a>
</div>
<div id="wjcelcm34c" class="Article_Details_main1L2s ">
<a href="#kita-mula-mula-membuat-pentas-seperti-yang-dinyatakan-sebelum-ini-dan-kemudian-mengisytiharkan-beberapa-pembolehubah-awal" title=" kita mula -mula membuat pentas (seperti yang dinyatakan sebelum ini) dan kemudian mengisytiharkan beberapa pembolehubah awal: " > kita mula -mula membuat pentas (seperti yang dinyatakan sebelum ini) dan kemudian mengisytiharkan beberapa pembolehubah awal: </a>
</div>
<div id="wjcelcm34c" class="Article_Details_main1L2s ">
<a href="#Seterusnya-mari-tambahkan-fungsi-untuk-menarik-daun-kita-Ini-menggunakan-API-Transformasi-GraphicsJS-yang-mudah-yang-membolehkan-anda-bergerak-skala-berputar-dan-memotong-unsur-unsur-dan-kumpulan-elemen-Ini-adalah-alat-yang-sangat-kuat-apabila-digabungkan-dengan-lapisan-dan-DOM-maya" title=" Seterusnya, mari tambahkan fungsi untuk menarik daun kita. Ini menggunakan API Transformasi GraphicsJS yang mudah, yang membolehkan anda bergerak, skala, berputar, dan memotong unsur -unsur dan kumpulan elemen. Ini adalah alat yang sangat kuat apabila digabungkan dengan lapisan dan DOM maya. " > Seterusnya, mari tambahkan fungsi untuk menarik daun kita. Ini menggunakan API Transformasi GraphicsJS yang mudah, yang membolehkan anda bergerak, skala, berputar, dan memotong unsur -unsur dan kumpulan elemen. Ini adalah alat yang sangat kuat apabila digabungkan dengan lapisan dan DOM maya. </a>
</div>
<div id="wjcelcm34c" class="Article_Details_main1L2s ">
<a href="#Sebarang-objek-peringkat-dan-lapisan-dalam-GraphicsJs-boleh-mengendalikan-peristiwa-Senarai-lengkap-acara-yang-disokong-boleh-didapati-di-API-EventType-Terdapat-empat-acara-khas-di-pentas-untuk-mengawal-rendering" title=" Sebarang objek, peringkat, dan lapisan dalam GraphicsJs boleh mengendalikan peristiwa. Senarai lengkap acara yang disokong boleh didapati di API EventType. Terdapat empat acara khas di pentas untuk mengawal rendering. " > Sebarang objek, peringkat, dan lapisan dalam GraphicsJs boleh mengendalikan peristiwa. Senarai lengkap acara yang disokong boleh didapati di API EventType. Terdapat empat acara khas di pentas untuk mengawal rendering. </a>
</div>
<div id="wjcelcm34c" class="Article_Details_main1L2s ">
<a href="#Pengoptimuman-Prestasi" title=" Pengoptimuman Prestasi " > Pengoptimuman Prestasi </a>
</div>
<div id="wjcelcm34c" class="Article_Details_main1L2s ">
<a href="#Hasil-Akhir" title=" Hasil Akhir " > Hasil Akhir </a>
</div>
<div id="wjcelcm34c" class="Article_Details_main1L2s ">
<a href="#Kesimpulan" title=" Kesimpulan " > Kesimpulan </a>
</div>
<div id="wjcelcm34c" class="Article_Details_main1L2s ">
<a href="#pautan-untuk-bacaan-selanjutnya" title=" pautan untuk bacaan selanjutnya " > pautan untuk bacaan selanjutnya </a>
</div>
<div id="wjcelcm34c" class="Article_Details_main1L2s ">
<a href="#soalan-yang-sering-ditanya-mengenai-graphicsjs" title=" soalan yang sering ditanya mengenai graphicsjs " > soalan yang sering ditanya mengenai graphicsjs </a>
</div>
<div id="wjcelcm34c" class="Article_Details_main1L2s ">
<a href="#Bagaimana-grafik-berbeza-dari-perpustakaan-grafik-javascript-lain" title=" Bagaimana grafik berbeza dari perpustakaan grafik javascript lain? " > Bagaimana grafik berbeza dari perpustakaan grafik javascript lain? </a>
</div>
<div id="wjcelcm34c" class="Article_Details_main1L2s ">
<a href="#Bagaimana-untuk-memulakan-dengan-Graphicsjs" title=" Bagaimana untuk memulakan dengan Graphicsjs? " > Bagaimana untuk memulakan dengan Graphicsjs? </a>
</div>
<div id="wjcelcm34c" class="Article_Details_main1L2s ">
<a href="#Bolehkah-saya-membuat-animasi-kompleks-menggunakan-Graphicsjs" title=" Bolehkah saya membuat animasi kompleks menggunakan Graphicsjs? " > Bolehkah saya membuat animasi kompleks menggunakan Graphicsjs? </a>
</div>
<div id="wjcelcm34c" class="Article_Details_main1L2s ">
<a href="#Adakah-GraphicsJS-serasi-dengan-semua-penyemak-imbas" title=" Adakah GraphicsJS serasi dengan semua penyemak imbas? " > Adakah GraphicsJS serasi dengan semua penyemak imbas? </a>
</div>
<div id="wjcelcm34c" class="Article_Details_main1L2s ">
<a href="#Bagaimana-untuk-membuat-kecerunan-menggunakan-Graphicsjs" title=" Bagaimana untuk membuat kecerunan menggunakan Graphicsjs? " > Bagaimana untuk membuat kecerunan menggunakan Graphicsjs? </a>
</div>
<div id="wjcelcm34c" class="Article_Details_main1L2s ">
<a href="#Bolehkah-saya-membuat-grafik-interaktif-menggunakan-Graphicsjs" title=" Bolehkah saya membuat grafik interaktif menggunakan Graphicsjs? " > Bolehkah saya membuat grafik interaktif menggunakan Graphicsjs? </a>
</div>
<div id="wjcelcm34c" class="Article_Details_main1L2s ">
<a href="#Adakah-lapisan-sokongan-GraphicsJS" title=" Adakah lapisan sokongan GraphicsJS? " > Adakah lapisan sokongan GraphicsJS? </a>
</div>
<div id="wjcelcm34c" class="Article_Details_main1L2s ">
<a href="#Bagaimana-untuk-mengoptimumkan-grafik-saya-menggunakan-Graphicsjs" title=" Bagaimana untuk mengoptimumkan grafik saya menggunakan Graphicsjs? " > Bagaimana untuk mengoptimumkan grafik saya menggunakan Graphicsjs? </a>
</div>
<div id="wjcelcm34c" class="Article_Details_main1L2s ">
<a href="#Bolehkah-saya-membuat-carta-dan-grafik-menggunakan-Graphicsjs" title=" Bolehkah saya membuat carta dan grafik menggunakan Graphicsjs? " > Bolehkah saya membuat carta dan grafik menggunakan Graphicsjs? </a>
</div>
<div id="wjcelcm34c" class="Article_Details_main1L2s ">
<a href="#Adakah-Graphicsjs-percuma-untuk-digunakan" title=" Adakah Graphicsjs percuma untuk digunakan? " > Adakah Graphicsjs percuma untuk digunakan? </a>
</div>
</div>
</div>
</div>
<div id="wjcelcm34c" class="Article_Details_main1M">
<div id="wjcelcm34c" class="phpgenera_Details_mainL1">
<a href="http://ipnx.cn/ms/" title="Rumah"
class="phpgenera_Details_mainL1a">Rumah</a>
<img src="/static/imghw/top_right.png" alt="" />
<a href="http://ipnx.cn/ms/web-designer.html"
class="phpgenera_Details_mainL1a">hujung hadapan web</a>
<img src="/static/imghw/top_right.png" alt="" />
<a href="http://ipnx.cn/ms/js-tutorial.html"
class="phpgenera_Details_mainL1a">tutorial js</a>
<img src="/static/imghw/top_right.png" alt="" />
<span>Memperkenalkan Graphicsjs, perpustakaan grafik ringan yang kuat</span>
</div>
<div id="wjcelcm34c" class="Articlelist_txts">
<div id="wjcelcm34c" class="Articlelist_txts_info">
<h1 class="Articlelist_txts_title">Memperkenalkan Graphicsjs, perpustakaan grafik ringan yang kuat</h1>
<div id="wjcelcm34c" class="Articlelist_txts_info_head">
<div id="wjcelcm34c" class="author_info">
<a href="http://ipnx.cn/ms/member/1242473.html" class="author_avatar">
<img class="lazy" data-src="https://img.php.cn/upload/avatar/001/242/473/646b03ec7509a724.jpg" src="/static/imghw/default1.png" alt="Jack chen">
</a>
<div id="wjcelcm34c" class="author_detail">
<a href="http://ipnx.cn/ms/member/1242473.html" class="author_name">Jack chen</a>
</div>
</div>
</div>
<span id="wjcelcm34c" class="Articlelist_txts_time">Feb 17, 2025 am 10:42 AM</span>
</div>
</div>
<hr />
<div id="wjcelcm34c" class="article_main php-article">
<div id="wjcelcm34c" class="article-list-left detail-content-wrap content">
<ins class="adsbygoogle"
style="display:block; text-align:center;"
data-ad-layout="in-article"
data-ad-format="fluid"
data-ad-client="ca-pub-5902227090019525"
data-ad-slot="3461856641">
</ins>
<p> html5: asas rangkaian moden. Hari ini, SVG dan kanvas sering menjadi teknologi pilihan ketika mencipta imej interaktif-Flash telah dilupakan, Silverlight telah menjadi unicorn yang jarang berlaku di pinggir rangkaian, dan beberapa orang mengingati plugin pihak ketiga. </p>
<p> Kebaikan dan keburukan setiap teknik didokumentasikan dengan baik, tetapi secara ringkas, SVG lebih sesuai untuk mencipta dan mengendalikan unsur -unsur interaktif. Ini kerana SVG adalah format vektor berasaskan XML yang apabila imej dimuatkan ke dalam halaman menggunakan tag <code><svg></svg></code>, setiap elemen di dalamnya boleh digunakan dalam SVG DOM. </p>
<p> Dalam artikel ini, saya ingin memperkenalkan anda kepada GraphicsJS, sebuah perpustakaan lukisan JavaScript sumber terbuka yang baru dan berkuasa berdasarkan SVG (untuk versi IE yang lebih tua, ia mempunyai alternatif VML). Saya akan mulakan dengan cepat memperkenalkan asas -asasnya dan kemudian mempamerkan keupayaan perpustakaan dengan dua contoh pendek dan indah: Contoh pertama adalah sepenuhnya mengenai seni, dan contoh kedua menunjukkan cara menulis yang mudah dalam kurang dari 50 baris seni teka -teki seni permainan. </p>
<h2 id="mata-utama"> mata utama </h2>
<ul>
<li> GraphicsJS adalah perpustakaan lukisan JavaScript yang baru, kuat dan terbuka berdasarkan SVG dan menyediakan alternatif VML untuk versi IE yang lebih tua. Ia ringan dan fleksibel, dengan API JavaScript yang kaya. </li>
<li> Diterbitkan oleh Anychart, perpustakaan telah diberikan dalam produk proprietari Anychart selama sekurang -kurangnya tiga tahun, memastikan keteguhannya. Tidak seperti Galeri Lukisan JavaScript AnyChart, GraphicsJS tersedia secara percuma untuk projek komersial dan bukan keuntungan. </li>
<li> GraphicsJS adalah keserasian silang penyemak imbas dan menyokong Internet Explorer 6.0, Safari 3.0, Firefox 3.0, dan Opera 9.5. Ia diberikan dalam VML dalam versi IE yang lebih tua dan dalam SVG dalam semua pelayar lain. </li>
<li> Perpustakaan ini membolehkan gabungan grafik dan animasi, termasuk api api animasi, galaksi berputar, hujan, dan permainan teka -teki yang boleh dimainkan. Ia juga mengandungi dokumentasi terperinci dan rujukan API yang komprehensif. </li>
<li> Perpustakaan GraphicsJS boleh digunakan untuk membuat aplikasi web interaktif, termasuk lapisan, kecerunan, corak, pemprosesan acara, dan pengoptimuman prestasi. Ia juga menyokong animasi dan transformasi yang kompleks, menjadikannya pilihan serba boleh untuk pemaju. </li>
</ul>
<h2 id="mengapa-memilih-graphicsjs"> mengapa memilih graphicsjs </h2>
<p> Terdapat banyak perpustakaan yang membantu pemaju menggunakan SVG: rapha?l, snap.svg, dan bonsaijs, untuk menamakan hanya beberapa perpustakaan terbaik. Perpustakaan ini masing -masing mempunyai kebaikan dan keburukan mereka, tetapi perbandingan menyeluruh mereka akan menjadi subjek artikel lain. Artikel ini adalah mengenai GraphicsJs, jadi saya jelaskan apa yang ada dan apa yang ada. </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 "> <s>
</s></p> Pertama sekali, GraphicsJS ringan dan mempunyai API JavaScript yang sangat fleksibel. Ia melaksanakan banyak ciri teks yang kaya, serta DOM maya yang berasingan daripada pelaksanaan HTML DOM khusus pelayar. <p></p>
<p> Kedua, ia adalah perpustakaan JavaScript sumber terbuka baru yang dikeluarkan pada musim gugur lepas oleh Anychart, salah satu pemaju perisian visualisasi data interaktif terkemuka di dunia. AnyChart telah menggunakan GraphicsJS selama sekurang-kurangnya tiga tahun (sejak pelepasan Anychart 7.0) untuk membuat carta dalam produk proprietinya, jadi GraphicsJS diuji sepenuhnya. (Penafian: Saya ketua R & D di Anychart dan pemaju utama di GraphicsJS) </p>
<p> Ketiga, tidak seperti perpustakaan lukisan JavaScript AnyChart, GraphicsJS tersedia secara percuma untuk projek komersial dan bukan keuntungan. Ia boleh didapati di GitHub di bawah lesen Apache. </p>
<p> Keempat, GraphicsJS mempunyai keserasian penyemak imbas dan menyokong Internet Explorer 6.0, Safari 3.0, Firefox 3.0, dan Opera 9.5. Ia diberikan dalam VML dalam versi IE yang lebih tua dan dalam SVG dalam semua pelayar lain. </p>
<p> Akhir sekali, GraphicsJS membolehkan anda menggabungkan grafik dan animasi dengan sempurna. Semak galeri utamanya, termasuk api api animasi, galaksi berputar, hujan, daun yang dihasilkan secara prosedur, dimainkan 15 permainan teka -teki dan banyak lagi. GraphicsJs mengandungi lebih banyak contoh dalam dokumentasi terperinci dan rujukan API yang komprehensif. </p>
<h2 id="Asas-GraphicsJS"> Asas GraphicsJS </h2>
<p> Untuk memulakan dengan GraphicsJS, anda perlu merujuk perpustakaan dan membuat elemen HTML peringkat blok untuk lukisan: </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> anda harus membuat panggung dan menarik sesuatu di dalamnya, seperti segi empat tepat, bulatan, atau bentuk lain: </p>
<pre class='brush:php;toolbar:false;'> // 創(chuàng)建舞臺
var stage = acgraph.create('stage-container');
// 繪制矩形
var stage.rect(25, 50, 350, 300);</pre>
<p> Berikut adalah contoh pada Codepen di mana kita melangkah lebih jauh dan menarik simbol Deathly Hallows. </p>
<h2 id="Karya-pertama-kami"> Karya pertama kami </h2>
<h3 id="isi-strok-dan-corak-mengisi"> isi, strok dan corak mengisi </h3>
<p> apa -apa bentuk atau laluan boleh berwarna menggunakan tetapan mengisi dan tetapan strok. Segala -galanya mempunyai strok (sempadan), tetapi hanya bentuk dan laluan tertutup yang mempunyai padding. Tetapan isi dan strok sangat kaya, dan anda boleh menggunakan kecerunan linear atau bulat untuk mengisi dan strok. Di samping itu, garisan boleh bertitik dan menyokong imej yang mengisi dengan pelbagai mod jubin. Tetapi ini semua perkara yang cukup standard yang anda dapati di hampir mana -mana perpustakaan. Apa yang menjadikan GraphicsJS istimewa adalah ciri pengisian dan coraknya, yang bukan sahaja membolehkan anda menggunakan 32 (!) Corak mengisi mesh yang tersedia secara langsung, tetapi juga membolehkan anda dengan mudah membuat corak tersuai yang diperbuat daripada bentuk atau teks. </p>
<p> Sekarang, mari kita lihat apa sebenarnya yang dapat dicapai! Saya akan melukis lukisan seorang lelaki yang berdiri di dekat rumah dan mengisi dengan corak dan warna yang berbeza untuk meningkatkannya. Untuk kesederhanaan, mari kita menjadikannya lukisan seni kebudak -budakan (dan cuba untuk tidak melibatkan kekasaran seni). Itu sahaja: </p>
<pre class='brush:php;toolbar:false;'> // 創(chuàng)建舞臺
var stage = acgraph.create('stage-container');
// 繪制框架
var frame = stage.rect(25, 50, 350, 300);
// 繪制房子
var walls = stage.rect(50, 250, 200, 100);
var roof = stage.path()
.moveTo(50, 250)
.lineTo(150, 180)
.lineTo(250, 250)
.close();
// 繪制一個人
var head = stage.circle(330, 280, 10);
var neck = stage.path().moveTo(330, 290).lineTo(330, 300);
var kilt = stage.triangleUp(330, 320, 20);
var rightLeg = stage.path().moveTo(320, 330).lineTo(320, 340);
var leftLeg = stage.path().moveTo(340, 330).lineTo(340, 340);</pre>
<p> Lihat hasil pada codepen. </p>
<p> Seperti yang anda lihat, kami kini menggunakan pembolehubah - semua kaedah lukisan kandungan pada panggung mengembalikan rujukan kepada objek yang dicipta dan pautan ini boleh digunakan untuk menukar atau memadam objek. </p>
<p> Juga perhatikan bagaimana panggilan rantai (mis. <code>stage.path().moveTo(320, 330).lineTo(320, 340);</code>) berada di mana -mana di GraphicsJS, yang membantu memendekkan kod. Panggilan rantaian hendaklah digunakan dengan berhati -hati, tetapi jika digunakan dengan betul, ia menjadikan kod itu lebih padat dan lebih mudah dibaca. </p><p> Sekarang, mari kita tangankan halaman pewarna ini kepada anak dan biarkan mereka melukis. Kerana walaupun kanak -kanak dapat menguasai teknik berikut: </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> Ini adalah bagaimana contoh kita kelihatan sekarang. </p>
<p> Sekarang, kita mempunyai gambar Highlander yang berdiri di sebelah kilt, berdiri di dekat istana bata dengan jerami di atas bumbung. Kita juga boleh berisiko mengatakan bahawa ini sememangnya karya seni yang kita mahu mendapatkan hak cipta. Mari kita lakukan ini menggunakan corak mengisi berdasarkan teks tersuai: <em>
</em>
</p> seperti yang anda lihat, ini mudah dilakukan: Anda membuat contoh objek teks, kemudian membentuk corak di panggung dan meletakkan teks ke dalam corak. <pre class='brush:php;toolbar:false;'> // 創(chuàng)建舞臺
var stage = acgraph.create('stage-container');
// 繪制矩形
var stage.rect(25, 50, 350, 300);</pre>
<p> Lihat Rumah Hak Cipta Warna/Graphicsjs pada Codepen. </p>
<p> Buat permainan seni teka -teki dalam kurang daripada 50 baris kod </p>
<h2 id="Di-bahagian-seterusnya-artikel-ini-saya-ingin-menunjukkan-kepada-anda-cara-membuat-permainan-seperti-cookie-clicker-menggunakan-GraphicsJS-dalam-kurang-daripada-baris-kod"> Di bahagian seterusnya artikel ini, saya ingin menunjukkan kepada anda cara membuat permainan seperti cookie clicker menggunakan GraphicsJS dalam kurang daripada 50 baris kod. </h2>
<p> Nama permainan adalah </p> "menyapu jalan -jalan di angin" <p>, dan pemain memainkan peranan seorang pemulung dan menyapu jalan -jalan pada petang berangin pada musim luruh. Permainan ini menggunakan beberapa kod dari contoh daun yang dihasilkan oleh program di galeri GraphicsJS. <em>
</em> Anda boleh melihat permainan selesai di Codepen (atau akhir artikel). </p>
<p> lapisan, zindex dan maya dom </p>
<h3 id="kita-mula-mula-membuat-pentas-seperti-yang-dinyatakan-sebelum-ini-dan-kemudian-mengisytiharkan-beberapa-pembolehubah-awal"> kita mula -mula membuat pentas (seperti yang dinyatakan sebelum ini) dan kemudian mengisytiharkan beberapa pembolehubah awal: </h3>
<p>
</p> Untuk permainan ini, kami akan menggunakan lapisan - objek dalam grafik yang digunakan untuk elemen kumpulan. Jika anda ingin menggunakan perubahan yang serupa dengan elemen (seperti transformasi), anda mesti kumpulan elemen. Anda boleh menukar lapisan dalam mod jeda (lebih lanjut mengenai ini kemudian), yang dapat meningkatkan prestasi dan pengalaman pengguna. <pre class='brush:php;toolbar:false;'> // 創(chuàng)建舞臺
var stage = acgraph.create('stage-container');
// 繪制框架
var frame = stage.rect(25, 50, 350, 300);
// 繪制房子
var walls = stage.rect(50, 250, 200, 100);
var roof = stage.path()
.moveTo(50, 250)
.lineTo(150, 180)
.lineTo(250, 250)
.close();
// 繪制一個人
var head = stage.circle(330, 280, 10);
var neck = stage.path().moveTo(330, 290).lineTo(330, 300);
var kilt = stage.triangleUp(330, 320, 20);
var rightLeg = stage.path().moveTo(320, 330).lineTo(320, 340);
var leftLeg = stage.path().moveTo(340, 330).lineTo(340, 340);</pre>
<p> Dalam demo ini, kami menggunakan fungsi lapisan untuk membantu kami mengumpulkan daun bersama -sama dan mengelakkan mereka menutup label (ia memberitahu kami berapa banyak daun disapu). Untuk melakukan ini, kami membuat tag dan panggil kaedah </p>, yang mewujudkan lapisan mengikat panggung. Kami menetapkan sifat <p> lapisan ini ke harta <code>stage.layer</code> di bawah label. <code>zIndex</code>
<code>zIndex</code>
</p> Selepas melakukan ini, kita dapat memastikan bahawa mereka tidak menulis semula teks tidak kira berapa banyak daun yang kita buat di lapisan. <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> Convert </p>
<h3 id="Seterusnya-mari-tambahkan-fungsi-untuk-menarik-daun-kita-Ini-menggunakan-API-Transformasi-GraphicsJS-yang-mudah-yang-membolehkan-anda-bergerak-skala-berputar-dan-memotong-unsur-unsur-dan-kumpulan-elemen-Ini-adalah-alat-yang-sangat-kuat-apabila-digabungkan-dengan-lapisan-dan-DOM-maya"> Seterusnya, mari tambahkan fungsi untuk menarik daun kita. Ini menggunakan API Transformasi GraphicsJS yang mudah, yang membolehkan anda bergerak, skala, berputar, dan memotong unsur -unsur dan kumpulan elemen. Ini adalah alat yang sangat kuat apabila digabungkan dengan lapisan dan DOM maya. </h3>
<p>
</p> anda akan melihat bahawa setiap jalan dicipta dengan cara yang sama, tetapi kemudian penukaran akan dilakukan. Ini akan menghasilkan corak daun rawak yang sangat indah. <pre class='brush:php;toolbar:false;'> // 169 是版權(quán)符號的字符代碼
var text = acgraph.text().text(String.fromCharCode(169)).opacity(0.2);
var pattern_font = stage.pattern(text.getBounds());
pattern_font.addChild(text);
// 用圖案填充整個圖像
frame.fill(pattern_font);</pre>
<p> Peristiwa Pemprosesan </p>
<h3 id="Sebarang-objek-peringkat-dan-lapisan-dalam-GraphicsJs-boleh-mengendalikan-peristiwa-Senarai-lengkap-acara-yang-disokong-boleh-didapati-di-API-EventType-Terdapat-empat-acara-khas-di-pentas-untuk-mengawal-rendering"> Sebarang objek, peringkat, dan lapisan dalam GraphicsJs boleh mengendalikan peristiwa. Senarai lengkap acara yang disokong boleh didapati di API EventType. Terdapat empat acara khas di pentas untuk mengawal rendering. </h3><p> Dalam contoh permainan ini, kami menggunakan pendengar acara yang melekat pada objek daun supaya apabila pengguna melayang ke atas mereka, mereka hilang satu demi satu. Untuk melakukan ini, tambahkan kod berikut ke bahagian bawah fungsi <code>drawLeaves</code>, sebelum pernyataan <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> di sini kita juga dapat melihat bahawa kita menggunakan lapisan untuk mengira daun. </p>
<pre class='brush:php;toolbar:false;'> // 創(chuàng)建舞臺
var stage = acgraph.create('stage-container');
// 繪制矩形
var stage.rect(25, 50, 350, 300);</pre>
<p> Sila ambil perhatian bahawa kami tidak menyimpan jumlah daun di sini. Oleh kerana kita menambah daun ke lapisan tertentu dan mengeluarkan daun dari mereka, ini membolehkan kita mengesan berapa banyak elemen kanak -kanak yang kita ada (dan oleh itu berapa banyak daun yang tersisa). </p>
<p> GraphicsJS menyediakan DOM maya yang merupakan abstrak, ringan dan berasingan dari pelaksanaan SVG/VML khusus penyemak imbas. Ia sangat berguna untuk melakukan banyak perkara hebat seperti menjejaki semua objek dan lapisan, menggunakan transformasi kepada kumpulan, dan mengoptimumkan rendering dengan bantuan membolehkan kami mengesan dan mengawal proses rendering. </p>
<h3 id="Pengoptimuman-Prestasi"> Pengoptimuman Prestasi </h3>
<p> DOM maya dan pengendali acara membolehkan pengguna GraphicsJS mengawal rendering. Artikel prestasi dapat membantu anda memahami hubungan antara kandungan ini. </p>
<p> Apabila menjana daun dalam permainan, kita perlu berhenti sejenak apabila menambahkan daun baru, dan hanya menyambung semula rendering selepas semua perubahan selesai: </p>
<pre class='brush:php;toolbar:false;'> // 創(chuàng)建舞臺
var stage = acgraph.create('stage-container');
// 繪制框架
var frame = stage.rect(25, 50, 350, 300);
// 繪制房子
var walls = stage.rect(50, 250, 200, 100);
var roof = stage.path()
.moveTo(50, 250)
.lineTo(150, 180)
.lineTo(250, 250)
.close();
// 繪制一個人
var head = stage.circle(330, 280, 10);
var neck = stage.path().moveTo(330, 290).lineTo(330, 300);
var kilt = stage.triangleUp(330, 320, 20);
var rightLeg = stage.path().moveTo(320, 330).lineTo(320, 340);
var leftLeg = stage.path().moveTo(340, 330).lineTo(340, 340);</pre>
<p> Kaedah ini menangani unsur -unsur baru menjadikan daun baru muncul dengan segera. </p>
<p> Akhirnya, mulakan segala -galanya dengan memanggil <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="Hasil-Akhir"> Hasil Akhir </h3>
<p> Lihat Street Cleaner/Graphicsjs pada Codepen. </p>
<h2 id="Kesimpulan"> Kesimpulan </h2>
<p> Peralihan ke HTML5 telah mengubah rangkaian. Ketika datang ke aplikasi web moden dan juga laman web yang mudah, kami sering menghadapi tugas yang memerlukan pemprosesan imej. Walaupun mustahil untuk mencari penyelesaian yang berfungsi dengan baik dalam setiap kes, anda harus mempertimbangkan perpustakaan GraphicsJS. Ia adalah sumber terbuka, teguh, dengan sokongan penyemak imbas yang sangat baik dan banyak ciri yang menjadikannya menyeronokkan, mudah dan tentu saja berguna. </p>
<p> Saya suka mendengar maklum balas anda di Grphicsjs dalam komen di bawah. Adakah anda sudah menggunakannya? Adakah anda akan mempertimbangkan untuk menggunakannya untuk projek baru? Saya suka tahu mengapa, atau mengapa tidak menggunakannya. Saya juga menulis senarai perpustakaan dan artikel lukisan utama JavaScript yang akan membandingkan dan membandingkan semuanya. Jangan ragu untuk menunjukkan ciri -ciri yang ingin anda lihat di sana. </p>
<h2 id="pautan-untuk-bacaan-selanjutnya"> pautan untuk bacaan selanjutnya </h2>
<ul>
<li> Maklumat Umum <ul>
<li> svg </li>
<li> kanvas </li>
<li> SVG vs Canvas </li>
</ul>
</li>
<li> perpustakaan <ul>
<li> Graphicsjs </li>
<li> rapha?l </li>
<li> snap.svg </li>
<li> bonsaijs </li>
</ul>
</li>
<li> Graphicsjs <ul>
<li> Graphicsjs pada GitHub </li>
<li> Dokumentasi GraphicsJS </li>
<li> GraphicsJS API Rujukan </li>
</ul>
</li>
</ul>
<h2 id="soalan-yang-sering-ditanya-mengenai-graphicsjs"> soalan yang sering ditanya mengenai graphicsjs </h2>
<h3 id="Bagaimana-grafik-berbeza-dari-perpustakaan-grafik-javascript-lain"> Bagaimana grafik berbeza dari perpustakaan grafik javascript lain? </h3>
<p> Graphicsjs menonjol untuk sifatnya yang kuat dan ringan. Ia adalah perpustakaan yang kuat yang membolehkan pemaju untuk menarik dan menghidupkan sebarang grafik dengan ketepatan yang tinggi dan prestasi tinggi. Tidak seperti perpustakaan lain, GraphicsJS menyediakan satu set ciri yang komprehensif termasuk lapisan, kecerunan, corak, dan banyak lagi tanpa menjejaskan kelajuan atau kecekapan. Ia juga menyokong semua pelayar moden, menjadikannya pilihan serba boleh untuk pemaju. </p>
<h3 id="Bagaimana-untuk-memulakan-dengan-Graphicsjs"> Bagaimana untuk memulakan dengan Graphicsjs? </h3>
<p> Untuk memulakan dengan GraphicsJS, anda perlu memasukkan perpustakaan GraphicsJS dalam fail HTML anda. Anda boleh memuat turun perpustakaan dari laman web rasmi atau menggunakan CDN. Sebaik sahaja perpustakaan dimasukkan, anda boleh mula membuat grafik dengan memanggil fungsi dan kaedah yang sesuai yang disediakan oleh perpustakaan. </p>
<h3 id="Bolehkah-saya-membuat-animasi-kompleks-menggunakan-Graphicsjs"> Bolehkah saya membuat animasi kompleks menggunakan Graphicsjs? </h3>
<p> Ya, GraphicsJS direka untuk mengendalikan animasi kompleks dengan mudah. Ia menyediakan satu set ciri animasi yang kaya termasuk fungsi pelonggaran, kelewatan dan jangka masa. Anda boleh menghidupkan sebarang atribut graf, seperti kedudukan, saiz, warna, dan banyak lagi. Ini menjadikan GraphicsJs alat yang berkuasa untuk mewujudkan grafik interaktif dan dinamik. </p>
<h3 id="Adakah-GraphicsJS-serasi-dengan-semua-penyemak-imbas"> Adakah GraphicsJS serasi dengan semua penyemak imbas? </h3>
<p> GraphicsJS direka untuk bersesuaian dengan semua pelayar moden, termasuk Chrome, Firefox, Safari, dan Internet Explorer. Ia menggunakan SVG dan VML untuk rendering, yang semuanya menyokong mereka. Ini memastikan bahawa grafik anda kelihatan konsisten dan berfungsi dengan baik pada platform dan peranti yang berbeza. </p>
<h3 id="Bagaimana-untuk-membuat-kecerunan-menggunakan-Graphicsjs"> Bagaimana untuk membuat kecerunan menggunakan Graphicsjs? </h3>
<p> Membuat kecerunan dengan GraphicsJS adalah mudah. Anda boleh menggunakan kaedah kecerunan untuk menentukan kecerunan linear atau radial, menentukan warna dan kedudukan, dan kemudian gunakan kecerunan untuk sebarang bentuk. Ini membolehkan anda membuat grafik berwarna -warni dengan mudah. </p>
<h3 id="Bolehkah-saya-membuat-grafik-interaktif-menggunakan-Graphicsjs"> Bolehkah saya membuat grafik interaktif menggunakan Graphicsjs? </h3>
<p> Ya, GraphicsJS menyediakan satu set keupayaan pengendalian acara yang membolehkan anda membuat grafik interaktif. Anda boleh melampirkan pendengar acara ke mana -mana graf, yang membolehkan anda bertindak balas terhadap tindakan pengguna seperti klik, pergerakan tetikus, dan banyak lagi. Ini menjadikan GraphicsJs pilihan yang sangat baik untuk membuat aplikasi web interaktif. </p>
<h3 id="Adakah-lapisan-sokongan-GraphicsJS"> Adakah lapisan sokongan GraphicsJS? </h3>
<p> Ya, GraphicsJS menyokong lapisan, membolehkan anda mengatur grafik ke dalam kumpulan berasingan. Setiap lapisan boleh dikendalikan secara bebas, menjadikannya lebih mudah untuk menguruskan grafik kompleks. Anda juga boleh mengawal penglihatan dan z-order setiap lapisan, yang membolehkan kawalan grafik halus. </p>
<h3 id="Bagaimana-untuk-mengoptimumkan-grafik-saya-menggunakan-Graphicsjs"> Bagaimana untuk mengoptimumkan grafik saya menggunakan Graphicsjs? </h3>
<p> GraphicsJS menyediakan beberapa ciri yang dapat membantu anda mengoptimumkan grafik anda. Sebagai contoh, anda boleh menggunakan kaedah tanaman untuk menyembunyikan bahagian -bahagian grafik di luar kawasan tertentu, dengan itu mengurangkan jumlah rendering yang diperlukan. Anda juga boleh menggunakan kaedah cache untuk menyimpan output grafik yang diberikan, dengan itu meningkatkan prestasi apabila anda mengecat grafik dengan kerap. </p>
<h3 id="Bolehkah-saya-membuat-carta-dan-grafik-menggunakan-Graphicsjs"> Bolehkah saya membuat carta dan grafik menggunakan Graphicsjs? </h3>
<p> Walaupun GraphicsJS tidak direka khusus untuk membuat carta dan grafik, keupayaan lukisan dan animasi yang kuat membolehkannya membuat apa -apa jenis grafik, termasuk carta dan grafik. Anda boleh menggunakan kaedah perpustakaan untuk menarik garis, lengkung, segi empat tepat, bulatan, dan banyak lagi untuk membuat pelbagai jenis carta. </p>
<h3 id="Adakah-Graphicsjs-percuma-untuk-digunakan"> Adakah Graphicsjs percuma untuk digunakan? </h3>
<p> Ya, GraphicsJS adalah perpustakaan sumber terbuka percuma. Anda boleh menggunakannya secara percuma dalam projek anda. Perpustakaan juga diselenggarakan secara aktif untuk memastikan ia selaras dengan piawaian dan teknologi web terkini. </p><p>Atas ialah kandungan terperinci Memperkenalkan Graphicsjs, perpustakaan grafik ringan yang kuat. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!</p>
</div>
</div>
<div id="wjcelcm34c" class="wzconShengming_sp">
<div id="wjcelcm34c" class="bzsmdiv_sp">Kenyataan Laman Web ini</div>
<div>Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi 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="wjcelcm34c" class="AI_ToolDetails_main4sR">
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-5902227090019525"
data-ad-slot="3653428331"
data-ad-format="auto"
data-full-width-responsive="true"></ins>
<!-- <div id="wjcelcm34c" class="phpgenera_Details_mainR4">
<div id="wjcelcm34c" class="phpmain1_4R_readrank">
<div id="wjcelcm34c" class="phpmain1_4R_readrank_top">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/hotarticle2.png" alt="" />
<h2>Artikel Panas</h2>
</div>
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottom">
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms">
<a href="http://ipnx.cn/ms/faq/1796832397.html" title="Panduan Membina Rumput Wonder | Uma Musume Pretty Derby" class="phpgenera_Details_mainR4_bottom_title">Panduan Membina Rumput Wonder | Uma Musume Pretty Derby</a>
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms_info">
<span>3 minggu yang lalu</span>
<span>By Jack chen</span>
</div>
</div>
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms">
<a href="http://ipnx.cn/ms/faq/1796833110.html" title="<??>: 99 Malam di Hutan - Semua Lencana Dan Cara Membuka Kunci Mereka" class="phpgenera_Details_mainR4_bottom_title"><??>: 99 Malam di Hutan - Semua Lencana Dan Cara Membuka Kunci Mereka</a>
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms_info">
<span>3 minggu yang lalu</span>
<span>By DDD</span>
</div>
</div>
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms">
<a href="http://ipnx.cn/ms/faq/1796831605.html" title="Jadual Banner Pretty Derby Uma Musume (Julai 2025)" class="phpgenera_Details_mainR4_bottom_title">Jadual Banner Pretty Derby Uma Musume (Julai 2025)</a>
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms_info">
<span>4 minggu yang lalu</span>
<span>By Jack chen</span>
</div>
</div>
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms">
<a href="http://ipnx.cn/ms/faq/1796829586.html" title="Connections Hitt dan Jawab 3 Julai untuk 753 untuk 753" class="phpgenera_Details_mainR4_bottom_title">Connections Hitt dan Jawab 3 Julai untuk 753 untuk 753</a>
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms_info">
<span>1 bulan yang lalu</span>
<span>By Jack chen</span>
</div>
</div>
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms">
<a href="http://ipnx.cn/ms/faq/1796831905.html" title="Keselamatan Windows kosong atau tidak menunjukkan pilihan" class="phpgenera_Details_mainR4_bottom_title">Keselamatan Windows kosong atau tidak menunjukkan pilihan</a>
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms_info">
<span>4 minggu yang lalu</span>
<span>By 下次還敢</span>
</div>
</div>
</div>
<div id="wjcelcm34c" class="phpgenera_Details_mainR3_more">
<a href="http://ipnx.cn/ms/article.html">Tunjukkan Lagi</a>
</div>
</div>
</div> -->
<div id="wjcelcm34c" class="phpgenera_Details_mainR3">
<div id="wjcelcm34c" class="phpmain1_4R_readrank">
<div id="wjcelcm34c" class="phpmain1_4R_readrank_top">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/hottools2.png" alt="" />
<h2>Alat AI Hot</h2>
</div>
<div id="wjcelcm34c" class="phpgenera_Details_mainR3_bottom">
<div id="wjcelcm34c" class="phpmain_tab2_mids_top">
<a href="http://ipnx.cn/ms/ai/undress-ai-tool" title="Undress AI Tool" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173410641626608.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Undress AI Tool" />
</a>
<div id="wjcelcm34c" class="phpmain_tab2_mids_info">
<a href="http://ipnx.cn/ms/ai/undress-ai-tool" title="Undress AI Tool" class="phpmain_tab2_mids_title">
<h3>Undress AI Tool</h3>
</a>
<p>Gambar buka pakaian secara percuma</p>
</div>
</div>
<div id="wjcelcm34c" class="phpmain_tab2_mids_top">
<a href="http://ipnx.cn/ms/ai/undresserai-undress" title="Undresser.AI Undress" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411540686492.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Undresser.AI Undress" />
</a>
<div id="wjcelcm34c" class="phpmain_tab2_mids_info">
<a href="http://ipnx.cn/ms/ai/undresserai-undress" title="Undresser.AI Undress" class="phpmain_tab2_mids_title">
<h3>Undresser.AI Undress</h3>
</a>
<p>Apl berkuasa AI untuk mencipta foto bogel yang realistik</p>
</div>
</div>
<div id="wjcelcm34c" class="phpmain_tab2_mids_top">
<a href="http://ipnx.cn/ms/ai/ai-clothes-remover" title="AI Clothes Remover" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411552797167.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="AI Clothes Remover" />
</a>
<div id="wjcelcm34c" class="phpmain_tab2_mids_info">
<a href="http://ipnx.cn/ms/ai/ai-clothes-remover" title="AI Clothes Remover" class="phpmain_tab2_mids_title">
<h3>AI Clothes Remover</h3>
</a>
<p>Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.</p>
</div>
</div>
<div id="wjcelcm34c" class="phpmain_tab2_mids_top">
<a href="http://ipnx.cn/ms/ai/clothoffio" title="Clothoff.io" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411529149311.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Clothoff.io" />
</a>
<div id="wjcelcm34c" class="phpmain_tab2_mids_info">
<a href="http://ipnx.cn/ms/ai/clothoffio" title="Clothoff.io" class="phpmain_tab2_mids_title">
<h3>Clothoff.io</h3>
</a>
<p>Penyingkiran pakaian AI</p>
</div>
</div>
<div id="wjcelcm34c" class="phpmain_tab2_mids_top">
<a href="http://ipnx.cn/ms/ai/video-swap" title="Video Face Swap" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173414504068133.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Video Face Swap" />
</a>
<div id="wjcelcm34c" class="phpmain_tab2_mids_info">
<a href="http://ipnx.cn/ms/ai/video-swap" title="Video Face Swap" class="phpmain_tab2_mids_title">
<h3>Video Face Swap</h3>
</a>
<p>Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!</p>
</div>
</div>
</div>
<div id="wjcelcm34c" class="phpgenera_Details_mainR3_more">
<a href="http://ipnx.cn/ms/ai">Tunjukkan Lagi</a>
</div>
</div>
</div>
<div id="wjcelcm34c" class="phpgenera_Details_mainR4">
<div id="wjcelcm34c" class="phpmain1_4R_readrank">
<div id="wjcelcm34c" class="phpmain1_4R_readrank_top">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/hotarticle2.png" alt="" />
<h2>Artikel Panas</h2>
</div>
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottom">
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms">
<a href="http://ipnx.cn/ms/faq/1796832397.html" title="Panduan Membina Rumput Wonder | Uma Musume Pretty Derby" class="phpgenera_Details_mainR4_bottom_title">Panduan Membina Rumput Wonder | Uma Musume Pretty Derby</a>
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms_info">
<span>3 minggu yang lalu</span>
<span>By Jack chen</span>
</div>
</div>
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms">
<a href="http://ipnx.cn/ms/faq/1796833110.html" title="<??>: 99 Malam di Hutan - Semua Lencana Dan Cara Membuka Kunci Mereka" class="phpgenera_Details_mainR4_bottom_title"><??>: 99 Malam di Hutan - Semua Lencana Dan Cara Membuka Kunci Mereka</a>
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms_info">
<span>3 minggu yang lalu</span>
<span>By DDD</span>
</div>
</div>
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms">
<a href="http://ipnx.cn/ms/faq/1796831605.html" title="Jadual Banner Pretty Derby Uma Musume (Julai 2025)" class="phpgenera_Details_mainR4_bottom_title">Jadual Banner Pretty Derby Uma Musume (Julai 2025)</a>
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms_info">
<span>4 minggu yang lalu</span>
<span>By Jack chen</span>
</div>
</div>
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms">
<a href="http://ipnx.cn/ms/faq/1796829586.html" title="Connections Hitt dan Jawab 3 Julai untuk 753 untuk 753" class="phpgenera_Details_mainR4_bottom_title">Connections Hitt dan Jawab 3 Julai untuk 753 untuk 753</a>
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms_info">
<span>1 bulan yang lalu</span>
<span>By Jack chen</span>
</div>
</div>
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms">
<a href="http://ipnx.cn/ms/faq/1796831905.html" title="Keselamatan Windows kosong atau tidak menunjukkan pilihan" class="phpgenera_Details_mainR4_bottom_title">Keselamatan Windows kosong atau tidak menunjukkan pilihan</a>
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms_info">
<span>4 minggu yang lalu</span>
<span>By 下次還敢</span>
</div>
</div>
</div>
<div id="wjcelcm34c" class="phpgenera_Details_mainR3_more">
<a href="http://ipnx.cn/ms/article.html">Tunjukkan Lagi</a>
</div>
</div>
</div>
<div id="wjcelcm34c" class="phpgenera_Details_mainR3">
<div id="wjcelcm34c" class="phpmain1_4R_readrank">
<div id="wjcelcm34c" class="phpmain1_4R_readrank_top">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/hottools2.png" alt="" />
<h2>Alat panas</h2>
</div>
<div id="wjcelcm34c" class="phpgenera_Details_mainR3_bottom">
<div id="wjcelcm34c" class="phpmain_tab2_mids_top">
<a href="http://ipnx.cn/ms/toolset/development-tools/92" title="Notepad++7.3.1" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58ab96f0f39f7357.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="Notepad++7.3.1" />
</a>
<div id="wjcelcm34c" class="phpmain_tab2_mids_info">
<a href="http://ipnx.cn/ms/toolset/development-tools/92" title="Notepad++7.3.1" class="phpmain_tab2_mids_title">
<h3>Notepad++7.3.1</h3>
</a>
<p>Editor kod yang mudah digunakan dan percuma</p>
</div>
</div>
<div id="wjcelcm34c" class="phpmain_tab2_mids_top">
<a href="http://ipnx.cn/ms/toolset/development-tools/93" title="SublimeText3 versi Cina" 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 versi Cina" />
</a>
<div id="wjcelcm34c" class="phpmain_tab2_mids_info">
<a href="http://ipnx.cn/ms/toolset/development-tools/93" title="SublimeText3 versi Cina" class="phpmain_tab2_mids_title">
<h3>SublimeText3 versi Cina</h3>
</a>
<p>Versi Cina, sangat mudah digunakan</p>
</div>
</div>
<div id="wjcelcm34c" class="phpmain_tab2_mids_top">
<a href="http://ipnx.cn/ms/toolset/development-tools/121" title="Hantar 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="Hantar Studio 13.0.1" />
</a>
<div id="wjcelcm34c" class="phpmain_tab2_mids_info">
<a href="http://ipnx.cn/ms/toolset/development-tools/121" title="Hantar Studio 13.0.1" class="phpmain_tab2_mids_title">
<h3>Hantar Studio 13.0.1</h3>
</a>
<p>Persekitaran pembangunan bersepadu PHP yang berkuasa</p>
</div>
</div>
<div id="wjcelcm34c" class="phpmain_tab2_mids_top">
<a href="http://ipnx.cn/ms/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="wjcelcm34c" class="phpmain_tab2_mids_info">
<a href="http://ipnx.cn/ms/toolset/development-tools/469" title="Dreamweaver CS6" class="phpmain_tab2_mids_title">
<h3>Dreamweaver CS6</h3>
</a>
<p>Alat pembangunan web visual</p>
</div>
</div>
<div id="wjcelcm34c" class="phpmain_tab2_mids_top">
<a href="http://ipnx.cn/ms/toolset/development-tools/500" title="SublimeText3 versi 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 versi Mac" />
</a>
<div id="wjcelcm34c" class="phpmain_tab2_mids_info">
<a href="http://ipnx.cn/ms/toolset/development-tools/500" title="SublimeText3 versi Mac" class="phpmain_tab2_mids_title">
<h3>SublimeText3 versi Mac</h3>
</a>
<p>Perisian penyuntingan kod peringkat Tuhan (SublimeText3)</p>
</div>
</div>
</div>
<div id="wjcelcm34c" class="phpgenera_Details_mainR3_more">
<a href="http://ipnx.cn/ms/ai">Tunjukkan Lagi</a>
</div>
</div>
</div>
<div id="wjcelcm34c" class="phpgenera_Details_mainR4">
<div id="wjcelcm34c" class="phpmain1_4R_readrank">
<div id="wjcelcm34c" class="phpmain1_4R_readrank_top">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/hotarticle2.png" alt="" />
<h2>Topik panas</h2>
</div>
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottom">
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms">
<a href="http://ipnx.cn/ms/faq/laravel-tutori" title="Tutorial Laravel" class="phpgenera_Details_mainR4_bottom_title">Tutorial Laravel</a>
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms_info">
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/eyess.png" alt="" />
<span>1597</span>
</div>
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/tiezi.png" alt="" />
<span>29</span>
</div>
</div>
</div>
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms">
<a href="http://ipnx.cn/ms/faq/php-tutorial" title="Tutorial PHP" class="phpgenera_Details_mainR4_bottom_title">Tutorial PHP</a>
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms_info">
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/eyess.png" alt="" />
<span>1488</span>
</div>
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/tiezi.png" alt="" />
<span>72</span>
</div>
</div>
</div>
</div>
<div id="wjcelcm34c" class="phpgenera_Details_mainR3_more">
<a href="http://ipnx.cn/ms/faq/zt">Tunjukkan Lagi</a>
</div>
</div>
</div>
</div>
</div>
<div id="wjcelcm34c" class="Article_Details_main2">
<div id="wjcelcm34c" class="phpgenera_Details_mainL4">
<div id="wjcelcm34c" class="phpmain1_2_top">
<a href="javascript:void(0);" class="phpmain1_2_top_title">Related knowledge<img
src="/static/imghw/index2_title2.png" alt="" /></a>
</div>
<div id="wjcelcm34c" class="phpgenera_Details_mainL4_info">
<div id="wjcelcm34c" class="phphistorical_Version2_mids">
<a href="http://ipnx.cn/ms/faq/1796829560.html" title="Bagaimanakah pengumpulan sampah berfungsi di 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/175156097152256.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Bagaimanakah pengumpulan sampah berfungsi di JavaScript?" />
</a>
<a href="http://ipnx.cn/ms/faq/1796829560.html" title="Bagaimanakah pengumpulan sampah berfungsi di JavaScript?" class="phphistorical_Version2_mids_title">Bagaimanakah pengumpulan sampah berfungsi di JavaScript?</a>
<span id="wjcelcm34c" class="Articlelist_txts_time">Jul 04, 2025 am 12:42 AM</span>
<p class="Articlelist_txts_p">Mekanisme pengumpulan sampah JavaScript secara automatik menguruskan memori melalui algoritma pembersihan tag untuk mengurangkan risiko kebocoran ingatan. Enjin melintasi dan menandakan objek aktif dari objek akar, dan tidak bertanda dianggap sebagai sampah dan dibersihkan. Sebagai contoh, apabila objek tidak lagi dirujuk (seperti menetapkan pembolehubah kepada null), ia akan dikeluarkan dalam pusingan seterusnya kitar semula. Punca kebocoran memori yang biasa termasuk: ① Pemasa atau pendengar peristiwa yang tidak jelas; ② Rujukan kepada pembolehubah luaran dalam penutupan; ③ Pembolehubah global terus memegang sejumlah besar data. Enjin V8 mengoptimumkan kecekapan kitar semula melalui strategi seperti kitar semula generasi, penandaan tambahan, kitar semula selari/serentak, dan mengurangkan masa menyekat benang utama. Semasa pembangunan, rujukan global yang tidak perlu harus dielakkan dan persatuan objek harus dihiasi dengan segera untuk meningkatkan prestasi dan kestabilan.</p>
</div>
<div id="wjcelcm34c" class="phphistorical_Version2_mids">
<a href="http://ipnx.cn/ms/faq/1796836217.html" title="Bagaimana membuat permintaan HTTP di 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="Bagaimana membuat permintaan HTTP di node.js?" />
</a>
<a href="http://ipnx.cn/ms/faq/1796836217.html" title="Bagaimana membuat permintaan HTTP di node.js?" class="phphistorical_Version2_mids_title">Bagaimana membuat permintaan HTTP di node.js?</a>
<span id="wjcelcm34c" class="Articlelist_txts_time">Jul 13, 2025 am 02:18 AM</span>
<p class="Articlelist_txts_p">Terdapat tiga cara biasa untuk memulakan permintaan HTTP dalam node.js: Gunakan modul terbina dalam, axios, dan nod-fetch. 1. Gunakan modul HTTP/HTTPS terbina dalam tanpa kebergantungan, yang sesuai untuk senario asas, tetapi memerlukan pemprosesan manual jahitan data dan pemantauan ralat, seperti menggunakan https.get () untuk mendapatkan data atau menghantar permintaan pos melalui .write (); 2.AXIOS adalah perpustakaan pihak ketiga berdasarkan janji. Ia mempunyai sintaks ringkas dan fungsi yang kuat, menyokong async/menunggu, penukaran JSON automatik, pemintas, dan lain -lain. Adalah disyorkan untuk memudahkan operasi permintaan tak segerak; 3.Node-Fetch menyediakan gaya yang serupa dengan pengambilan penyemak imbas, berdasarkan janji dan sintaks mudah</p>
</div>
<div id="wjcelcm34c" class="phphistorical_Version2_mids">
<a href="http://ipnx.cn/ms/faq/1796836292.html" title="Jenis Data JavaScript: Rujukan primitif 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="Jenis Data JavaScript: Rujukan primitif vs" />
</a>
<a href="http://ipnx.cn/ms/faq/1796836292.html" title="Jenis Data JavaScript: Rujukan primitif vs" class="phphistorical_Version2_mids_title">Jenis Data JavaScript: Rujukan primitif vs</a>
<span id="wjcelcm34c" class="Articlelist_txts_time">Jul 13, 2025 am 02:43 AM</span>
<p class="Articlelist_txts_p">Jenis data JavaScript dibahagikan kepada jenis primitif dan jenis rujukan. Jenis primitif termasuk rentetan, nombor, boolean, null, undefined, dan simbol. Nilai -nilai tidak berubah dan salinan disalin apabila memberikan nilai, jadi mereka tidak mempengaruhi satu sama lain; Jenis rujukan seperti objek, tatasusunan dan fungsi menyimpan alamat memori, dan pembolehubah menunjuk objek yang sama akan mempengaruhi satu sama lain. Typeof dan Instanceof boleh digunakan untuk menentukan jenis, tetapi memberi perhatian kepada isu -isu sejarah TypeOfNull. Memahami kedua -dua jenis perbezaan ini dapat membantu menulis kod yang lebih stabil dan boleh dipercayai.</p>
</div>
<div id="wjcelcm34c" class="phphistorical_Version2_mids">
<a href="http://ipnx.cn/ms/faq/1796830657.html" title="React vs angular vs vue: Rangka kerja JS mana yang terbaik?" class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/431/639/175165349052637.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="React vs angular vs vue: Rangka kerja JS mana yang terbaik?" />
</a>
<a href="http://ipnx.cn/ms/faq/1796830657.html" title="React vs angular vs vue: Rangka kerja JS mana yang terbaik?" class="phphistorical_Version2_mids_title">React vs angular vs vue: Rangka kerja JS mana yang terbaik?</a>
<span id="wjcelcm34c" class="Articlelist_txts_time">Jul 05, 2025 am 02:24 AM</span>
<p class="Articlelist_txts_p">Rangka kerja JavaScript mana yang terbaik? Jawapannya ialah memilih yang paling sesuai mengikut keperluan anda. 1. REACT adalah fleksibel dan bebas, sesuai untuk projek sederhana dan besar yang memerlukan penyesuaian tinggi dan keupayaan seni bina pasukan; 2. Angular menyediakan penyelesaian lengkap, sesuai untuk aplikasi peringkat perusahaan dan penyelenggaraan jangka panjang; 3. Vue mudah digunakan, sesuai untuk projek kecil dan sederhana atau perkembangan pesat. Di samping itu, sama ada terdapat timbunan teknologi sedia ada, saiz pasukan, kitaran hayat projek dan sama ada SSR diperlukan juga faktor penting dalam memilih rangka kerja. Singkatnya, tidak ada kerangka terbaik, pilihan terbaik adalah yang sesuai dengan keperluan anda.</p>
</div>
<div id="wjcelcm34c" class="phphistorical_Version2_mids">
<a href="http://ipnx.cn/ms/faq/1796832745.html" title="Objek Masa JavaScript, seseorang membina eactexe, laman web lebih cepat di Google Chrome, dll." 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="Objek Masa JavaScript, seseorang membina eactexe, laman web lebih cepat di Google Chrome, dll." />
</a>
<a href="http://ipnx.cn/ms/faq/1796832745.html" title="Objek Masa JavaScript, seseorang membina eactexe, laman web lebih cepat di Google Chrome, dll." class="phphistorical_Version2_mids_title">Objek Masa JavaScript, seseorang membina eactexe, laman web lebih cepat di Google Chrome, dll.</a>
<span id="wjcelcm34c" class="Articlelist_txts_time">Jul 08, 2025 pm 02:27 PM</span>
<p class="Articlelist_txts_p">Helo, pemaju JavaScript! Selamat datang ke berita JavaScript minggu ini! Minggu ini kami akan memberi tumpuan kepada: Pertikaian tanda dagangan Oracle dengan Deno, objek masa JavaScript baru disokong oleh pelayar, kemas kini Google Chrome, dan beberapa alat pemaju yang kuat. Mari mulakan! Pertikaian tanda dagangan Oracle dengan percubaan Deno Oracle untuk mendaftarkan tanda dagangan "JavaScript" telah menyebabkan kontroversi. Ryan Dahl, pencipta Node.js dan Deno, telah memfailkan petisyen untuk membatalkan tanda dagangan, dan dia percaya bahawa JavaScript adalah standard terbuka dan tidak boleh digunakan oleh Oracle</p>
</div>
<div id="wjcelcm34c" class="phphistorical_Version2_mids">
<a href="http://ipnx.cn/ms/faq/1796829862.html" title="Pemahaman dengan segera menggunakan Ekspresi Fungsi (Iife) dalam 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/175156814092778.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Pemahaman dengan segera menggunakan Ekspresi Fungsi (Iife) dalam JavaScript" />
</a>
<a href="http://ipnx.cn/ms/faq/1796829862.html" title="Pemahaman dengan segera menggunakan Ekspresi Fungsi (Iife) dalam JavaScript" class="phphistorical_Version2_mids_title">Pemahaman dengan segera menggunakan Ekspresi Fungsi (Iife) dalam JavaScript</a>
<span id="wjcelcm34c" class="Articlelist_txts_time">Jul 04, 2025 am 02:42 AM</span>
<p class="Articlelist_txts_p">IIFE (Segera Dilanjutkan FunctionExpression) adalah ekspresi fungsi yang dilaksanakan dengan segera selepas definisi, digunakan untuk mengasingkan pembolehubah dan mengelakkan mencemarkan skop global. Ia dipanggil dengan membungkus fungsi dalam kurungan untuk menjadikannya ungkapan dan sepasang kurungan segera diikuti olehnya, seperti (fungsi () {/code/}) ();. Penggunaan terasnya termasuk: 1. Elakkan konflik berubah -ubah dan mencegah pertindihan penamaan antara skrip berganda; 2. Buat skop peribadi untuk menjadikan pembolehubah dalaman tidak kelihatan; 3. Kod modular untuk memudahkan permulaan tanpa mendedahkan terlalu banyak pembolehubah. Kaedah penulisan biasa termasuk versi yang diluluskan dengan parameter dan versi fungsi anak panah ES6, tetapi perhatikan bahawa ungkapan dan ikatan mesti digunakan.</p>
</div>
<div id="wjcelcm34c" class="phphistorical_Version2_mids">
<a href="http://ipnx.cn/ms/faq/1796832608.html" title="Mengendalikan Janji: Chaining, Pengendalian Kesalahan, dan Janji Gabungan di 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="Mengendalikan Janji: Chaining, Pengendalian Kesalahan, dan Janji Gabungan di JavaScript" />
</a>
<a href="http://ipnx.cn/ms/faq/1796832608.html" title="Mengendalikan Janji: Chaining, Pengendalian Kesalahan, dan Janji Gabungan di JavaScript" class="phphistorical_Version2_mids_title">Mengendalikan Janji: Chaining, Pengendalian Kesalahan, dan Janji Gabungan di JavaScript</a>
<span id="wjcelcm34c" class="Articlelist_txts_time">Jul 08, 2025 am 02:40 AM</span>
<p class="Articlelist_txts_p">Janji adalah mekanisme teras untuk mengendalikan operasi tak segerak dalam JavaScript. Memahami panggilan rantaian, pengendalian ralat dan gabungan adalah kunci untuk menguasai aplikasi mereka. 1. Panggilan rantai mengembalikan janji baru melalui .then () untuk merealisasikan persamaan proses tak segerak. Setiap .then () menerima hasil sebelumnya dan boleh mengembalikan nilai atau janji; 2. Pengendalian ralat harus menggunakan .catch () untuk menangkap pengecualian untuk mengelakkan kegagalan senyap, dan boleh mengembalikan nilai lalai dalam tangkapan untuk meneruskan proses; 3. Gabungan seperti janji.all () (berjaya hanya berjaya selepas semua kejayaan), janji.race () (penyempurnaan pertama dikembalikan) dan janji.allsettled () (menunggu semua penyelesaian)</p>
</div>
<div id="wjcelcm34c" class="phphistorical_Version2_mids">
<a href="http://ipnx.cn/ms/faq/1796832618.html" title="Apakah API cache dan bagaimana ia digunakan dengan pekerja perkhidmatan?" 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="Apakah API cache dan bagaimana ia digunakan dengan pekerja perkhidmatan?" />
</a>
<a href="http://ipnx.cn/ms/faq/1796832618.html" title="Apakah API cache dan bagaimana ia digunakan dengan pekerja perkhidmatan?" class="phphistorical_Version2_mids_title">Apakah API cache dan bagaimana ia digunakan dengan pekerja perkhidmatan?</a>
<span id="wjcelcm34c" class="Articlelist_txts_time">Jul 08, 2025 am 02:43 AM</span>
<p class="Articlelist_txts_p">CACHEAPI adalah alat yang disediakan oleh penyemak imbas kepada permintaan rangkaian cache, yang sering digunakan bersempena dengan ServiceWorker untuk meningkatkan prestasi laman web dan pengalaman luar talian. 1. Ia membolehkan pemaju menyimpan sumber secara manual seperti skrip, helaian gaya, gambar, dan lain -lain; 2. Ia boleh memadankan tindak balas cache mengikut permintaan; 3. Ia menyokong memotong cache tertentu atau membersihkan seluruh cache; 4. Ia boleh melaksanakan keutamaan cache atau strategi keutamaan rangkaian melalui perkhidmatan pekerja yang mendengar acara mengambil; 5. Ia sering digunakan untuk sokongan luar talian, mempercepat kelajuan akses berulang, sumber utama dan kandungan kemas kini latar belakang; 6. Apabila menggunakannya, anda perlu memberi perhatian kepada kawalan versi cache, sekatan penyimpanan dan perbezaan dari mekanisme caching HTTP.</p>
</div>
</div>
<a href="http://ipnx.cn/ms/web-designer.html" class="phpgenera_Details_mainL4_botton">
<span>See all articles</span>
<img src="/static/imghw/down_right.png" alt="" />
</a>
</div>
</div>
</div>
</main>
<footer>
<div id="wjcelcm34c" class="footer">
<div id="wjcelcm34c" class="footertop">
<img src="/static/imghw/logo.png" alt="">
<p>Latihan PHP dalam talian kebajikan awam，Bantu pelajar PHP berkembang dengan cepat！</p>
</div>
<div id="wjcelcm34c" class="footermid">
<a href="http://ipnx.cn/ms/about/us.html">Tentang kita</a>
<a href="http://ipnx.cn/ms/about/disclaimer.html">Penafian</a>
<a href="http://ipnx.cn/ms/update/article_0_1.html">Sitemap</a>
</div>
<div id="wjcelcm34c" class="footerbottom">
<p>
? php.cn All rights reserved
</p>
</div>
</div>
</footer>
<input type="hidden" id="verifycode" value="/captcha.html">
<link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css?2' type='text/css' media='all' />
<footer>
<div class="friendship-link">
<p>感谢您访问我们的网站，您可能还对以下资源感兴趣：</p>
<a href="http://ipnx.cn/" title="亚洲国产日韩欧美一区二区三区">亚洲国产日韩欧美一区二区三区</a>
<div class="friend-links">
</div>
</div>
</footer>
<script>
(function(){
var bp = document.createElement('script');
var curProtocol = window.location.protocol.split(':')[0];
if (curProtocol === 'https') {
bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
}
else {
bp.src = 'http://push.zhanzhang.baidu.com/push.js';
}
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(bp, s);
})();
</script>
</body><div id="honej" class="pl_css_ganrao" style="display: none;"><rt id="honej"></rt><progress id="honej"><cite id="honej"><small id="honej"></small></cite></progress><rt id="honej"></rt><output id="honej"><table id="honej"></table></output><small id="honej"></small><th id="honej"><em id="honej"><tr id="honej"><blockquote id="honej"></blockquote></tr></em></th><p id="honej"><label id="honej"><small id="honej"><pre id="honej"></pre></small></label></p><pre id="honej"></pre><nav id="honej"></nav><sub id="honej"></sub><dfn id="honej"></dfn><rp id="honej"></rp><tfoot id="honej"><span id="honej"><wbr id="honej"></wbr></span></tfoot><li id="honej"></li><center id="honej"></center><dl id="honej"></dl><small id="honej"><dfn id="honej"><em id="honej"></em></dfn></small><delect id="honej"><address id="honej"><sup id="honej"></sup></address></delect><u id="honej"></u><strike id="honej"><rt id="honej"><strong id="honej"><strong id="honej"></strong></strong></rt></strike><th id="honej"><strike id="honej"><p id="honej"></p></strike></th><label id="honej"></label><thead id="honej"><sup id="honej"></sup></thead><thead id="honej"><progress id="honej"><meter id="honej"></meter></progress></thead><acronym id="honej"><p id="honej"><strong id="honej"></strong></p></acronym><pre id="honej"><address id="honej"></address></pre><label id="honej"></label><option id="honej"><tr id="honej"><output id="honej"></output></tr></option><pre id="honej"></pre><table id="honej"></table><small id="honej"><td id="honej"><s id="honej"><table id="honej"></table></s></td></small><style id="honej"><u id="honej"><rp id="honej"></rp></u></style><strike id="honej"><span id="honej"></span></strike><optgroup id="honej"></optgroup><pre id="honej"><menu id="honej"></menu></pre><source id="honej"></source><b id="honej"><ins id="honej"><xmp id="honej"><tr id="honej"></tr></xmp></ins></b><abbr id="honej"></abbr><noframes id="honej"></noframes><form id="honej"></form><ins id="honej"></ins><code id="honej"></code><form id="honej"></form><strike id="honej"></strike><del id="honej"><dfn id="honej"><blockquote id="honej"></blockquote></dfn></del><samp id="honej"></samp><optgroup id="honej"><strong id="honej"></strong></optgroup><dl id="honej"><small id="honej"><abbr id="honej"></abbr></small></dl><tfoot id="honej"></tfoot><bdo id="honej"><tr id="honej"><optgroup id="honej"></optgroup></tr></bdo></div>
</html>