You should then create a stage and draw something in it, such as a rectangle, circle, or other shape: <\/p>\n
\/\/ 創(chuàng)建舞臺(tái)\n var stage = acgraph.create('stage-container');\n \/\/ 繪制矩形\n var stage.rect(25, 50, 350, 300);<\/pre>\nThe following is an example on CodePen where we go a step further and draw the Deathly Hallows symbol. <\/p>\n
Our first masterpiece<\/h2>\nFill, stroke and pattern fill<\/h3>\n
Any shape or path can be colored using fill settings and stroke settings. Everything has a stroke (border), but only the shape and closed paths have padding. Fill and stroke settings are very rich, and you can use linear or circular gradients for fill and stroke. Additionally, the lines may be dotted and support image fills with multiple tile modes. But this is all pretty standard stuff you can find in almost any library. What makes GraphicsJS special is its mesh and pattern fill feature, which not only allows you to use 32 (!) of available mesh fill patterns directly, but also allows you to easily create custom patterns made of shapes or text. <\/p>\n
Now, let's see what exactly can be achieved! I will draw a simple drawing of a man standing near the house and fill it with different patterns and colors to enhance it. For simplicity, let's make it a childish art painting (and try not to involve art roughness). That's it: <\/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>\nView the results on CodePen. <\/p>\n
As you can see, we are now using variables – all methods of drawing content on the stage return a reference to the created object and this link can be used to change or delete the object. <\/p>\n
Also note how chain calls (e.g. stage.path().moveTo(320, 330).lineTo(320, 340);<\/code>) are everywhere in GraphicsJS, which helps shorten the code. Chained calls should be used with caution, but if applied properly, it does make the code more compact and easier to read. <\/p>Now, let's hand this coloring page to a child and let them paint. Because even children can master the following techniques: <\/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> This is how our example looks now. <\/p>\n<p>Now, we have a picture of a Highlander standing next to a kilt, standing near his brick castle with straw on the roof. We can even risk saying that this is indeed a work of art that we want to obtain copyright. Let's do this using pattern fills based on custom text: <em>\n<\/em>\n<\/p> As you can see, this is easy to do: you create an instance of a text object, then form a pattern on the stage and put the text into the pattern. <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>View Color copyrighted houses\/graphicsjs on CodePen. <\/p>\n<p>Create a puzzle art game in less than 50 lines of code<\/p>\n<h2>In the next part of this article, I want to show you how to create a Cookie Clicker-like game using GraphicsJS in less than 50 lines of code. <\/h2>\n<p>The game name is <\/p> \"Sweeping the Streets in the Wind\"<p>, and the player plays the role of a scavenger and sweeps the Streets on a windy afternoon in autumn. The game uses some code from the program-generated leaf example in the GraphicsJS gallery. <em>\n<\/em>You can view finished games on CodePen (or the end of the article). <\/p>\n<p>Layers, zIndex and virtual DOM<\/p>\n<h3>We first create a stage (as mentioned before) and then declare some initial variables: <\/h3>\n<p>\n<\/p>For this game, we will use the layer - the object in GraphicsJS used to group elements. If you want to apply similar changes to elements (such as transformations), you must group elements. You can change the layer in pause mode (more on this later), which can improve performance and user experience. <pre class='brush:php;toolbar:false;'> \/\/ 創(chuàng)建舞臺(tái)\n var stage = acgraph.create('stage-container');\n\n \/\/ 繪制框架\n var frame = stage.rect(25, 50, 350, 300);\n\n \/\/ 繪制房子\n var walls = stage.rect(50, 250, 200, 100);\n var roof = stage.path()\n .moveTo(50, 250)\n .lineTo(150, 180)\n .lineTo(250, 250)\n .close();\n\n \/\/ 繪制一個(gè)人\n var head = stage.circle(330, 280, 10);\n var neck = stage.path().moveTo(330, 290).lineTo(330, 300);\n var kilt = stage.triangleUp(330, 320, 20);\n var rightLeg = stage.path().moveTo(320, 330).lineTo(320, 340);\n var leftLeg = stage.path().moveTo(340, 330).lineTo(340, 340);<\/pre>\n<p> In this demo, we use the layer function to help us group the leaves together and avoid them covering the label (it tells us how many leaves are swept). To do this, we create a tag and call the <\/p> method, which creates the stage binding layer. We set the <p> property of this layer to the <code>stage.layer<\/code> property below the label. <code>zIndex<\/code>\n<code>zIndex<\/code>\n<\/p> After doing this, we can make sure that they do not overwrite the text no matter how many leaves we create in the layer. <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>Next, let's add a function to draw our leaves. This uses the convenient GraphicsJS transformation API, which allows you to move, scale, rotate, and cut elements and group of elements. This is a very powerful tool when combined with layers and virtual DOM. <\/h3>\n<p>\n<\/p>You will see that each path is created the same way, but then the conversion will be performed. This will produce a very beautiful random leaf pattern. <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>Processing Events<\/p>\n<h3>Any object, stage, and layer in GraphicsJS can handle events. A complete list of supported events can be found in the EventType API. There are four special events on the stage to control rendering. <\/h3><p> In this game example, we are using an event listener attached to the leaf object so that when the user hovers over them, they disappear one by one. To do this, add the following code to the bottom of the <code>drawLeaves<\/code> function, before the <code>return<\/code> statement: <\/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>Here we can also see that we are using layers to calculate leaves. <\/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>Please note that we don't actually store the number of leaves here. Since we add leaves to a specific layer and remove leaves from them, this allows us to track how many child elements we have (and therefore how many leaves are left). <\/p>\n<p>GraphicsJS provides a virtual DOM that is an abstract, lightweight and separate from browser-specific SVG\/VML implementations. It is very useful for doing many great things like tracking all objects and layers, applying transformations to groups, and optimizing rendering with help allows us to track and control the rendering process. <\/p>\n<h3>Performance Optimization<\/h3>\n<p>The virtual DOM and event handlers allow GraphicsJS users to control rendering. Performance articles can help you understand the relationship between these contents. <\/p>\n<p>When generating leaves in the game, we need to pause the rendering when adding new leaves, and only resume the rendering after all changes are completed: <\/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>This method of dealing with new elements makes new leaves appear almost immediately. <\/p>\n<p> Finally, start everything by calling <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>Final result<\/h3>\n<p>View Street Cleaner\/graphicsjs on CodePen. <\/p>\n<h2>Conclusion<\/h2>\n<p>The transition to HTML5 has changed the network. When it comes to modern web applications and even simple websites, we often encounter tasks that require image processing. While it is impossible to find a solution that works well in every case, you should consider the GraphicsJS library. It is open source, robust, with excellent browser support and many features that make it fun, convenient and of course useful. <\/p>\n<p>I would love to hear your feedback on GrphicsJS in the comments below. Are you already using it? Would you consider using it for a new project? I'd love to know why, or why not use it. I'm also writing a list of major JavaScript drawing libraries and articles that will compare and compare all of them. Feel free to point out the features you wish to see there. <\/p>\n<h2>Link for further reading<\/h2>\n<ul>\n<li>General Information<ul>\n<li>SVG<\/li>\n<li>Canvas<\/li>\n<li>SVG vs. Canvas<\/li>\n<\/ul>\n<\/li>\n<li>Library<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 on GitHub<\/li>\n<li>GraphicsJS Documentation<\/li>\n<li>GraphicsJS API Reference<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<h2>Frequently Asked Questions about GraphicsJS<\/h2>\n<h3>How is GraphicsJS different from other JavaScript graphics libraries? <\/h3>\n<p>GraphicsJS stands out for its powerful and lightweight nature. It is a powerful library that allows developers to draw and animate any graphics with high precision and high performance. Unlike other libraries, GraphicsJS provides a comprehensive set of features including layers, gradients, patterns, and more without affecting speed or efficiency. It also supports all modern browsers, making it a versatile option for developers. <\/p>\n<h3>How to get started with GraphicsJS? <\/h3>\n<p>To get started with GraphicsJS, you need to include the GraphicsJS library in your HTML file. You can download the library from the official website or use CDN. Once the library is included, you can start creating the graphics by calling the appropriate functions and methods provided by the library. <\/p>\n<h3>Can I create complex animations using GraphicsJS? <\/h3>\n<p>Yes, GraphicsJS is designed to handle complex animations easily. It provides a rich set of animation features including easing function, delay and duration settings. You can animate any attribute of a graph, such as its position, size, color, and more. This makes GraphicsJS a powerful tool for creating interactive and dynamic graphics. <\/p>\n<h3>Is GraphicsJS compatible with all browsers? <\/h3>\n<p>GraphicsJS is designed to be compatible with all modern browsers, including Chrome, Firefox, Safari, and Internet Explorer. It uses SVG and VML for rendering, all of which support them. This ensures that your graphics look consistent and perform well on different platforms and devices. <\/p>\n<h3>How to create gradients using GraphicsJS? <\/h3>\n<p>Creating gradients with GraphicsJS is simple. You can use the gradient method to define linear or radial gradients, specify colors and positions, and then apply gradients to any shape. This allows you to create colorful graphics easily. <\/p>\n<h3>Can I create interactive graphics using GraphicsJS? <\/h3>\n<p>Yes, GraphicsJS provides a set of event handling capabilities that allow you to create interactive graphics. You can attach an event listener to any graph, allowing you to respond to user actions such as clicks, mouse movements, and more. This makes GraphicsJS an excellent choice for creating interactive web applications. <\/p>\n<h3>Does GraphicsJS support layers? <\/h3>\n<p>Yes, GraphicsJS supports layers, allowing you to organize graphics into separate groups. Each layer can be operated independently, making it easier to manage complex graphics. You can also control the visibility and z-order of each layer, allowing fine-grained control of the graphics. <\/p>\n<h3>How to optimize my graphics using GraphicsJS? <\/h3>\n<p>GraphicsJS provides several features that can help you optimize your graphics. For example, you can use the crop method to hide parts of the graphics outside of a specified area, thereby reducing the amount of rendering required. You can also use the cache method to store rendered output of the graphics, thereby improving performance when you repaint the graphics frequently. <\/p>\n<h3>Can I create charts and graphics using GraphicsJS? <\/h3>\n<p>While GraphicsJS is not designed specifically for creating charts and graphics, its powerful drawing and animation capabilities allow it to create any type of graphics, including charts and graphics. You can use the library's methods to draw lines, curves, rectangles, circles, and more to create various chart types. <\/p>\n<h3>Is GraphicsJS free to use? <\/h3>\n<p>Yes, GraphicsJS is a free open source library. You can use it for free in your project. The library is also actively maintained to ensure it is in sync with the latest web standards and technologies. <\/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/" 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="Community" class="head_nava head_nava-template1">Community</a>
<div class="wjcelcm34c" id="dropdown-template1" style="display: none;">
<div id="wjcelcm34c" class="languagechoose">
<a href="http://ipnx.cn/article.html" title="Articles" class="languagechoosea on">Articles</a>
<a href="http://ipnx.cn/faq/zt" title="Topics" class="languagechoosea">Topics</a>
<a href="http://ipnx.cn/wenda.html" title="Q&A" class="languagechoosea">Q&A</a>
</div>
</div>
</div>
<div id="wjcelcm34c" class="head_navs">
<a href="javascript:;" title="Learn" class="head_nava head_nava-template1_1">Learn</a>
<div class="wjcelcm34c" id="dropdown-template1_1" style="display: none;">
<div id="wjcelcm34c" class="languagechoose">
<a href="http://ipnx.cn/course.html" title="Course" class="languagechoosea on">Course</a>
<a href="http://ipnx.cn/dic/" title="Programming Dictionary" class="languagechoosea">Programming Dictionary</a>
</div>
</div>
</div>
<div id="wjcelcm34c" class="head_navs">
<a href="javascript:;" title="Tools Library" class="head_nava head_nava-template1_2">Tools Library</a>
<div class="wjcelcm34c" id="dropdown-template1_2" style="display: none;">
<div id="wjcelcm34c" class="languagechoose">
<a href="http://ipnx.cn/toolset/development-tools" title="Development tools" class="languagechoosea on">Development tools</a>
<a href="http://ipnx.cn/toolset/website-source-code" title="Website Source Code" class="languagechoosea">Website Source Code</a>
<a href="http://ipnx.cn/toolset/php-libraries" title="PHP Libraries" class="languagechoosea">PHP Libraries</a>
<a href="http://ipnx.cn/toolset/js-special-effects" title="JS special effects" class="languagechoosea on">JS special effects</a>
<a href="http://ipnx.cn/toolset/website-materials" title="Website Materials" class="languagechoosea on">Website Materials</a>
<a href="http://ipnx.cn/toolset/extension-plug-ins" title="Extension plug-ins" class="languagechoosea on">Extension plug-ins</a>
</div>
</div>
</div>
<div id="wjcelcm34c" class="head_navs">
<a href="http://ipnx.cn/ai" title="AI Tools" class="head_nava head_nava-template1_3">AI Tools</a>
</div>
<div id="wjcelcm34c" class="head_navs">
<a href="javascript:;" title="Leisure" class="head_nava head_nava-template1_3">Leisure</a>
<div class="wjcelcm34c" id="dropdown-template1_3" style="display: none;">
<div id="wjcelcm34c" class="languagechoose">
<a href="http://ipnx.cn/game" title="Game Download" class="languagechoosea on">Game Download</a>
<a href="http://ipnx.cn/mobile-game-tutorial/" title="Game Tutorials" class="languagechoosea">Game Tutorials</a>
</div>
</div>
</div>
</div>
</div>
<div id="wjcelcm34c" class="head_search">
<input id="key_words" onkeydown="if (event.keyCode == 13) searchs('en')" class="search-input" type="text" autocomplete="off" name="keywords" required="required" placeholder="Block,address,transaction,news" value="">
<a href="javascript:;" title="search" onclick="searchs('en')"><img src="/static/imghw/find.png" alt="search"></a>
</div>
<div id="wjcelcm34c" class="head_right">
<div id="wjcelcm34c" class="haed_language">
<a href="javascript:;" class="layui-btn haed_language_btn">English<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="簡(jiǎn)體中文" class="languagechoosea">簡(jiǎn)體中文</a>
<a href="javascript:;" title="English" class="languagechoosea">English</a>
<a href="javascript:setlang('zh-tw');" title="繁體中文" class="languagechoosea">繁體中文</a>
<a href="javascript:setlang('ja');" title="日本語(yǔ)" class="languagechoosea">日本語(yǔ)</a>
<a href="javascript:setlang('ko');" title="???" class="languagechoosea">???</a>
<a href="javascript:setlang('ms');" title="Melayu" class="languagechoosea">Melayu</a>
<a href="javascript:setlang('fr');" title="Fran?ais" class="languagechoosea">Fran?ais</a>
<a href="javascript: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">Table of Contents</div>
<div id="wjcelcm34c" class="Article_Details_main1L2" id="Article_Details_main1L2">
<!-- 左側(cè)懸浮，文章定位標(biāo)題1 id="Article_Details_main1L2s_1"-->
<div id="wjcelcm34c" class="Article_Details_main1L2s ">
<a href="#Key-Points" title="Key Points" >Key Points</a>
</div>
<div id="wjcelcm34c" class="Article_Details_main1L2s ">
<a href="#Why-choose-GraphicsJS" title="Why choose GraphicsJS" >Why choose GraphicsJS</a>
</div>
<div id="wjcelcm34c" class="Article_Details_main1L2s ">
<a href="#GraphicsJS-Basics" title="GraphicsJS Basics" >GraphicsJS Basics</a>
</div>
<div id="wjcelcm34c" class="Article_Details_main1L2s ">
<a href="#Our-first-masterpiece" title="Our first masterpiece" >Our first masterpiece</a>
</div>
<div id="wjcelcm34c" class="Article_Details_main1L2s ">
<a href="#Fill-stroke-and-pattern-fill" title="Fill, stroke and pattern fill" >Fill, stroke and pattern fill</a>
</div>
<div id="wjcelcm34c" class="Article_Details_main1L2s ">
<a href="#In-the-next-part-of-this-article-I-want-to-show-you-how-to-create-a-Cookie-Clicker-like-game-using-GraphicsJS-in-less-than-lines-of-code" title="In the next part of this article, I want to show you how to create a Cookie Clicker-like game using GraphicsJS in less than 50 lines of code. " >In the next part of this article, I want to show you how to create a Cookie Clicker-like game using GraphicsJS in less than 50 lines of code. </a>
</div>
<div id="wjcelcm34c" class="Article_Details_main1L2s ">
<a href="#We-first-create-a-stage-as-mentioned-before-and-then-declare-some-initial-variables" title="We first create a stage (as mentioned before) and then declare some initial variables: " >We first create a stage (as mentioned before) and then declare some initial variables: </a>
</div>
<div id="wjcelcm34c" class="Article_Details_main1L2s ">
<a href="#Next-let-s-add-a-function-to-draw-our-leaves-This-uses-the-convenient-GraphicsJS-transformation-API-which-allows-you-to-move-scale-rotate-and-cut-elements-and-group-of-elements-This-is-a-very-powerful-tool-when-combined-with-layers-and-virtual-DOM" title="Next, let's add a function to draw our leaves. This uses the convenient GraphicsJS transformation API, which allows you to move, scale, rotate, and cut elements and group of elements. This is a very powerful tool when combined with layers and virtual DOM. " >Next, let's add a function to draw our leaves. This uses the convenient GraphicsJS transformation API, which allows you to move, scale, rotate, and cut elements and group of elements. This is a very powerful tool when combined with layers and virtual DOM. </a>
</div>
<div id="wjcelcm34c" class="Article_Details_main1L2s ">
<a href="#Any-object-stage-and-layer-in-GraphicsJS-can-handle-events-A-complete-list-of-supported-events-can-be-found-in-the-EventType-API-There-are-four-special-events-on-the-stage-to-control-rendering" title="Any object, stage, and layer in GraphicsJS can handle events. A complete list of supported events can be found in the EventType API. There are four special events on the stage to control rendering. " >Any object, stage, and layer in GraphicsJS can handle events. A complete list of supported events can be found in the EventType API. There are four special events on the stage to control rendering. </a>
</div>
<div id="wjcelcm34c" class="Article_Details_main1L2s ">
<a href="#Performance-Optimization" title="Performance Optimization" >Performance Optimization</a>
</div>
<div id="wjcelcm34c" class="Article_Details_main1L2s ">
<a href="#Final-result" title="Final result" >Final result</a>
</div>
<div id="wjcelcm34c" class="Article_Details_main1L2s ">
<a href="#Conclusion" title="Conclusion" >Conclusion</a>
</div>
<div id="wjcelcm34c" class="Article_Details_main1L2s ">
<a href="#Link-for-further-reading" title="Link for further reading" >Link for further reading</a>
</div>
<div id="wjcelcm34c" class="Article_Details_main1L2s ">
<a href="#Frequently-Asked-Questions-about-GraphicsJS" title="Frequently Asked Questions about GraphicsJS" >Frequently Asked Questions about GraphicsJS</a>
</div>
<div id="wjcelcm34c" class="Article_Details_main1L2s ">
<a href="#How-is-GraphicsJS-different-from-other-JavaScript-graphics-libraries" title="How is GraphicsJS different from other JavaScript graphics libraries? " >How is GraphicsJS different from other JavaScript graphics libraries? </a>
</div>
<div id="wjcelcm34c" class="Article_Details_main1L2s ">
<a href="#How-to-get-started-with-GraphicsJS" title="How to get started with GraphicsJS? " >How to get started with GraphicsJS? </a>
</div>
<div id="wjcelcm34c" class="Article_Details_main1L2s ">
<a href="#Can-I-create-complex-animations-using-GraphicsJS" title="Can I create complex animations using GraphicsJS? " >Can I create complex animations using GraphicsJS? </a>
</div>
<div id="wjcelcm34c" class="Article_Details_main1L2s ">
<a href="#Is-GraphicsJS-compatible-with-all-browsers" title="Is GraphicsJS compatible with all browsers? " >Is GraphicsJS compatible with all browsers? </a>
</div>
<div id="wjcelcm34c" class="Article_Details_main1L2s ">
<a href="#How-to-create-gradients-using-GraphicsJS" title="How to create gradients using GraphicsJS? " >How to create gradients using GraphicsJS? </a>
</div>
<div id="wjcelcm34c" class="Article_Details_main1L2s ">
<a href="#Can-I-create-interactive-graphics-using-GraphicsJS" title="Can I create interactive graphics using GraphicsJS? " >Can I create interactive graphics using GraphicsJS? </a>
</div>
<div id="wjcelcm34c" class="Article_Details_main1L2s ">
<a href="#Does-GraphicsJS-support-layers" title="Does GraphicsJS support layers? " >Does GraphicsJS support layers? </a>
</div>
<div id="wjcelcm34c" class="Article_Details_main1L2s ">
<a href="#How-to-optimize-my-graphics-using-GraphicsJS" title="How to optimize my graphics using GraphicsJS? " >How to optimize my graphics using GraphicsJS? </a>
</div>
<div id="wjcelcm34c" class="Article_Details_main1L2s ">
<a href="#Can-I-create-charts-and-graphics-using-GraphicsJS" title="Can I create charts and graphics using GraphicsJS? " >Can I create charts and graphics using GraphicsJS? </a>
</div>
<div id="wjcelcm34c" class="Article_Details_main1L2s ">
<a href="#Is-GraphicsJS-free-to-use" title="Is GraphicsJS free to use? " >Is GraphicsJS free to use? </a>
</div>
</div>
</div>
</div>
<div id="wjcelcm34c" class="Article_Details_main1M">
<div id="wjcelcm34c" class="phpgenera_Details_mainL1">
<a href="http://ipnx.cn/" title="Home"
class="phpgenera_Details_mainL1a">Home</a>
<img src="/static/imghw/top_right.png" alt="" />
<a href="http://ipnx.cn/web-designer.html"
class="phpgenera_Details_mainL1a">Web Front-end</a>
<img src="/static/imghw/top_right.png" alt="" />
<a href="http://ipnx.cn/js-tutorial.html"
class="phpgenera_Details_mainL1a">JS Tutorial</a>
<img src="/static/imghw/top_right.png" alt="" />
<span>Introducing GraphicsJS, a Powerful Lightweight Graphics Library</span>
</div>
<div id="wjcelcm34c" class="Articlelist_txts">
<div id="wjcelcm34c" class="Articlelist_txts_info">
<h1 class="Articlelist_txts_title">Introducing GraphicsJS, a Powerful Lightweight Graphics Library</h1>
<div id="wjcelcm34c" class="Articlelist_txts_info_head">
<div id="wjcelcm34c" class="author_info">
<a href="http://ipnx.cn/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/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: The cornerstone of modern networks. Today, SVG and Canvas are often the technology of choice when creating interactive images—Flash has been forgotten, Silverlight has become a rare unicorn at the edge of the network, and few people remember third-party plugins. </p>
<p>The pros and cons of each technique are well documented, but in short, SVG is better suited to creating and handling interactive elements. This is because SVG is an XML-based vector format that when an image is loaded into a page using the <code><svg></svg></code> tag, each element in it can be used in the SVG DOM. </p>
<p>In this article, I want to introduce you to GraphicsJS, a new and powerful open source JavaScript drawing library based on SVG (for older IE versions, it has a VML alternative). I'll start by quickly introducing its basics and then showcase the library's capabilities with two short and wonderful examples: the first example is entirely about art, and the second example shows how to write a simple one in less than 50 lines of code Puzzle art game. </p>
<h2 id="Key-Points">Key Points</h2>
<ul>
<li>GraphicsJS is a new, powerful, open source JavaScript drawing library based on SVG and provides VML alternatives for older IE versions. It is lightweight and flexible, with rich JavaScript APIs. </li>
<li>Published by AnyChart, the library has been rendered in AnyChart's proprietary products for at least three years, ensuring its robustness. Unlike AnyChart's JavaScript drawing gallery, GraphicsJS is available for free for commercial and nonprofit projects. </li>
<li>GraphicsJS is cross-browser compatibility and supports Internet Explorer 6.0, Safari 3.0, Firefox 3.0, and Opera 9.5. It is rendered in VML in older IE versions and in SVG in all other browsers. </li>
<li>This library allows the combination of graphics and animation, including animated bonfires, rotating galaxies, rainfall, and playable 15 puzzle games. It also contains detailed documentation and comprehensive API references. </li>
<li>The GraphicsJS library can be used to create interactive web applications, including layers, gradients, patterns, event processing, and performance optimization. It also supports complex animations and transformations, making it a versatile option for developers. </li>
</ul>
<h2 id="Why-choose-GraphicsJS">Why choose GraphicsJS</h2>
<p>There are many libraries that help developers use SVG: Rapha?l, Snap.svg, and BonsaiJS, to name just a few of the best libraries. These libraries each have their pros and cons, but a thorough comparison of them will be the subject of another article. This article is about GraphicsJS, so let me explain what it has and what it has. </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>First of all, GraphicsJS is lightweight and has a very flexible JavaScript API. It implements many rich text features, as well as a virtual DOM separate from browser-specific HTML DOM implementations. </p>
<p>Secondly, it is a new open source JavaScript library released last fall by AnyChart, one of the world's leading interactive data visualization software developers. AnyChart has been using GraphicsJS for at least three years (since the release of AnyChart 7.0) to render charts in its proprietary products, so GraphicsJS is fully combat-tested. (Disclaimer: I am the Head of R&D at AnyChart and the Lead Developer at GraphicsJS) </p>
<p>Third, unlike AnyChart's JavaScript drawing library, GraphicsJS is available for free for commercial and nonprofit projects. It is available on GitHub under the Apache license. </p>
<p>Fourth, GraphicsJS has cross-browser compatibility and supports Internet Explorer 6.0, Safari 3.0, Firefox 3.0, and Opera 9.5. It is rendered in VML in older IE versions and in SVG in all other browsers. </p>
<p>Lastly, GraphicsJS allows you to combine graphics and animations perfectly. Check out its main gallery, including animated bonfires, spinning galaxies, rainfall, procedurally generated leaves, playable 15 puzzle games and more. GraphicsJS contains more examples in its detailed documentation and comprehensive API reference. </p>
<h2 id="GraphicsJS-Basics">GraphicsJS Basics</h2>
<p>To get started with GraphicsJS, you need to reference the library and create a block-level HTML element for the drawing: </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> You should then create a stage and draw something in it, such as a rectangle, circle, or other shape: </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>The following is an example on CodePen where we go a step further and draw the Deathly Hallows symbol. </p>
<h2 id="Our-first-masterpiece">Our first masterpiece</h2>
<h3 id="Fill-stroke-and-pattern-fill">Fill, stroke and pattern fill</h3>
<p> Any shape or path can be colored using fill settings and stroke settings. Everything has a stroke (border), but only the shape and closed paths have padding. Fill and stroke settings are very rich, and you can use linear or circular gradients for fill and stroke. Additionally, the lines may be dotted and support image fills with multiple tile modes. But this is all pretty standard stuff you can find in almost any library. What makes GraphicsJS special is its mesh and pattern fill feature, which not only allows you to use 32 (!) of available mesh fill patterns directly, but also allows you to easily create custom patterns made of shapes or text. </p>
<p>Now, let's see what exactly can be achieved! I will draw a simple drawing of a man standing near the house and fill it with different patterns and colors to enhance it. For simplicity, let's make it a childish art painting (and try not to involve art roughness). That's it: </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>View the results on CodePen. </p>
<p> As you can see, we are now using variables – all methods of drawing content on the stage return a reference to the created object and this link can be used to change or delete the object. </p>
<p> Also note how chain calls (e.g. <code>stage.path().moveTo(320, 330).lineTo(320, 340);</code>) are everywhere in GraphicsJS, which helps shorten the code. Chained calls should be used with caution, but if applied properly, it does make the code more compact and easier to read. </p><p>Now, let's hand this coloring page to a child and let them paint. Because even children can master the following techniques: </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> This is how our example looks now. </p>
<p>Now, we have a picture of a Highlander standing next to a kilt, standing near his brick castle with straw on the roof. We can even risk saying that this is indeed a work of art that we want to obtain copyright. Let's do this using pattern fills based on custom text: <em>
</em>
</p> As you can see, this is easy to do: you create an instance of a text object, then form a pattern on the stage and put the text into the pattern. <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>View Color copyrighted houses/graphicsjs on CodePen. </p>
<p>Create a puzzle art game in less than 50 lines of code</p>
<h2 id="In-the-next-part-of-this-article-I-want-to-show-you-how-to-create-a-Cookie-Clicker-like-game-using-GraphicsJS-in-less-than-lines-of-code">In the next part of this article, I want to show you how to create a Cookie Clicker-like game using GraphicsJS in less than 50 lines of code. </h2>
<p>The game name is </p> "Sweeping the Streets in the Wind"<p>, and the player plays the role of a scavenger and sweeps the Streets on a windy afternoon in autumn. The game uses some code from the program-generated leaf example in the GraphicsJS gallery. <em>
</em>You can view finished games on CodePen (or the end of the article). </p>
<p>Layers, zIndex and virtual DOM</p>
<h3 id="We-first-create-a-stage-as-mentioned-before-and-then-declare-some-initial-variables">We first create a stage (as mentioned before) and then declare some initial variables: </h3>
<p>
</p>For this game, we will use the layer - the object in GraphicsJS used to group elements. If you want to apply similar changes to elements (such as transformations), you must group elements. You can change the layer in pause mode (more on this later), which can improve performance and user experience. <pre class='brush:php;toolbar:false;'> // 創(chuàng)建舞臺(tái)
var stage = acgraph.create('stage-container');
// 繪制框架
var frame = stage.rect(25, 50, 350, 300);
// 繪制房子
var walls = stage.rect(50, 250, 200, 100);
var roof = stage.path()
.moveTo(50, 250)
.lineTo(150, 180)
.lineTo(250, 250)
.close();
// 繪制一個(gè)人
var head = stage.circle(330, 280, 10);
var neck = stage.path().moveTo(330, 290).lineTo(330, 300);
var kilt = stage.triangleUp(330, 320, 20);
var rightLeg = stage.path().moveTo(320, 330).lineTo(320, 340);
var leftLeg = stage.path().moveTo(340, 330).lineTo(340, 340);</pre>
<p> In this demo, we use the layer function to help us group the leaves together and avoid them covering the label (it tells us how many leaves are swept). To do this, we create a tag and call the </p> method, which creates the stage binding layer. We set the <p> property of this layer to the <code>stage.layer</code> property below the label. <code>zIndex</code>
<code>zIndex</code>
</p> After doing this, we can make sure that they do not overwrite the text no matter how many leaves we create in the layer. <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="Next-let-s-add-a-function-to-draw-our-leaves-This-uses-the-convenient-GraphicsJS-transformation-API-which-allows-you-to-move-scale-rotate-and-cut-elements-and-group-of-elements-This-is-a-very-powerful-tool-when-combined-with-layers-and-virtual-DOM">Next, let's add a function to draw our leaves. This uses the convenient GraphicsJS transformation API, which allows you to move, scale, rotate, and cut elements and group of elements. This is a very powerful tool when combined with layers and virtual DOM. </h3>
<p>
</p>You will see that each path is created the same way, but then the conversion will be performed. This will produce a very beautiful random leaf pattern. <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>Processing Events</p>
<h3 id="Any-object-stage-and-layer-in-GraphicsJS-can-handle-events-A-complete-list-of-supported-events-can-be-found-in-the-EventType-API-There-are-four-special-events-on-the-stage-to-control-rendering">Any object, stage, and layer in GraphicsJS can handle events. A complete list of supported events can be found in the EventType API. There are four special events on the stage to control rendering. </h3><p> In this game example, we are using an event listener attached to the leaf object so that when the user hovers over them, they disappear one by one. To do this, add the following code to the bottom of the <code>drawLeaves</code> function, before the <code>return</code> statement: </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>Here we can also see that we are using layers to calculate leaves. </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>Please note that we don't actually store the number of leaves here. Since we add leaves to a specific layer and remove leaves from them, this allows us to track how many child elements we have (and therefore how many leaves are left). </p>
<p>GraphicsJS provides a virtual DOM that is an abstract, lightweight and separate from browser-specific SVG/VML implementations. It is very useful for doing many great things like tracking all objects and layers, applying transformations to groups, and optimizing rendering with help allows us to track and control the rendering process. </p>
<h3 id="Performance-Optimization">Performance Optimization</h3>
<p>The virtual DOM and event handlers allow GraphicsJS users to control rendering. Performance articles can help you understand the relationship between these contents. </p>
<p>When generating leaves in the game, we need to pause the rendering when adding new leaves, and only resume the rendering after all changes are completed: </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>This method of dealing with new elements makes new leaves appear almost immediately. </p>
<p> Finally, start everything by calling <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="Final-result">Final result</h3>
<p>View Street Cleaner/graphicsjs on CodePen. </p>
<h2 id="Conclusion">Conclusion</h2>
<p>The transition to HTML5 has changed the network. When it comes to modern web applications and even simple websites, we often encounter tasks that require image processing. While it is impossible to find a solution that works well in every case, you should consider the GraphicsJS library. It is open source, robust, with excellent browser support and many features that make it fun, convenient and of course useful. </p>
<p>I would love to hear your feedback on GrphicsJS in the comments below. Are you already using it? Would you consider using it for a new project? I'd love to know why, or why not use it. I'm also writing a list of major JavaScript drawing libraries and articles that will compare and compare all of them. Feel free to point out the features you wish to see there. </p>
<h2 id="Link-for-further-reading">Link for further reading</h2>
<ul>
<li>General Information<ul>
<li>SVG</li>
<li>Canvas</li>
<li>SVG vs. Canvas</li>
</ul>
</li>
<li>Library<ul>
<li>GraphicsJS</li>
<li>Rapha?l</li>
<li>Snap.svg</li>
<li>BonsaiJS</li>
</ul>
</li>
<li>GraphicsJS<ul>
<li>GraphicsJS on GitHub</li>
<li>GraphicsJS Documentation</li>
<li>GraphicsJS API Reference</li>
</ul>
</li>
</ul>
<h2 id="Frequently-Asked-Questions-about-GraphicsJS">Frequently Asked Questions about GraphicsJS</h2>
<h3 id="How-is-GraphicsJS-different-from-other-JavaScript-graphics-libraries">How is GraphicsJS different from other JavaScript graphics libraries? </h3>
<p>GraphicsJS stands out for its powerful and lightweight nature. It is a powerful library that allows developers to draw and animate any graphics with high precision and high performance. Unlike other libraries, GraphicsJS provides a comprehensive set of features including layers, gradients, patterns, and more without affecting speed or efficiency. It also supports all modern browsers, making it a versatile option for developers. </p>
<h3 id="How-to-get-started-with-GraphicsJS">How to get started with GraphicsJS? </h3>
<p>To get started with GraphicsJS, you need to include the GraphicsJS library in your HTML file. You can download the library from the official website or use CDN. Once the library is included, you can start creating the graphics by calling the appropriate functions and methods provided by the library. </p>
<h3 id="Can-I-create-complex-animations-using-GraphicsJS">Can I create complex animations using GraphicsJS? </h3>
<p>Yes, GraphicsJS is designed to handle complex animations easily. It provides a rich set of animation features including easing function, delay and duration settings. You can animate any attribute of a graph, such as its position, size, color, and more. This makes GraphicsJS a powerful tool for creating interactive and dynamic graphics. </p>
<h3 id="Is-GraphicsJS-compatible-with-all-browsers">Is GraphicsJS compatible with all browsers? </h3>
<p>GraphicsJS is designed to be compatible with all modern browsers, including Chrome, Firefox, Safari, and Internet Explorer. It uses SVG and VML for rendering, all of which support them. This ensures that your graphics look consistent and perform well on different platforms and devices. </p>
<h3 id="How-to-create-gradients-using-GraphicsJS">How to create gradients using GraphicsJS? </h3>
<p>Creating gradients with GraphicsJS is simple. You can use the gradient method to define linear or radial gradients, specify colors and positions, and then apply gradients to any shape. This allows you to create colorful graphics easily. </p>
<h3 id="Can-I-create-interactive-graphics-using-GraphicsJS">Can I create interactive graphics using GraphicsJS? </h3>
<p>Yes, GraphicsJS provides a set of event handling capabilities that allow you to create interactive graphics. You can attach an event listener to any graph, allowing you to respond to user actions such as clicks, mouse movements, and more. This makes GraphicsJS an excellent choice for creating interactive web applications. </p>
<h3 id="Does-GraphicsJS-support-layers">Does GraphicsJS support layers? </h3>
<p>Yes, GraphicsJS supports layers, allowing you to organize graphics into separate groups. Each layer can be operated independently, making it easier to manage complex graphics. You can also control the visibility and z-order of each layer, allowing fine-grained control of the graphics. </p>
<h3 id="How-to-optimize-my-graphics-using-GraphicsJS">How to optimize my graphics using GraphicsJS? </h3>
<p>GraphicsJS provides several features that can help you optimize your graphics. For example, you can use the crop method to hide parts of the graphics outside of a specified area, thereby reducing the amount of rendering required. You can also use the cache method to store rendered output of the graphics, thereby improving performance when you repaint the graphics frequently. </p>
<h3 id="Can-I-create-charts-and-graphics-using-GraphicsJS">Can I create charts and graphics using GraphicsJS? </h3>
<p>While GraphicsJS is not designed specifically for creating charts and graphics, its powerful drawing and animation capabilities allow it to create any type of graphics, including charts and graphics. You can use the library's methods to draw lines, curves, rectangles, circles, and more to create various chart types. </p>
<h3 id="Is-GraphicsJS-free-to-use">Is GraphicsJS free to use? </h3>
<p>Yes, GraphicsJS is a free open source library. You can use it for free in your project. The library is also actively maintained to ensure it is in sync with the latest web standards and technologies. </p><p>The above is the detailed content of Introducing GraphicsJS, a Powerful Lightweight Graphics Library. For more information, please follow other related articles on the PHP Chinese website!</p>
</div>
</div>
<div id="wjcelcm34c" class="wzconShengming_sp">
<div id="wjcelcm34c" class="bzsmdiv_sp">Statement of this Website</div>
<div>The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact 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>Hot Article</h2>
</div>
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottom">
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms">
<a href="http://ipnx.cn/faq/1796832397.html" title="Grass Wonder Build Guide | Uma Musume Pretty Derby" class="phpgenera_Details_mainR4_bottom_title">Grass Wonder Build Guide | Uma Musume Pretty Derby</a>
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms_info">
<span>3 weeks ago</span>
<span>By Jack chen</span>
</div>
</div>
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms">
<a href="http://ipnx.cn/faq/1796833110.html" title="Roblox: 99 Nights In The Forest - All Badges And How To Unlock Them" class="phpgenera_Details_mainR4_bottom_title">Roblox: 99 Nights In The Forest - All Badges And How To Unlock Them</a>
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms_info">
<span>3 weeks ago</span>
<span>By DDD</span>
</div>
</div>
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms">
<a href="http://ipnx.cn/faq/1796831605.html" title="Uma Musume Pretty Derby Banner Schedule (July 2025)" class="phpgenera_Details_mainR4_bottom_title">Uma Musume Pretty Derby Banner Schedule (July 2025)</a>
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms_info">
<span>4 weeks ago</span>
<span>By Jack chen</span>
</div>
</div>
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms">
<a href="http://ipnx.cn/faq/1796829586.html" title="Today's Connections hint and answer 3rd July for 753" class="phpgenera_Details_mainR4_bottom_title">Today's Connections hint and answer 3rd July for 753</a>
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms_info">
<span>1 months ago</span>
<span>By Jack chen</span>
</div>
</div>
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms">
<a href="http://ipnx.cn/faq/1796831905.html" title="Windows Security is blank or not showing options" class="phpgenera_Details_mainR4_bottom_title">Windows Security is blank or not showing options</a>
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms_info">
<span>4 weeks ago</span>
<span>By 下次還敢</span>
</div>
</div>
</div>
<div id="wjcelcm34c" class="phpgenera_Details_mainR3_more">
<a href="http://ipnx.cn/article.html">Show More</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>Hot AI Tools</h2>
</div>
<div id="wjcelcm34c" class="phpgenera_Details_mainR3_bottom">
<div id="wjcelcm34c" class="phpmain_tab2_mids_top">
<a href="http://ipnx.cn/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/ai/undress-ai-tool" title="Undress AI Tool" class="phpmain_tab2_mids_title">
<h3>Undress AI Tool</h3>
</a>
<p>Undress images for free</p>
</div>
</div>
<div id="wjcelcm34c" class="phpmain_tab2_mids_top">
<a href="http://ipnx.cn/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/ai/undresserai-undress" title="Undresser.AI Undress" class="phpmain_tab2_mids_title">
<h3>Undresser.AI Undress</h3>
</a>
<p>AI-powered app for creating realistic nude photos</p>
</div>
</div>
<div id="wjcelcm34c" class="phpmain_tab2_mids_top">
<a href="http://ipnx.cn/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/ai/ai-clothes-remover" title="AI Clothes Remover" class="phpmain_tab2_mids_title">
<h3>AI Clothes Remover</h3>
</a>
<p>Online AI tool for removing clothes from photos.</p>
</div>
</div>
<div id="wjcelcm34c" class="phpmain_tab2_mids_top">
<a href="http://ipnx.cn/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/ai/clothoffio" title="Clothoff.io" class="phpmain_tab2_mids_title">
<h3>Clothoff.io</h3>
</a>
<p>AI clothes remover</p>
</div>
</div>
<div id="wjcelcm34c" class="phpmain_tab2_mids_top">
<a href="http://ipnx.cn/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/ai/video-swap" title="Video Face Swap" class="phpmain_tab2_mids_title">
<h3>Video Face Swap</h3>
</a>
<p>Swap faces in any video effortlessly with our completely free AI face swap tool!</p>
</div>
</div>
</div>
<div id="wjcelcm34c" class="phpgenera_Details_mainR3_more">
<a href="http://ipnx.cn/ai">Show More</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>Hot Article</h2>
</div>
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottom">
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms">
<a href="http://ipnx.cn/faq/1796832397.html" title="Grass Wonder Build Guide | Uma Musume Pretty Derby" class="phpgenera_Details_mainR4_bottom_title">Grass Wonder Build Guide | Uma Musume Pretty Derby</a>
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms_info">
<span>3 weeks ago</span>
<span>By Jack chen</span>
</div>
</div>
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms">
<a href="http://ipnx.cn/faq/1796833110.html" title="Roblox: 99 Nights In The Forest - All Badges And How To Unlock Them" class="phpgenera_Details_mainR4_bottom_title">Roblox: 99 Nights In The Forest - All Badges And How To Unlock Them</a>
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms_info">
<span>3 weeks ago</span>
<span>By DDD</span>
</div>
</div>
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms">
<a href="http://ipnx.cn/faq/1796831605.html" title="Uma Musume Pretty Derby Banner Schedule (July 2025)" class="phpgenera_Details_mainR4_bottom_title">Uma Musume Pretty Derby Banner Schedule (July 2025)</a>
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms_info">
<span>4 weeks ago</span>
<span>By Jack chen</span>
</div>
</div>
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms">
<a href="http://ipnx.cn/faq/1796829586.html" title="Today's Connections hint and answer 3rd July for 753" class="phpgenera_Details_mainR4_bottom_title">Today's Connections hint and answer 3rd July for 753</a>
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms_info">
<span>1 months ago</span>
<span>By Jack chen</span>
</div>
</div>
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms">
<a href="http://ipnx.cn/faq/1796831905.html" title="Windows Security is blank or not showing options" class="phpgenera_Details_mainR4_bottom_title">Windows Security is blank or not showing options</a>
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms_info">
<span>4 weeks ago</span>
<span>By 下次還敢</span>
</div>
</div>
</div>
<div id="wjcelcm34c" class="phpgenera_Details_mainR3_more">
<a href="http://ipnx.cn/article.html">Show More</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>Hot Tools</h2>
</div>
<div id="wjcelcm34c" class="phpgenera_Details_mainR3_bottom">
<div id="wjcelcm34c" class="phpmain_tab2_mids_top">
<a href="http://ipnx.cn/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/toolset/development-tools/92" title="Notepad++7.3.1" class="phpmain_tab2_mids_title">
<h3>Notepad++7.3.1</h3>
</a>
<p>Easy-to-use and free code editor</p>
</div>
</div>
<div id="wjcelcm34c" class="phpmain_tab2_mids_top">
<a href="http://ipnx.cn/toolset/development-tools/93" title="SublimeText3 Chinese version" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58ab97a3baad9677.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="SublimeText3 Chinese version" />
</a>
<div id="wjcelcm34c" class="phpmain_tab2_mids_info">
<a href="http://ipnx.cn/toolset/development-tools/93" title="SublimeText3 Chinese version" class="phpmain_tab2_mids_title">
<h3>SublimeText3 Chinese version</h3>
</a>
<p>Chinese version, very easy to use</p>
</div>
</div>
<div id="wjcelcm34c" class="phpmain_tab2_mids_top">
<a href="http://ipnx.cn/toolset/development-tools/121" title="Zend 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="Zend Studio 13.0.1" />
</a>
<div id="wjcelcm34c" class="phpmain_tab2_mids_info">
<a href="http://ipnx.cn/toolset/development-tools/121" title="Zend Studio 13.0.1" class="phpmain_tab2_mids_title">
<h3>Zend Studio 13.0.1</h3>
</a>
<p>Powerful PHP integrated development environment</p>
</div>
</div>
<div id="wjcelcm34c" class="phpmain_tab2_mids_top">
<a href="http://ipnx.cn/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/toolset/development-tools/469" title="Dreamweaver CS6" class="phpmain_tab2_mids_title">
<h3>Dreamweaver CS6</h3>
</a>
<p>Visual web development tools</p>
</div>
</div>
<div id="wjcelcm34c" class="phpmain_tab2_mids_top">
<a href="http://ipnx.cn/toolset/development-tools/500" title="SublimeText3 Mac version" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58d34035e2757995.png?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="SublimeText3 Mac version" />
</a>
<div id="wjcelcm34c" class="phpmain_tab2_mids_info">
<a href="http://ipnx.cn/toolset/development-tools/500" title="SublimeText3 Mac version" class="phpmain_tab2_mids_title">
<h3>SublimeText3 Mac version</h3>
</a>
<p>God-level code editing software (SublimeText3)</p>
</div>
</div>
</div>
<div id="wjcelcm34c" class="phpgenera_Details_mainR3_more">
<a href="http://ipnx.cn/ai">Show More</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>Hot Topics</h2>
</div>
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottom">
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms">
<a href="http://ipnx.cn/faq/laravel-tutori" title="Laravel Tutorial" class="phpgenera_Details_mainR4_bottom_title">Laravel Tutorial</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/faq/php-tutorial" title="PHP Tutorial" class="phpgenera_Details_mainR4_bottom_title">PHP Tutorial</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/faq/zt">Show More</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/faq/1796829560.html" title="How does garbage collection work in 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="How does garbage collection work in JavaScript?" />
</a>
<a href="http://ipnx.cn/faq/1796829560.html" title="How does garbage collection work in JavaScript?" class="phphistorical_Version2_mids_title">How does garbage collection work in JavaScript?</a>
<span id="wjcelcm34c" class="Articlelist_txts_time">Jul 04, 2025 am 12:42 AM</span>
<p class="Articlelist_txts_p">JavaScript's garbage collection mechanism automatically manages memory through a tag-clearing algorithm to reduce the risk of memory leakage. The engine traverses and marks the active object from the root object, and unmarked is treated as garbage and cleared. For example, when the object is no longer referenced (such as setting the variable to null), it will be released in the next round of recycling. Common causes of memory leaks include: ① Uncleared timers or event listeners; ② References to external variables in closures; ③ Global variables continue to hold a large amount of data. The V8 engine optimizes recycling efficiency through strategies such as generational recycling, incremental marking, parallel/concurrent recycling, and reduces the main thread blocking time. During development, unnecessary global references should be avoided and object associations should be promptly decorated to improve performance and stability.</p>
</div>
<div id="wjcelcm34c" class="phphistorical_Version2_mids">
<a href="http://ipnx.cn/faq/1796836217.html" title="How to make an HTTP request in 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="How to make an HTTP request in Node.js?" />
</a>
<a href="http://ipnx.cn/faq/1796836217.html" title="How to make an HTTP request in Node.js?" class="phphistorical_Version2_mids_title">How to make an HTTP request in Node.js?</a>
<span id="wjcelcm34c" class="Articlelist_txts_time">Jul 13, 2025 am 02:18 AM</span>
<p class="Articlelist_txts_p">There are three common ways to initiate HTTP requests in Node.js: use built-in modules, axios, and node-fetch. 1. Use the built-in http/https module without dependencies, which is suitable for basic scenarios, but requires manual processing of data stitching and error monitoring, such as using https.get() to obtain data or send POST requests through .write(); 2.axios is a third-party library based on Promise. It has concise syntax and powerful functions, supports async/await, automatic JSON conversion, interceptor, etc. It is recommended to simplify asynchronous request operations; 3.node-fetch provides a style similar to browser fetch, based on Promise and simple syntax</p>
</div>
<div id="wjcelcm34c" class="phphistorical_Version2_mids">
<a href="http://ipnx.cn/faq/1796836292.html" title="JavaScript Data Types: Primitive vs Reference" class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/431/639/175234579081669.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="JavaScript Data Types: Primitive vs Reference" />
</a>
<a href="http://ipnx.cn/faq/1796836292.html" title="JavaScript Data Types: Primitive vs Reference" class="phphistorical_Version2_mids_title">JavaScript Data Types: Primitive vs Reference</a>
<span id="wjcelcm34c" class="Articlelist_txts_time">Jul 13, 2025 am 02:43 AM</span>
<p class="Articlelist_txts_p">JavaScript data types are divided into primitive types and reference types. Primitive types include string, number, boolean, null, undefined, and symbol. The values are immutable and copies are copied when assigning values, so they do not affect each other; reference types such as objects, arrays and functions store memory addresses, and variables pointing to the same object will affect each other. Typeof and instanceof can be used to determine types, but pay attention to the historical issues of typeofnull. Understanding these two types of differences can help write more stable and reliable code.</p>
</div>
<div id="wjcelcm34c" class="phphistorical_Version2_mids">
<a href="http://ipnx.cn/faq/1796830657.html" title="React vs Angular vs Vue: which js framework is best?" 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: which js framework is best?" />
</a>
<a href="http://ipnx.cn/faq/1796830657.html" title="React vs Angular vs Vue: which js framework is best?" class="phphistorical_Version2_mids_title">React vs Angular vs Vue: which js framework is best?</a>
<span id="wjcelcm34c" class="Articlelist_txts_time">Jul 05, 2025 am 02:24 AM</span>
<p class="Articlelist_txts_p">Which JavaScript framework is the best choice? The answer is to choose the most suitable one according to your needs. 1.React is flexible and free, suitable for medium and large projects that require high customization and team architecture capabilities; 2. Angular provides complete solutions, suitable for enterprise-level applications and long-term maintenance; 3. Vue is easy to use, suitable for small and medium-sized projects or rapid development. In addition, whether there is an existing technology stack, team size, project life cycle and whether SSR is needed are also important factors in choosing a framework. In short, there is no absolutely the best framework, the best choice is the one that suits your needs.</p>
</div>
<div id="wjcelcm34c" class="phphistorical_Version2_mids">
<a href="http://ipnx.cn/faq/1796832745.html" title="JavaScript time object, someone builds an eactexe, faster website on 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="JavaScript time object, someone builds an eactexe, faster website on Google Chrome, etc." />
</a>
<a href="http://ipnx.cn/faq/1796832745.html" title="JavaScript time object, someone builds an eactexe, faster website on Google Chrome, etc." class="phphistorical_Version2_mids_title">JavaScript time object, someone builds an eactexe, faster website on Google Chrome, etc.</a>
<span id="wjcelcm34c" class="Articlelist_txts_time">Jul 08, 2025 pm 02:27 PM</span>
<p class="Articlelist_txts_p">Hello, JavaScript developers! Welcome to this week's JavaScript news! This week we will focus on: Oracle's trademark dispute with Deno, new JavaScript time objects are supported by browsers, Google Chrome updates, and some powerful developer tools. Let's get started! Oracle's trademark dispute with Deno Oracle's attempt to register a "JavaScript" trademark has caused controversy. Ryan Dahl, the creator of Node.js and Deno, has filed a petition to cancel the trademark, and he believes that JavaScript is an open standard and should not be used by Oracle</p>
</div>
<div id="wjcelcm34c" class="phphistorical_Version2_mids">
<a href="http://ipnx.cn/faq/1796829862.html" title="Understanding Immediately Invoked Function Expressions (IIFE) in 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="Understanding Immediately Invoked Function Expressions (IIFE) in JavaScript" />
</a>
<a href="http://ipnx.cn/faq/1796829862.html" title="Understanding Immediately Invoked Function Expressions (IIFE) in JavaScript" class="phphistorical_Version2_mids_title">Understanding Immediately Invoked Function Expressions (IIFE) in JavaScript</a>
<span id="wjcelcm34c" class="Articlelist_txts_time">Jul 04, 2025 am 02:42 AM</span>
<p class="Articlelist_txts_p">IIFE (ImmediatelyInvokedFunctionExpression) is a function expression executed immediately after definition, used to isolate variables and avoid contaminating global scope. It is called by wrapping the function in parentheses to make it an expression and a pair of brackets immediately followed by it, such as (function(){/code/})();. Its core uses include: 1. Avoid variable conflicts and prevent duplication of naming between multiple scripts; 2. Create a private scope to make the internal variables invisible; 3. Modular code to facilitate initialization without exposing too many variables. Common writing methods include versions passed with parameters and versions of ES6 arrow function, but note that expressions and ties must be used.</p>
</div>
<div id="wjcelcm34c" class="phphistorical_Version2_mids">
<a href="http://ipnx.cn/faq/1796832608.html" title="Handling Promises: Chaining, Error Handling, and Promise Combinators in 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="Handling Promises: Chaining, Error Handling, and Promise Combinators in JavaScript" />
</a>
<a href="http://ipnx.cn/faq/1796832608.html" title="Handling Promises: Chaining, Error Handling, and Promise Combinators in JavaScript" class="phphistorical_Version2_mids_title">Handling Promises: Chaining, Error Handling, and Promise Combinators in JavaScript</a>
<span id="wjcelcm34c" class="Articlelist_txts_time">Jul 08, 2025 am 02:40 AM</span>
<p class="Articlelist_txts_p">Promise is the core mechanism for handling asynchronous operations in JavaScript. Understanding chain calls, error handling and combiners is the key to mastering their applications. 1. The chain call returns a new Promise through .then() to realize asynchronous process concatenation. Each .then() receives the previous result and can return a value or a Promise; 2. Error handling should use .catch() to catch exceptions to avoid silent failures, and can return the default value in catch to continue the process; 3. Combinators such as Promise.all() (successfully successful only after all success), Promise.race() (the first completion is returned) and Promise.allSettled() (waiting for all completions)</p>
</div>
<div id="wjcelcm34c" class="phphistorical_Version2_mids">
<a href="http://ipnx.cn/faq/1796832618.html" title="What is the cache API and how is it used with Service Workers?" 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="What is the cache API and how is it used with Service Workers?" />
</a>
<a href="http://ipnx.cn/faq/1796832618.html" title="What is the cache API and how is it used with Service Workers?" class="phphistorical_Version2_mids_title">What is the cache API and how is it used with Service Workers?</a>
<span id="wjcelcm34c" class="Articlelist_txts_time">Jul 08, 2025 am 02:43 AM</span>
<p class="Articlelist_txts_p">CacheAPI is a tool provided by the browser to cache network requests, which is often used in conjunction with ServiceWorker to improve website performance and offline experience. 1. It allows developers to manually store resources such as scripts, style sheets, pictures, etc.; 2. It can match cache responses according to requests; 3. It supports deleting specific caches or clearing the entire cache; 4. It can implement cache priority or network priority strategies through ServiceWorker listening to fetch events; 5. It is often used for offline support, speed up repeated access speed, preloading key resources and background update content; 6. When using it, you need to pay attention to cache version control, storage restrictions and the difference from HTTP caching mechanism.</p>
</div>
</div>
<a href="http://ipnx.cn/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>Public welfare online PHP training，Help PHP learners grow quickly！</p>
</div>
<div id="wjcelcm34c" class="footermid">
<a href="http://ipnx.cn/about/us.html">About us</a>
<a href="http://ipnx.cn/about/disclaimer.html">Disclaimer</a>
<a href="http://ipnx.cn/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="xqped" class="pl_css_ganrao" style="display: none;"><small id="xqped"></small><center id="xqped"></center><track id="xqped"></track><abbr id="xqped"></abbr><b id="xqped"><ins id="xqped"><font id="xqped"><blockquote id="xqped"></blockquote></font></ins></b><dl id="xqped"></dl><thead id="xqped"><label id="xqped"><legend id="xqped"><rt id="xqped"></rt></legend></label></thead><th id="xqped"></th><em id="xqped"></em><ins id="xqped"></ins><listing id="xqped"><optgroup id="xqped"><tt id="xqped"><mark id="xqped"></mark></tt></optgroup></listing><ruby id="xqped"><tt id="xqped"><mark id="xqped"></mark></tt></ruby><pre id="xqped"><noframes id="xqped"></noframes></pre><p id="xqped"><var id="xqped"><label id="xqped"><nobr id="xqped"></nobr></label></var></p><optgroup id="xqped"></optgroup><kbd id="xqped"><acronym id="xqped"></acronym></kbd><address id="xqped"><div id="xqped"></div></address><abbr id="xqped"><button id="xqped"><mark id="xqped"></mark></button></abbr><mark id="xqped"><thead id="xqped"><xmp id="xqped"><meter id="xqped"></meter></xmp></thead></mark><cite id="xqped"><label id="xqped"></label></cite><ul id="xqped"><thead id="xqped"></thead></ul><tbody id="xqped"><p id="xqped"><var id="xqped"></var></p></tbody><video id="xqped"></video><object id="xqped"></object><samp id="xqped"></samp><tfoot id="xqped"></tfoot><blockquote id="xqped"></blockquote><sup id="xqped"><big id="xqped"></big></sup><strike id="xqped"><strong id="xqped"></strong></strike><menuitem id="xqped"></menuitem><option id="xqped"><del id="xqped"><sup id="xqped"></sup></del></option><strike id="xqped"></strike><ul id="xqped"><center id="xqped"></center></ul><em id="xqped"></em><optgroup id="xqped"></optgroup><ins id="xqped"></ins><object id="xqped"><legend id="xqped"><nav id="xqped"></nav></legend></object><dfn id="xqped"><ruby id="xqped"><font id="xqped"><meter id="xqped"></meter></font></ruby></dfn><dd id="xqped"><div id="xqped"><rt id="xqped"><strike id="xqped"></strike></rt></div></dd><div id="xqped"></div><del id="xqped"><sup id="xqped"><dd id="xqped"></dd></sup></del><big id="xqped"></big><source id="xqped"><label id="xqped"></label></source><fieldset id="xqped"></fieldset><optgroup id="xqped"><track id="xqped"></track></optgroup><tbody id="xqped"><p id="xqped"></p></tbody><pre id="xqped"></pre><strike id="xqped"></strike><optgroup id="xqped"><track id="xqped"><tt id="xqped"></tt></track></optgroup><wbr id="xqped"></wbr><sub id="xqped"><dl id="xqped"><strong id="xqped"><strong id="xqped"></strong></strong></dl></sub><em id="xqped"></em><strike id="xqped"></strike><td id="xqped"><dl id="xqped"></dl></td><dl id="xqped"><legend id="xqped"><var id="xqped"><menu id="xqped"></menu></var></legend></dl><meter id="xqped"></meter><xmp id="xqped"><samp id="xqped"><option id="xqped"><noframes id="xqped"></noframes></option></samp></xmp><code id="xqped"></code><fieldset id="xqped"></fieldset><tfoot id="xqped"><form id="xqped"></form></tfoot><label id="xqped"><ol id="xqped"><dl id="xqped"><meter id="xqped"></meter></dl></ol></label><code id="xqped"></code><wbr id="xqped"></wbr><acronym id="xqped"></acronym><output id="xqped"></output><ins id="xqped"><u id="xqped"><var id="xqped"><wbr id="xqped"></wbr></var></u></ins><small id="xqped"></small><dl id="xqped"><pre id="xqped"></pre></dl><meter id="xqped"></meter><cite id="xqped"><small id="xqped"><abbr id="xqped"><tr id="xqped"></tr></abbr></small></cite><span id="xqped"><thead id="xqped"><sup id="xqped"><style id="xqped"></style></sup></thead></span><dd id="xqped"></dd><dd id="xqped"></dd><th id="xqped"><em id="xqped"><dfn id="xqped"><pre id="xqped"></pre></dfn></em></th><fieldset id="xqped"></fieldset><i id="xqped"><optgroup id="xqped"></optgroup></i><optgroup id="xqped"></optgroup><dl id="xqped"><small id="xqped"><abbr id="xqped"><tt id="xqped"></tt></abbr></small></dl><dl id="xqped"><legend id="xqped"><var id="xqped"><label id="xqped"></label></var></legend></dl><th id="xqped"></th><tbody id="xqped"></tbody><acronym id="xqped"><blockquote id="xqped"><option id="xqped"><nobr id="xqped"></nobr></option></blockquote></acronym><ins id="xqped"><sub id="xqped"><tfoot id="xqped"><strike id="xqped"></strike></tfoot></sub></ins><tbody id="xqped"><dfn id="xqped"><ruby id="xqped"><font id="xqped"></font></ruby></dfn></tbody><pre id="xqped"><del id="xqped"><font id="xqped"></font></del></pre><li id="xqped"><option id="xqped"><em id="xqped"></em></option></li><samp id="xqped"><form id="xqped"></form></samp><output id="xqped"></output><legend id="xqped"></legend><ruby id="xqped"><rp id="xqped"><video id="xqped"><del id="xqped"></del></video></rp></ruby><ruby id="xqped"><rp id="xqped"><em id="xqped"><tt id="xqped"></tt></em></rp></ruby><tr id="xqped"></tr><u id="xqped"><th id="xqped"><small id="xqped"><ins id="xqped"></ins></small></th></u><dl id="xqped"><object id="xqped"><dfn id="xqped"></dfn></object></dl><th id="xqped"><ruby id="xqped"></ruby></th><pre id="xqped"><samp id="xqped"><span id="xqped"><legend id="xqped"></legend></span></samp></pre><small id="xqped"><abbr id="xqped"></abbr></small><strong id="xqped"><nav id="xqped"></nav></strong><fieldset id="xqped"></fieldset></div>
</html>