{"id":448,"date":"2024-05-24T10:59:18","date_gmt":"2024-05-24T02:59:18","guid":{"rendered":"https:\/\/3dok.biz\/w27\/?page_id=448"},"modified":"2024-05-25T21:30:47","modified_gmt":"2024-05-25T13:30:47","slug":"%e6%a1%83%e5%9c%92%e7%9b%a3%e6%b8%ac%e7%ab%99","status":"publish","type":"page","link":"https:\/\/3dok.biz\/w27\/?page_id=448","title":{"rendered":"\u6843\u5712\u76e3\u6e2c\u7ad9"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"448\" class=\"elementor elementor-448\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-8d0b36e elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"8d0b36e\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-6b363d2\" data-id=\"6b363d2\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-8435da7 elementor-widget elementor-widget-text-editor\" data-id=\"8435da7\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\n\n<div class=\"col1\">\n    <canvas id=\"score\" width=\"300\" height=\"180\" data='100'><\/canvas>\n    <\/div>\n\n  <\/body>\n<\/html>\n\n<script>\n\nvar c = document.getElementById('score');\nvar ctx=c.getContext(\"2d\");\nvar value = 90; \/\/ c.attributes['data'].value;\n\nconst x0 = 100; \/\/ \u5706\u5fc3\u5750\u6807\nconst y0 = 100; \/\/ \u5706\u5fc3\u5750\u6807\nconst r1 = 70;  \/\/ \u5916\u5706\u534a\u5f84\nconst startAng = 145; \/\/ \u8d77\u59cb\u89d2\u5ea6\nconst endAng = 35;\n\n\/\/ \u6839\u636e\u534a\u5f84\u548c\u89d2\u5ea6\u5224\u65adx\u8f74\u5750\u6807\n\/\/ function getPointX(r, ao) {\n\/\/ return x0 + r * Math.cos(ao * Math.PI \/ 180)\n\/\/ }\n\n\/\/ \u6839\u636e\u534a\u5f84\u548c\u89d2\u5ea6\u5224\u65adY\u8f74\u5750\u6807\n\/\/ function getPointY(r, ao) {\n\/\/ return y0 + r * Math.sin(ao * Math.PI \/ 180)\n\/\/ }\n\n\/\/ \u5e95\u5c42\u7684\u5706\u5f27 \u65e0\u8272\nctx.beginPath();\nctx.arc(x0, y0, r1, (Math.PI \/ 180) * startAng, (Math.PI \/ 180) * endAng, false);\nctx.strokeStyle = \"rgba(200, 0, 0, 0.2)\"; \/\/ \"#666\";  \/\/ \u5e95\u8272\nctx.lineWidth = 30;\nctx.lineCap = 'round'; \/\/ \u7ebf\u7684\u672b\u7aef\u8bbe\u7f6e\nctx.stroke();\n\n\/\/ \u753b\u5916\u5c42\u7684\u5706\u5f27 \u6709\u8272,\u53ef\u53d8\u52a8\nvar blueAng=40+(250\/100)*value; \/\/ \u8fd9\u91cc\u7684value\u662f\u53ef\u4ee5\u6839\u636e\u4fe1\u7528\u5206\u63a7\u5236\u7684\nctx.beginPath();\nctx.arc(x0, y0, r1, (Math.PI \/ 180) *startAng, (Math.PI \/ 180) * blueAng, false);\nvar linearGradient = ctx.createLinearGradient(0,0,250,0);\nlinearGradient.addColorStop(0,'#06E259');  \/\/ \u986f\u793a\u6578\u503c_L\nlinearGradient.addColorStop(1,'rgba(200, 0, 0, 1)');  \/\/ \u986f\u793a\u6578\u503c_R\t\nctx.strokeStyle = linearGradient;\nctx.lineWidth = 25;\nctx.lineCap = 'round'; \/\/ \u7ebf\u7684\u672b\u7aef\u8bbe\u7f6e\nctx.stroke();\n\n\/\/ canvas\u4e2d\u95f4\u7684\u6587\u5b57\nctx.font = \"normal 35px PingFangSC-Medium\"; \/\/ \u5b57\u4f53\u5927\u5c0f\uff0c\u6837\u5f0f\nctx.fillStyle = \"#E8DA77\";; \/\/ \u989c\u8272\nctx.textAlign = 'center'; \/\/ \u4f4d\u7f6e\nctx.textBaseline = 'middle';\nctx.moveTo(80, 100); \/\/ \u6587\u5b57\u586b\u5145\u4f4d\u7f6e\nctx.fillText(\"0.23\", 100, 280\/2-30);\nctx.font = \"normal 16px PingFangSC-Regular\"; \/\/ \u5b57\u4f53\u5927\u5c0f\uff0c\u6837\u5f0f\nctx.fillStyle = \"rgba(200, 0, 0, 1)\"; \/\/ \"#E8DA77\"; \/\/ \u989c\u8272\nctx.fillText(\"mg\/m3\", 100, 140);\t\/\/ \u986f\u793a\u55ae\u4f4d\nctx.fillText(\"TVOC \u5316\u5b78\u5206\u5b50\", 100, 170);\n\n\/\/ \u4e0b\u65b90\u548c100\u7684\u4f4d\u7f6e\nctx.fillText(\"0\",     15, 150);\nctx.fillText(\"\u5371\u96aa\", 195, 150);\n\n<\/script>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-448","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/3dok.biz\/w27\/index.php?rest_route=\/wp\/v2\/pages\/448","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/3dok.biz\/w27\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/3dok.biz\/w27\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/3dok.biz\/w27\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/3dok.biz\/w27\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=448"}],"version-history":[{"count":43,"href":"https:\/\/3dok.biz\/w27\/index.php?rest_route=\/wp\/v2\/pages\/448\/revisions"}],"predecessor-version":[{"id":541,"href":"https:\/\/3dok.biz\/w27\/index.php?rest_route=\/wp\/v2\/pages\/448\/revisions\/541"}],"wp:attachment":[{"href":"https:\/\/3dok.biz\/w27\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=448"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}