Page 46-H5 Tutorial Programming Tutorials: Learn H5 Tutorial Online-php.cn

Article Tags

H5 Tutorial

Home

Technical articles

Web Front-end

H5 Tutorial

Learning the basics of canvas

In this article we will learn the basics of canvas.

Jul 15, 2017 am 11:45 AM

canvas学习

Imitation of Sina's partial static page display

1 2 3 4 5 </ti</p><span class="Articlelist_txts_time">Jul 14, 2017 pm 06:15 PM</span><div class="Articlelist_txts_infos"><span class="Articlelist_txts_infoss on">展示</span><span class="Articlelist_txts_infoss ">页面</span><span class="Articlelist_txts_infoss ">静态</span></div></div></div><div class="Articlelist_txts"><a href='https://m.php.cn/faq/373316.html' title='Very good svg tutorial' class="Articlelist_txtsimg"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy" src="/static/imghwm/default1.png" onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" data-src="" alt="Very good svg tutorial" /></a><div class="Articlelist_txts_info"><h2><a href='https://m.php.cn/faq/373316.html' title='Very good svg tutorial' class="Articlelist_txts_title">Very good svg tutorial</a></h2><p class="Articlelist_txts_p">The introduction is very detailed and well-organized. The content is very detailed and suitable for beginners to learn http://www.softwhy.com/qiduan/SVG_source/</p><span class="Articlelist_txts_time">Jul 08, 2017 pm 06:15 PM</span><div class="Articlelist_txts_infos"><span class="Articlelist_txts_infoss on">教程</span><span class="Articlelist_txts_infoss ">错的</span><span class="Articlelist_txts_infoss ">非常</span></div></div></div><div class="Articlelist_txts"><a href='https://m.php.cn/faq/372338.html' title='Detailed introduction to spring WebSocket' class="Articlelist_txtsimg"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy" src="/static/imghwm/default1.png" onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" data-src="" alt="Detailed introduction to spring WebSocket" /></a><div class="Articlelist_txts_info"><h2><a href='https://m.php.cn/faq/372338.html' title='Detailed introduction to spring WebSocket' class="Articlelist_txts_title">Detailed introduction to spring WebSocket</a></h2><p class="Articlelist_txts_p">Websocket is one of the new features of Html5. The purpose is to establish a full-duplex communication method between the browser and the server, solve the excessive resource consumption caused by http request-response, and provide a new implementation method for special scenario applications, such as Chatting, stock trading, games and other industries with high real-time requirements.</p><span class="Articlelist_txts_time">Jul 03, 2017 pm 03:18 PM</span><div class="Articlelist_txts_infos"><span class="Articlelist_txts_infoss on">WebSocket</span><span class="Articlelist_txts_infoss ">spring</span><span class="Articlelist_txts_infoss ">web</span></div></div></div><div class="Articlelist_txts"><a href='https://m.php.cn/faq/372148.html' title='Examples of file upload and download in h5' class="Articlelist_txtsimg"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy" src="/static/imghwm/default1.png" onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" data-src="" alt="Examples of file upload and download in h5" /></a><div class="Articlelist_txts_info"><h2><a href='https://m.php.cn/faq/372148.html' title='Examples of file upload and download in h5' class="Articlelist_txts_title">Examples of file upload and download in h5</a></h2><p class="Articlelist_txts_p">Preface The file API provided in HTML5 has rich applications in the front end. Uploading, downloading, reading content, etc. are common in daily interactions. And the compatibility with various browsers is relatively good, including mobile terminals, except that IE only supports versions above IE10. If you want to better master the functions of operating files, you must first be familiar with each API. Original author: Lin Xin, author's blog: https://github.com/lin-xin/blogFileList object and file object inpu in HTML</p><span class="Articlelist_txts_time">Jul 03, 2017 am 09:28 AM</span><div class="Articlelist_txts_infos"><span class="Articlelist_txts_infoss on">HTML5</span><span class="Articlelist_txts_infoss ">上传下载</span><span class="Articlelist_txts_infoss ">h5</span></div></div></div><div class="Articlelist_txts"><a href='https://m.php.cn/faq/369238.html' title='Introduction tutorial examples between files in node.js' class="Articlelist_txtsimg"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy" src="/static/imghwm/default1.png" onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" data-src="" alt="Introduction tutorial examples between files in node.js" /></a><div class="Articlelist_txts_info"><h2><a href='https://m.php.cn/faq/369238.html' title='Introduction tutorial examples between files in node.js' class="Articlelist_txts_title">Introduction tutorial examples between files in node.js</a></h2><p class="Articlelist_txts_p">The basic syntax of ode.js is the syntax of JavaScript, so it is easier for students who know JavaScript. As for the configuration of the environment, it is relatively simple. You can visit the official documentation for installation. Here I will share some things I have summarized during my study. This is the first article to talk about how to introduce and use variables and functions between files. Code Edge » node.js notes - introduction between files http://ww</p><span class="Articlelist_txts_time">Jun 30, 2017 pm 06:03 PM</span><div class="Articlelist_txts_infos"><span class="Articlelist_txts_infoss on">javascript</span><span class="Articlelist_txts_infoss ">node.js</span><span class="Articlelist_txts_infoss ">引入</span><span class="Articlelist_txts_infoss ">文件</span><span class="Articlelist_txts_infoss ">笔记</span><span class="Articlelist_txts_infoss ">间的</span></div></div></div><div class="Articlelist_txts"><a href='https://m.php.cn/faq/371367.html' title='Definition methods and explanation examples of strings in C' class="Articlelist_txtsimg"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy" src="/static/imghwm/default1.png" onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" data-src="" alt="Definition methods and explanation examples of strings in C" /></a><div class="Articlelist_txts_info"><h2><a href='https://m.php.cn/faq/371367.html' title='Definition methods and explanation examples of strings in C' class="Articlelist_txts_title">Definition methods and explanation examples of strings in C</a></h2><p class="Articlelist_txts_p"><meta charset="utf-8"> tells the browser to use UTF-8 for interpretation. At the same time, when saving the document, the encoding format must also be UTF-8 format.</p><span class="Articlelist_txts_time">Jun 30, 2017 pm 04:31 PM</span><div class="Articlelist_txts_infos"><span class="Articlelist_txts_infoss on">声明</span><span class="Articlelist_txts_infoss ">字符</span></div></div></div><div class="Articlelist_txts"><a href='https://m.php.cn/faq/371652.html' title='An example introduction to HTML5 canvas learning' class="Articlelist_txtsimg"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy" src="/static/imghwm/default1.png" onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" data-src="" alt="An example introduction to HTML5 canvas learning" /></a><div class="Articlelist_txts_info"><h2><a href='https://m.php.cn/faq/371652.html' title='An example introduction to HTML5 canvas learning' class="Articlelist_txts_title">An example introduction to HTML5 canvas learning</a></h2><p class="Articlelist_txts_p">1. Creation of Canvas tag in HTML5 window.onload = function(){ createCanvas(); } function createCanvas(){ var canvas_width= 200, canvas_height = 200; document.body.innerHTML = "<canvas id=\"canvas \"</p><span class="Articlelist_txts_time">Jun 30, 2017 pm 03:30 PM</span><div class="Articlelist_txts_infos"><span class="Articlelist_txts_infoss on">canvas</span><span class="Articlelist_txts_infoss ">HTML5</span><span class="Articlelist_txts_infoss ">h5</span></div></div></div><div class="Articlelist_txts"><a href='https://m.php.cn/faq/371653.html' title='What does the ngAnimate plug-in do?' class="Articlelist_txtsimg"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy" src="/static/imghwm/default1.png" onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" data-src="" alt="What does the ngAnimate plug-in do?" /></a><div class="Articlelist_txts_info"><h2><a href='https://m.php.cn/faq/371653.html' title='What does the ngAnimate plug-in do?' class="Articlelist_txts_title">What does the ngAnimate plug-in do?</a></h2><p class="Articlelist_txts_p">What does the ngAnimate plug-in do? The ngAnimate plug-in, as its name suggests, provides animation for elements. How to define animation? The first step must be to introduce the plug-in <script src="//cdn.bootcss.com/angular.js/1.3.20/angular.js?1.1.11"></script><script src="//cdn. bootcss.com/angular.js/1.3</p><span class="Articlelist_txts_time">Jun 30, 2017 pm 03:27 PM</span><div class="Articlelist_txts_infos"><span class="Articlelist_txts_infoss on">angular-</span><span class="Articlelist_txts_infoss ">动画</span></div></div></div><div class="Articlelist_txts"><a href='https://m.php.cn/faq/371654.html' title='Detailed explanation of svg case' class="Articlelist_txtsimg"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy" src="/static/imghwm/default1.png" onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" data-src="https://img.php.cn/upload/article/000/000/001/64cd908b9ca3246e7aeb597b1bd2ad37.gif?x-oss-process=image/resize,p_40" alt="Detailed explanation of svg case" /></a><div class="Articlelist_txts_info"><h2><a href='https://m.php.cn/faq/371654.html' title='Detailed explanation of svg case' class="Articlelist_txts_title">Detailed explanation of svg case</a></h2><p class="Articlelist_txts_p">Several small cases of svg. I often use svg recently. I made a few simple examples when I was bored. I hope it can help everyone. After using svg, it will be much more convenient to create animations and pictures. Let’s see next. Let’s look at a small example! ! 1. Example 1 css code html, body { width: 100%; height: 100%;}body { background: #131518;}#patt1 path { stroke: #ff</p><span class="Articlelist_txts_time">Jun 30, 2017 pm 03:27 PM</span><div class="Articlelist_txts_infos"><span class="Articlelist_txts_infoss on">案例</span><span class="Articlelist_txts_infoss ">几个</span></div></div></div><div class="Articlelist_txts"><a href='https://m.php.cn/faq/371655.html' title='Share a mobile project using canvas to synthesize poster images' class="Articlelist_txtsimg"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy" src="/static/imghwm/default1.png" onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" data-src="https://img.php.cn/upload/article/000/000/001/b0290a5eeafd19376c80e46879851f2a.png?x-oss-process=image/resize,p_40" alt="Share a mobile project using canvas to synthesize poster images" /></a><div class="Articlelist_txts_info"><h2><a href='https://m.php.cn/faq/371655.html' title='Share a mobile project using canvas to synthesize poster images' class="Articlelist_txts_title">Share a mobile project using canvas to synthesize poster images</a></h2><p class="Articlelist_txts_p">I recently made a mobile project that uses canvas to synthesize poster images. Since I don’t have any canvas foundation, I searched the Internet for a demo from a senior. However, I encountered many problems during the development process. Now I will summarize the problems encountered and their solutions. As follows: 1. The problem of adapting the mobile canvas project to full screen. Problem description: Since the width and height of the canvas can only be set to px values and do not support rem units, we want to achieve full screen coverage of the canvas when the screen resolution of the mobile device is complex.</p><span class="Articlelist_txts_time">Jun 30, 2017 pm 03:26 PM</span><div class="Articlelist_txts_infos"><span class="Articlelist_txts_infoss on">canvas</span><span class="Articlelist_txts_infoss ">解决方案</span><span class="Articlelist_txts_infoss ">问题</span></div></div></div><div class="Articlelist_txts"><a href='https://m.php.cn/faq/371656.html' title='What should you pay attention to in the order of writing css?' class="Articlelist_txtsimg"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy" src="/static/imghwm/default1.png" onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" data-src="" alt="What should you pay attention to in the order of writing css?" /></a><div class="Articlelist_txts_info"><h2><a href='https://m.php.cn/faq/371656.html' title='What should you pay attention to in the order of writing css?' class="Articlelist_txts_title">What should you pay attention to in the order of writing css?</a></h2><p class="Articlelist_txts_p">1. CSS order First of all, it is stated that the way the browser reads CSS is from top to bottom. We generally write CSS and as long as the elements have these attributes, we will achieve the desired effect. However, this will have a certain impact on future maintenance and the rendering efficiency of the browser. So how should we write the order of CSS? Are there any certain norms? First of all, we know that the properties of CSS are divided into several categories according to characteristics; 1. Specify the characteristics of the element, such as display, position, and float. These attributes will determine its layout method. 2. Specify the space of the element.</p><span class="Articlelist_txts_time">Jun 30, 2017 pm 03:26 PM</span><div class="Articlelist_txts_infos"><span class="Articlelist_txts_infoss on">样式表</span><span class="Articlelist_txts_infoss ">css</span><span class="Articlelist_txts_infoss ">技巧</span></div></div></div><div class="Articlelist_txts"><a href='https://m.php.cn/faq/371657.html' title='What are the data interaction forms of Vue?' class="Articlelist_txtsimg"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy" src="/static/imghwm/default1.png" onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" data-src="" alt="What are the data interaction forms of Vue?" /></a><div class="Articlelist_txts_info"><h2><a href='https://m.php.cn/faq/371657.html' title='What are the data interaction forms of Vue?' class="Articlelist_txts_title">What are the data interaction forms of Vue?</a></h2><p class="Articlelist_txts_p">var that=this get request that.$http.get("1.txt").then(function(result){console.log(result)this.msg=result.data;})post request requires environment to send data and receive datathat.$http.post("1.txt","").then(f</p><span class="Articlelist_txts_time">Jun 30, 2017 pm 03:25 PM</span><div class="Articlelist_txts_infos"><span class="Articlelist_txts_infoss on">形式</span><span class="Articlelist_txts_infoss ">交互</span><span class="Articlelist_txts_infoss ">数据</span></div></div></div><div class="Articlelist_txts"><a href='https://m.php.cn/faq/371642.html' title='An example of h5 implementing QQ chat bubbles' class="Articlelist_txtsimg"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy" src="/static/imghwm/default1.png" onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" data-src="" alt="An example of h5 implementing QQ chat bubbles" /></a><div class="Articlelist_txts_info"><h2><a href='https://m.php.cn/faq/371642.html' title='An example of h5 implementing QQ chat bubbles' class="Articlelist_txts_title">An example of h5 implementing QQ chat bubbles</a></h2><p class="Articlelist_txts_p">This article mainly introduces the implementation of QQ chat bubble effect in HTML5. It uses HTML/CSS to make a chat bubble similar to QQ. It has certain reference value. Interested friends can refer to it.</p><span class="Articlelist_txts_time">Jun 29, 2017 pm 04:01 PM</span><div class="Articlelist_txts_infos"><span class="Articlelist_txts_infoss on">html5</span><span class="Articlelist_txts_infoss ">介绍</span><span class="Articlelist_txts_infoss ">实例</span></div></div></div><ul class="pagination"><div class="mngfPage"><ul class="page"><a href="/html5-tutorial.html?p=45"><</a> <a href="/html5-tutorial.html?p=45">45</a><a href="javascript:;" class="active">46</a><a href="javascript:;" class="disabled_page">...</a><a href="/html5-tutorial.html?p=107">107</a><a href="/html5-tutorial.html?p=108">108</a> <a href="/html5-tutorial.html?p=47">></a></ul></div></ul></div><div class="AI_ToolDetails_main4sR"><div class="phpgenera_Details_mainR3"><div class="phpmain1_4R_readrank"><div class="phpmain1_4R_readrank_top"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy" src="/static/imghwm/default1.png" onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" data-src="/static/imghwm/hottools2.png" alt="" /><h2>Hot tools Tags</h2></div><div class="phpgenera_Details_mainR3_bottom"><div class="phpmain_tab2_mids_top"><a href="https://m.php.cn/ai/undresserai-undress" title="Undresser.AI Undress" class="phpmain_tab2_mids_top_img"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy" src="/static/imghwm/default1.png" onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411540686492.jpg?x-oss-process=image/resize,m_fill,h_45,w_45" alt="Undresser.AI Undress" /></a><div class="phpmain_tab2_mids_info"><h2><a href="https://m.php.cn/ai/undresserai-undress" title="Undresser.AI Undress" class="phpmain_tab2_mids_title">Undresser.AI Undress</a></h2><p>AI-powered app for creating realistic nude photos</p></div></div><div class="phpmain_tab2_mids_top"><a href="https://m.php.cn/ai/ai-clothes-remover" title="AI Clothes Remover" class="phpmain_tab2_mids_top_img"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy" src="/static/imghwm/default1.png" onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411552797167.jpg?x-oss-process=image/resize,m_fill,h_45,w_45" alt="AI Clothes Remover" /></a><div class="phpmain_tab2_mids_info"><h2><a href="https://m.php.cn/ai/ai-clothes-remover" title="AI Clothes Remover" class="phpmain_tab2_mids_title">AI Clothes Remover</a></h2><p>Online AI tool for removing clothes from photos.</p></div></div><div class="phpmain_tab2_mids_top"><a href="https://m.php.cn/ai/undress-ai-tool" title="Undress AI Tool" class="phpmain_tab2_mids_top_img"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy" src="/static/imghwm/default1.png" onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173410641626608.jpg?x-oss-process=image/resize,m_fill,h_45,w_45" alt="Undress AI Tool" /></a><div class="phpmain_tab2_mids_info"><h2><a href="https://m.php.cn/ai/undress-ai-tool" title="Undress AI Tool" class="phpmain_tab2_mids_title">Undress AI Tool</a></h2><p>Undress images for free</p></div></div><div class="phpmain_tab2_mids_top"><a href="https://m.php.cn/ai/clothoffio" title="Clothoff.io" class="phpmain_tab2_mids_top_img"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy" src="/static/imghwm/default1.png" onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411529149311.jpg?x-oss-process=image/resize,m_fill,h_45,w_45" alt="Clothoff.io" /></a><div class="phpmain_tab2_mids_info"><h2><a href="https://m.php.cn/ai/clothoffio" title="Clothoff.io" class="phpmain_tab2_mids_title">Clothoff.io</a></h2><p>AI clothes remover</p></div></div><div class="phpmain_tab2_mids_top"><a href="https://m.php.cn/ai/video-swap" title="Video Face Swap" class="phpmain_tab2_mids_top_img"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy" src="/static/imghwm/default1.png" onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173414504068133.jpg?x-oss-process=image/resize,m_fill,h_45,w_45" alt="Video Face Swap" /></a><div class="phpmain_tab2_mids_info"><h2><a href="https://m.php.cn/ai/video-swap" title="Video Face Swap" class="phpmain_tab2_mids_title">Video Face Swap</a></h2><p>Swap faces in any video effortlessly with our completely free AI face swap tool!</p></div></div></div></div></div><div class="phpgenera_Details_mainR4"><div class="phpmain1_4R_readrank"><div class="phpmain1_4R_readrank_top"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy" src="/static/imghwm/default1.png" onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" data-src="/static/imghwm/hotarticle2.png" alt="" /><h2>Hot Article</h2></div><div class="phpgenera_Details_mainR4_bottom"><div class="phpgenera_Details_mainR4_bottoms"><h2><a href="https://m.php.cn/faq/1796789525.html" title="What's New in Windows 11 KB5054979 & How to Fix Update Issues" class="phpgenera_Details_mainR4_bottom_title">What's New in Windows 11 KB5054979 & How to Fix Update Issues</a></h2><div class="phpgenera_Details_mainR4_bottoms_info"><span>4 weeks ago</span><span>ByDDD</span></div></div><div class="phpgenera_Details_mainR4_bottoms"><h2><a href="https://m.php.cn/faq/1796793874.html" title="How to fix KB5055523 fails to install in Windows 11?" class="phpgenera_Details_mainR4_bottom_title">How to fix KB5055523 fails to install in Windows 11?</a></h2><div class="phpgenera_Details_mainR4_bottoms_info"><span>3 weeks ago</span><span>ByDDD</span></div></div><div class="phpgenera_Details_mainR4_bottoms"><h2><a href="https://m.php.cn/faq/1796793871.html" title="How to fix KB5055518 fails to install in Windows 10?" class="phpgenera_Details_mainR4_bottom_title">How to fix KB5055518 fails to install in Windows 10?</a></h2><div class="phpgenera_Details_mainR4_bottoms_info"><span>3 weeks ago</span><span>ByDDD</span></div></div><div class="phpgenera_Details_mainR4_bottoms"><h2><a href="https://m.php.cn/faq/1796792155.html" title="Strength Levels for Every Enemy & Monster in R.E.P.O." class="phpgenera_Details_mainR4_bottom_title">Strength Levels for Every Enemy & Monster in R.E.P.O.</a></h2><div class="phpgenera_Details_mainR4_bottoms_info"><span>3 weeks ago</span><span>By尊渡假赌尊渡假赌尊渡假赌</span></div></div><div class="phpgenera_Details_mainR4_bottoms"><h2><a href="https://m.php.cn/faq/1796794243.html" title="Blue Prince: How To Get To The Basement" class="phpgenera_Details_mainR4_bottom_title">Blue Prince: How To Get To The Basement</a></h2><div class="phpgenera_Details_mainR4_bottoms_info"><span>3 weeks ago</span><span>ByDDD</span></div></div></div><div class="phpgenera_Details_mainR3_more"><a href="https://m.php.cn/article.html">Show More</a></div></div></div><div class="phpgenera_Details_mainR4"><div class="phpmain1_4R_readrank"><div class="phpmain1_4R_readrank_top"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy" src="/static/imghwm/default1.png" onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" data-src="/static/imghwm/hotarticle2.png" alt="" /><h2>Hot Tools</h2></div><div class="phpgenera_Details_mainR4_bottom"><div class="phpmain_tab2_mids_top"><a href="https://m.php.cn/toolset/development-tools/1351" title="vc9-vc14 (32+64 bit) runtime library collection (link below)" 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" src="/static/imghw/default1.png" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" data-src="https://img.php.cn/upload/manual/000/000/001/5a6a896b53dea437.png?x-oss-process=image/resize,m_fill,h_45,w_45" alt="vc9-vc14 (32+64 bit) runtime library collection (link below)" /></a><div class="phpmain_tab2_mids_info"><h2><a href="https://m.php.cn/toolset/development-tools/1351" title="vc9-vc14 (32+64 bit) runtime library collection (link below)" class="phpmain_tab2_mids_title">vc9-vc14 (32+64 bit) runtime library collection (link below)</a></h2><p>Download the collection of runtime libraries required for phpStudy installation</p></div></div><div class="phpmain_tab2_mids_top"><a href="https://m.php.cn/toolset/development-tools/1479" title="VC9 32-bit" 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" src="/static/imghw/default1.png" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" data-src="https://img.php.cn/upload/manual/000/000/001/5af2c4207a616756.jpg?x-oss-process=image/resize,m_fill,h_45,w_45" alt="VC9 32-bit" /></a><div class="phpmain_tab2_mids_info"><h2><a href="https://m.php.cn/toolset/development-tools/1479" title="VC9 32-bit" class="phpmain_tab2_mids_title">VC9 32-bit</a></h2><p>VC9 32-bit phpstudy integrated installation environment runtime library</p></div></div><div class="phpmain_tab2_mids_top"><a href="https://m.php.cn/toolset/development-tools/714" title="PHP programmer toolbox full 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" src="/static/imghw/default1.png" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" data-src="https://img.php.cn/upload/manual/000/000/001/5a718c0e5be0a511.jpg?x-oss-process=image/resize,m_fill,h_45,w_45" alt="PHP programmer toolbox full version" /></a><div class="phpmain_tab2_mids_info"><h2><a href="https://m.php.cn/toolset/development-tools/714" title="PHP programmer toolbox full version" class="phpmain_tab2_mids_title">PHP programmer toolbox full version</a></h2><p>Programmer Toolbox v1.0 PHP Integrated Environment</p></div></div><div class="phpmain_tab2_mids_top"><a href="https://m.php.cn/toolset/development-tools/1481" title="VC11 32-bit" 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" src="/static/imghw/default1.png" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" data-src="https://img.php.cn/upload/manual/000/000/001/5af2c4684dbe4408.jpg?x-oss-process=image/resize,m_fill,h_45,w_45" alt="VC11 32-bit" /></a><div class="phpmain_tab2_mids_info"><h2><a href="https://m.php.cn/toolset/development-tools/1481" title="VC11 32-bit" class="phpmain_tab2_mids_title">VC11 32-bit</a></h2><p>VC11 32-bit phpstudy integrated installation environment runtime library</p></div></div><div class="phpmain_tab2_mids_top"><a href="https://m.php.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" src="/static/imghw/default1.png" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" data-src="https://img.php.cn/upload/manual/000/000/001/58a1753774be3478.png?x-oss-process=image/resize,m_fill,h_45,w_45" alt="SublimeText3 Chinese version" /></a><div class="phpmain_tab2_mids_info"><h2><a href="https://m.php.cn/toolset/development-tools/93" title="SublimeText3 Chinese version" class="phpmain_tab2_mids_title">SublimeText3 Chinese version</a></h2><p>Chinese version, very easy to use</p></div></div></div><div class="phpgenera_Details_mainR3_more"><a href="https://m.php.cn/toolset/development-tools">Show More</a></div></div></div><div class="phpgenera_Details_mainR4"><div class="phpmain1_4R_readrank"><div class="phpmain1_4R_readrank_top"><img src="/static/imghwm/hotarticle2.png" alt="" /><h2>Hot Topics</h2></div><div class="phpgenera_Details_mainR4_bottom"><div class="phpgenera_Details_mainR4_bottoms"><h2><a href="https://m.php.cn/faq/gmailyxdlrkzn" title="Where is the login entrance for gmail email?" class="phpgenera_Details_mainR4_bottom_title">Where is the login entrance for gmail email?</a></h2><div class="phpgenera_Details_mainR4_bottoms_info"><div class="phpgenera_Details_mainR4_bottoms_infos"><img src="/static/imghwm/eyess.png" alt="" /><span>7910</span></div><div class="phpgenera_Details_mainR4_bottoms_infos"><img src="/static/imghwm/tiezi.png" alt="" /><span>15</span></div></div></div><div class="phpgenera_Details_mainR4_bottoms"><h2><a href="https://m.php.cn/faq/java-tutorial" title="Java Tutorial" class="phpgenera_Details_mainR4_bottom_title">Java Tutorial</a></h2><div class="phpgenera_Details_mainR4_bottoms_info"><div class="phpgenera_Details_mainR4_bottoms_infos"><img src="/static/imghwm/eyess.png" alt="" /><span>1652</span></div><div class="phpgenera_Details_mainR4_bottoms_infos"><img src="/static/imghwm/tiezi.png" alt="" /><span>14</span></div></div></div><div class="phpgenera_Details_mainR4_bottoms"><h2><a href="https://m.php.cn/faq/cakephp-tutor" title="CakePHP Tutorial" class="phpgenera_Details_mainR4_bottom_title">CakePHP Tutorial</a></h2><div class="phpgenera_Details_mainR4_bottoms_info"><div class="phpgenera_Details_mainR4_bottoms_infos"><img src="/static/imghwm/eyess.png" alt="" /><span>1411</span></div><div class="phpgenera_Details_mainR4_bottoms_infos"><img src="/static/imghwm/tiezi.png" alt="" /><span>52</span></div></div></div><div class="phpgenera_Details_mainR4_bottoms"><h2><a href="https://m.php.cn/faq/laravel-tutori" title="Laravel Tutorial" class="phpgenera_Details_mainR4_bottom_title">Laravel Tutorial</a></h2><div class="phpgenera_Details_mainR4_bottoms_info"><div class="phpgenera_Details_mainR4_bottoms_infos"><img src="/static/imghwm/eyess.png" alt="" /><span>1303</span></div><div class="phpgenera_Details_mainR4_bottoms_infos"><img src="/static/imghwm/tiezi.png" alt="" /><span>25</span></div></div></div><div class="phpgenera_Details_mainR4_bottoms"><h2><a href="https://m.php.cn/faq/php-tutorial" title="PHP Tutorial" class="phpgenera_Details_mainR4_bottom_title">PHP Tutorial</a></h2><div class="phpgenera_Details_mainR4_bottoms_info"><div class="phpgenera_Details_mainR4_bottoms_infos"><img src="/static/imghwm/eyess.png" alt="" /><span>1248</span></div><div class="phpgenera_Details_mainR4_bottoms_infos"><img src="/static/imghwm/tiezi.png" alt="" /><span>29</span></div></div></div></div><div class="phpgenera_Details_mainR3_more"><a href="https://m.php.cn/faq/zt">Show More</a></div></div></div></div></div></main><footer><div class="footer"><div class="footertop"><img src="/static/imghwm/logo.png" alt=""><p>Public welfare online PHP training，Help PHP learners grow quickly！</p></div><div class="footermid"><a href="https://m.php.cn/about/us.html">About us</a><a href="https://m.php.cn/about/disclaimer.html">Disclaimer</a><a href="https://m.php.cn/update/article_0_1.html">Sitemap</a></div><div class="footerbottom"><p> © php.cn All rights reserved </p></div></div></footer><script>isLogin = "0";</script><script> var _paq = window._paq = window._paq || []; /* tracker methods like "setCustomDimension" should be called before "trackPageView" */ _paq.push(['trackPageView']); _paq.push(['enableLinkTracking']); (function() { var u="https://tongji.php.cn/"; _paq.push(['setTrackerUrl', u+'matomo.php']); _paq.push(['setSiteId', '9']); var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0]; g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s); })(); </script><script> // 通用函数，用于显示或隐藏元素 function toggleElementsDisplay(className, show) { const elements = document.getElementsByClassName(className); for (let i = 0; i < elements.length; i++) { elements[i].style.display = show ? "block" : "none"; } } // 绑定事件监听器 function bindEventListeners() { const toggleDisplay = (className, show, eventId) => { document.getElementById(eventId).addEventListener("click", (event) => { event.preventDefault(); toggleElementsDisplay(className, show); }); }; // 控制 m_editormain12main 的显示和隐藏 toggleDisplay("m_editormain12main", true, "m_editormain12dis"); toggleDisplay("m_editormain12main", false, "m_editormain12dis_close"); toggleDisplay("m_editormain12main", false, "m_editormain12main_topi"); // 控制 m_menu 的显示和隐藏 toggleDisplay("m_menu", true, "lan1sp"); toggleDisplay("m_menu", false, "m_editormain12main_topi_sp"); // 控制 m_menu_lang 的显示和隐藏 toggleDisplay("m_menu_lang", true, "lan1"); toggleDisplay("m_menu_lang", false, "m_editormain12main_topi_lan"); } // 在页面加载完成后绑定事件监听器 window.onload = bindEventListeners; layui.use(function () { var util = layui.util; util.fixbar({ on: { mouseenter: function (type) { layer.tips(type, this, { tips: 4, fixed: true, }); }, mouseleave: function (type) { layer.closeAll("tips"); }, }, }); }); // 获取关闭按钮 const closeButton = document.querySelector(".phpgenera_Details_mainR1_close"); // 获取容器元素 const container = document.querySelector(".phpgenera_Details_mainR1"); // 添加点击事件监听器 closeButton.addEventListener("click", (event) => { event.preventDefault(); // 阻止默认的<a>点击行为 container.style.display = "none"; // 隐藏容器 }); </script></body></html>