{"id":30409,"date":"2024-11-25T13:03:24","date_gmt":"2024-11-25T05:03:24","guid":{"rendered":"https:\/\/fwq.ai\/blog\/30409\/"},"modified":"2024-11-25T13:03:24","modified_gmt":"2024-11-25T05:03:24","slug":"%e5%b0%8f%e7%a8%8b%e5%ba%8f%e5%bc%80%e5%8f%91%e4%b9%8b%e5%ae%9e%e6%97%b6%e5%9c%86%e5%bd%a2%e8%bf%9b%e5%ba%a6%e6%9d%a1%e8%af%a6%e8%a7%a3","status":"publish","type":"post","link":"https:\/\/fwq.ai\/blog\/30409\/","title":{"rendered":"\u5c0f\u7a0b\u5e8f\u5f00\u53d1\u4e4b\u5b9e\u65f6\u5706\u5f62\u8fdb\u5ea6\u6761\u8be6\u89e3"},"content":{"rendered":"<p><\/p>\n<h2>\u6700\u8fd1\u4e3a\u4e86\u505a\u4e00\u4e2a\u5f55\u5236\u6309\u94ae\uff0c\u7814\u7a76\u4e86\u4e0b\u5c0f\u7a0b\u5e8f\u7684\u5b9e\u65f6\u5706\u5f62\u8fdb\u5ea6\u6761\u5b9e\u73b0<\/h2>\n<p>\u5e9f\u8bdd\u4e0d\u591a\u8bf4\uff0c\u5148\u4e0a\u4e00\u5f20\u6548\u679c\u56fe\uff01<\/p>\n<p style=\"text-align:center\"><img decoding=\"async\" src=\"https:\/\/img.php.cn\/upload\/article\/000\/001\/506\/5fec52a8642861ddc89d0d547893f092-0.png\" style=\"max-width:90%\" class=\"aligncenter\" title=\"\u5c0f\u7a0b\u5e8f\u5f00\u53d1\u4e4b\u5b9e\u65f6\u5706\u5f62\u8fdb\u5ea6\u6761\u8be6\u89e3\u63d2\u56fe\" alt=\"\u5c0f\u7a0b\u5e8f\u5f00\u53d1\u4e4b\u5b9e\u65f6\u5706\u5f62\u8fdb\u5ea6\u6761\u8be6\u89e3\u63d2\u56fe\" \/><\/p>\n<p>\u521d\u59cb\u72b6\u6001<\/p>\n<p><span style=\"position: absolute;width: 6px;height: 6px;overflow: hidden;font-size: 0px;cursor: n-resize;top: 0px;margin-top: -4px;left: 179.5px;margin-left: -4px;font-family:\"><\/span><\/p>\n<p style=\"text-align:center\"><img decoding=\"async\" src=\"https:\/\/img.php.cn\/upload\/article\/000\/001\/506\/5fec52a8642861ddc89d0d547893f092-1.png\" style=\"max-width:90%\" class=\"aligncenter\" title=\"\u5c0f\u7a0b\u5e8f\u5f00\u53d1\u4e4b\u5b9e\u65f6\u5706\u5f62\u8fdb\u5ea6\u6761\u8be6\u89e3\u63d2\u56fe1\" alt=\"\u5c0f\u7a0b\u5e8f\u5f00\u53d1\u4e4b\u5b9e\u65f6\u5706\u5f62\u8fdb\u5ea6\u6761\u8be6\u89e3\u63d2\u56fe1\" \/><\/p>\n<p>\u70b9\u51fb\u4e2d\u95f4\u6309\u94ae\u5f00\u59cb\u7ed8\u5236<\/p>\n<p style=\"text-align:center\"><img decoding=\"async\" src=\"https:\/\/img.php.cn\/upload\/article\/000\/001\/506\/5fec52a8642861ddc89d0d547893f092-2.png\" style=\"max-width:90%\" class=\"aligncenter\" title=\"\u5c0f\u7a0b\u5e8f\u5f00\u53d1\u4e4b\u5b9e\u65f6\u5706\u5f62\u8fdb\u5ea6\u6761\u8be6\u89e3\u63d2\u56fe2\" alt=\"\u5c0f\u7a0b\u5e8f\u5f00\u53d1\u4e4b\u5b9e\u65f6\u5706\u5f62\u8fdb\u5ea6\u6761\u8be6\u89e3\u63d2\u56fe2\" \/><\/p>\n<p>\u7ed8\u5236\u8fc7\u7a0b<\/p>\n<p style=\"text-align:center\"><img decoding=\"async\" src=\"https:\/\/img.php.cn\/upload\/article\/000\/001\/506\/9fa6c0994657961799466a6ab1ec783a-3.png\" style=\"max-width:90%\" class=\"aligncenter\" title=\"\u5c0f\u7a0b\u5e8f\u5f00\u53d1\u4e4b\u5b9e\u65f6\u5706\u5f62\u8fdb\u5ea6\u6761\u8be6\u89e3\u63d2\u56fe3\" alt=\"\u5c0f\u7a0b\u5e8f\u5f00\u53d1\u4e4b\u5b9e\u65f6\u5706\u5f62\u8fdb\u5ea6\u6761\u8be6\u89e3\u63d2\u56fe3\" \/><\/p>\n<p>\u7ed8\u5236\u7ed3\u675f<\/p>\n<h2>\u5b9e\u73b0\u601d\u8def<\/h2>\n<p>\u5efa\u7acb\u4e24\u4e2a\u6807\u7b7e\uff0c\u5148\u7ed8\u5236\u5e95\u5c42\u7684\u6d45\u7070\u8272\u5706\u5708\u80cc\u666f\uff0c\u518d\u7ed8\u5236\u4e0a\u5c42\u7684\u7ea2\u8272\u8fdb\u5ea6\u6761\u3002<\/p>\n<h2>WXML\u4ee3\u7801<\/h2>\n<pre>&lt;view&gt;\r\n&nbsp;&nbsp;&lt;view&gt;\r\n&nbsp;&nbsp;&nbsp;&nbsp;&lt;canvas&gt;\r\n&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/canvas&gt;\r\n&nbsp;&nbsp;&nbsp;&nbsp;&lt;canvas&gt;\r\n&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/canvas&gt;\r\n&nbsp;&nbsp;&nbsp;&nbsp;&lt;view&gt;\u5f00\u59cb\u52a8\u6001\u7ed8\u5236&lt;\/view&gt;\r\n&nbsp;&nbsp;&lt;\/view&gt;&lt;\/view&gt;<\/pre>\n<p> \u767b\u5f55\u540e\u590d\u5236 <\/p>\n<h2> \u4ee3\u7801<\/h2>\n<p>\u7279\u522b\u6ce8\u610f\uff1a\u5e95\u5c42\u7684canvas\u6700\u597d\u4f7f\u7528<\/p>\n<p>z-index:-5\uff1b \u653e\u7f6e\u4e8e\u5e95\u5c42<\/p>\n<pre>page&nbsp;{\r\n&nbsp;&nbsp;width:&nbsp;100%;\r\n&nbsp;&nbsp;height:&nbsp;100%;\r\n&nbsp;&nbsp;background-color:&nbsp;#fff;\r\n}\r\n\r\n.circle-box&nbsp;{\r\n&nbsp;&nbsp;text-align:&nbsp;center;\r\n&nbsp;&nbsp;margin-top:&nbsp;10vw;\r\n}\r\n\r\n.circle&nbsp;{\r\n&nbsp;&nbsp;position:&nbsp;absolute;\r\n&nbsp;&nbsp;left:&nbsp;0;\r\n&nbsp;&nbsp;right:&nbsp;0;\r\n&nbsp;&nbsp;margin:&nbsp;auto;\r\n}\r\n\r\n.draw_btn&nbsp;{\r\n&nbsp;&nbsp;width:&nbsp;35vw;\r\n&nbsp;&nbsp;position:&nbsp;absolute;\r\n&nbsp;&nbsp;top:&nbsp;33vw;\r\n&nbsp;&nbsp;right:&nbsp;0;\r\n&nbsp;&nbsp;left:&nbsp;0;\r\n&nbsp;&nbsp;margin:&nbsp;auto;\r\n&nbsp;&nbsp;border:&nbsp;1px&nbsp;#000&nbsp;solid;\r\n&nbsp;&nbsp;border-radius:&nbsp;5vw;\r\n}<\/pre>\n<p> \u767b\u5f55\u540e\u590d\u5236 <\/p>\n<h2> \u4ee3\u7801<\/h2>\n<pre>\/\/\u83b7\u53d6\u5e94\u7528\u5b9e\u4f8b\r\nvar&nbsp;app&nbsp;=&nbsp;getApp()\r\n\r\nvar&nbsp;interval;\r\nvar&nbsp;varName;\r\nvar&nbsp;ctx&nbsp;=&nbsp;wx.createCanvasContext('canvasArcCir');\r\n\r\nPage({\r\n&nbsp;&nbsp;data:&nbsp;{\r\n&nbsp;&nbsp;},\r\n&nbsp;&nbsp;drawCircle:&nbsp;function&nbsp;()&nbsp;{\r\n&nbsp;&nbsp;&nbsp;&nbsp;clearInterval(varName);\r\n&nbsp;&nbsp;&nbsp;&nbsp;function&nbsp;drawArc(s,&nbsp;e)&nbsp;{\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ctx.setFillStyle('white');\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ctx.clearRect(0,&nbsp;0,&nbsp;200,&nbsp;200);\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ctx.draw();\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;x&nbsp;=&nbsp;100,&nbsp;y&nbsp;=&nbsp;100,&nbsp;radius&nbsp;=&nbsp;96;\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ctx.setLineWidth(5);\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ctx.setStrokeStyle('#d81e06');\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ctx.setLineCap('round');\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ctx.beginPath();\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ctx.arc(x,&nbsp;y,&nbsp;radius,&nbsp;s,&nbsp;e,&nbsp;false);\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ctx.stroke()\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ctx.draw()\r\n&nbsp;&nbsp;&nbsp;&nbsp;}\r\n&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;step&nbsp;=&nbsp;1,&nbsp;startAngle&nbsp;=&nbsp;1.5&nbsp;*&nbsp;Math.PI,&nbsp;endAngle&nbsp;=&nbsp;0;\r\n&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;animation_interval&nbsp;=&nbsp;1000,&nbsp;n&nbsp;=&nbsp;60;\r\n&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;animation&nbsp;=&nbsp;function&nbsp;()&nbsp;{\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(step&nbsp;&lt;h2&gt;\u6ce8\u610f\u7684\u8981\u70b9&lt;\/h2&gt;&lt;p&gt;1\u3001\u5173\u4e8e\u5c0f\u7a0b\u5e8fcanvas\u7ed8\u5236\uff0c\u8bf7\u89c2\u770b \u5fae\u4fe1\u5c0f\u7a0b\u5e8f\u5b98\u65b9\u6587\u6863\u7ed8\u5236&lt;\/p&gt;&lt;p&gt;2\u3001\u5f00\u59cb\u7ed8\u5236\u7684\u8def\u5f84\u53ef\u4ee5\u6839\u636e &lt;em&gt;JS\u4ee3\u7801\u4e2d\u7684\u53d8\u91cfstartAngle&lt;\/em&gt; \u6765\u9009\u62e9\u4ece\u54ea\u91cc\u5f00\u59cb\u7ed8\u5236&lt;\/p&gt;&lt;p style=\"text-align:center\"&gt;&lt;img  src=\"https:\/\/img.php.cn\/upload\/article\/000\/001\/506\/9fa6c0994657961799466a6ab1ec783a-4.png\" alt=\"\u5c0f\u7a0b\u5e8f\u5f00\u53d1\u4e4b\u5b9e\u65f6\u5706\u5f62\u8fdb\u5ea6\u6761\u8be6\u89e3\" &gt;&lt;\/p&gt;&lt;p&gt;\u6700\u540e\u6709\u4ec0\u4e48\u95ee\u9898\u53ef\u4ee5\u7559\u8a00\uff0c\u5927\u5bb6\u4e00\u8d77\u8ba8\u8bba\u5171\u540c\u8fdb\u6b65\uff5e\uff5e&lt;\/p&gt;&lt;p&gt;\u3010\u76f8\u5173\u63a8\u8350\u3011&lt;\/p&gt;&lt;p&gt;1.&nbsp;&lt;a href=\"http:\/\/www.php.cn\/xiaochengxu-359876.html\" target=\"_self\"&gt;\u5fae\u4fe1\u5c0f\u7a0b\u5e8f\u4e4b\u5236\u4f5c\u81ea\u5b9a\u4e49\u5706\u5f62\u8fdb\u5ea6\u6761&lt;\/a&gt;&lt;\/p&gt;&lt;p&gt;2.&nbsp;&lt;a href=\"http:\/\/www.php.cn\/html5-tutorial-358816.html\" target=\"_self\"&gt;Canvas\u5b9e\u73b0\u5706\u5f62\u8fdb\u5ea6\u6761\u5e76\u663e\u793a\u6570\u5b57\u767e\u5206\u6bd4&lt;\/a&gt;&lt;\/p&gt;&lt;p&gt;3.&nbsp;&lt;a href=\"http:\/\/www.php.cn\/weixin-kaifa-363427.html\" target=\"_self\"&gt;\u5fae\u4fe1\u5f00\u53d1\u4e4b\u5fae\u4fe1\u652f\u4ed8&lt;\/a&gt;&lt;\/p&gt;&lt;p&gt;4.&nbsp;&lt;a href=\"http:\/\/www.php.cn\/xiaochengxu-358998.html\" target=\"_self\"&gt;\u8be6\u89e3\u5fae\u4fe1\u5c0f\u7a0b\u5e8f\u652f\u4ed8\u529f\u80fd\u5f00\u53d1\u9519\u8bef\u603b\u7ed3&lt;\/a&gt;&lt;\/p&gt;&lt;p&gt;5.&nbsp;&lt;a href=\"http:\/\/www.php.cn\/css-tutorial-356366.html\" target=\"_self\"&gt;\u5229\u7528css3\u5b9e\u73b0\u5706\u5f62\u8fdb\u5ea6\u6761&lt;\/a&gt;&lt;\/p&gt;&lt;p&gt;6.&nbsp;&lt;a href=\"http:\/\/www.php.cn\/js-tutorial-4789.html\" target=\"_self\"&gt;\u5229\u7528jQuery\u5b9e\u73b0\u6f02\u4eae\u7684\u5706\u5f62\u8fdb\u5ea6\u6761\u5012\u8ba1\u65f6\u63d2\u4ef6_jquery&lt;\/a&gt;&lt;\/p&gt;<\/pre>\n<p> \u767b\u5f55\u540e\u590d\u5236 <\/p>\n<p>\u4ee5\u4e0a\u5c31\u662f\u5c0f\u7a0b\u5e8f\u5f00\u53d1\u4e4b\u5b9e\u65f6\u5706\u5f62\u8fdb\u5ea6\u6761\u8be6\u89e3\u7684\u8be6\u7ec6\u5185\u5bb9\uff0c\u66f4\u591a\u8bf7\u5173\u6ce8\u7c73\u4e91\u5176\u5b83\u76f8\u5173\u6587\u7ae0\uff01<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u6700\u8fd1\u4e3a\u4e86\u505a\u4e00\u4e2a\u5f55\u5236\u6309\u94ae\uff0c\u7814\u7a76\u4e86\u4e0b\u5c0f\u7a0b\u5e8f\u7684\u5b9e\u65f6\u5706\u5f62\u8fdb\u5ea6\u6761\u5b9e\u73b0 \u5e9f\u8bdd\u4e0d\u591a\u8bf4\uff0c\u5148\u4e0a\u4e00\u5f20\u6548\u679c\u56fe\uff01 \u521d\u59cb\u72b6\u6001 \u70b9\u51fb\u4e2d\u95f4\u6309\u94ae\u5f00\u59cb\u7ed8\u5236 \u7ed8\u5236\u8fc7\u7a0b \u7ed8\u5236\u7ed3\u675f \u5b9e\u73b0\u601d\u8def \u5efa\u7acb\u4e24\u4e2a\u6807\u7b7e\uff0c\u5148\u7ed8\u5236\u5e95\u5c42\u7684\u6d45\u7070\u8272\u5706\u5708\u80cc\u666f\uff0c\u518d\u7ed8\u5236\u4e0a\u5c42\u7684\u7ea2\u8272\u8fdb\u5ea6\u6761\u3002 WXML\u4ee3\u7801 &lt;view&gt; &nbsp;&nbsp;&lt;view&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;canvas&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;\/canvas&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;canvas&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;\/canvas&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;view&gt;\u5f00\u59cb\u52a8\u6001\u7ed8\u5236&lt;\/view&gt; &nbsp;&nbsp;&lt;\/view&gt;&lt;\/view&gt; \u767b\u5f55\u540e\u590d\u5236 \u4ee3\u7801 \u7279\u522b\u6ce8\u610f\uff1a\u5e95\u5c42\u7684canvas\u6700\u597d\u4f7f\u7528 z-index:-5\uff1b \u653e\u7f6e\u4e8e\u5e95\u5c42 page&nbsp;{ &nbsp;&nbsp;width:&nbsp;100%; &nbsp;&nbsp;height:&nbsp;100%; &nbsp;&nbsp;background-color:&nbsp;#fff; } .circle-box&nbsp;{ &nbsp;&nbsp;text-align:&nbsp;center; &nbsp;&nbsp;margin-top:&nbsp;10vw; } .circle&nbsp;{ &nbsp;&nbsp;position:&nbsp;absolute; &nbsp;&nbsp;left:&nbsp;0; &nbsp;&nbsp;right:&nbsp;0; &nbsp;&nbsp;margin:&nbsp;auto; } .draw_btn&nbsp;{ &nbsp;&nbsp;width:&nbsp;35vw; &nbsp;&nbsp;position:&nbsp;absolute; &nbsp;&nbsp;top:&nbsp;33vw; &nbsp;&nbsp;right:&nbsp;0; &nbsp;&nbsp;left:&nbsp;0; &nbsp;&nbsp;margin:&nbsp;auto; &nbsp;&nbsp;border:&nbsp;1px&nbsp;#000&nbsp;solid; &nbsp;&nbsp;border-radius:&nbsp;5vw; } \u767b\u5f55\u540e\u590d\u5236 \u4ee3\u7801 \/\/\u83b7\u53d6\u5e94\u7528\u5b9e\u4f8b var&nbsp;app&nbsp;=&nbsp;getApp() var&nbsp;interval; var&nbsp;varName; var&nbsp;ctx&nbsp;=&nbsp;wx.createCanvasContext(&#8216;canvasArcCir&#8217;); Page({ [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[19],"tags":[],"class_list":["post-30409","post","type-post","status-publish","format-standard","hentry","category-19"],"_links":{"self":[{"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/posts\/30409","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/comments?post=30409"}],"version-history":[{"count":0,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/posts\/30409\/revisions"}],"wp:attachment":[{"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/media?parent=30409"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/categories?post=30409"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/tags?post=30409"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}