{"id":2673,"date":"2017-06-14T17:18:38","date_gmt":"2017-06-14T09:18:38","guid":{"rendered":"http:\/\/www.qdabc.cn\/?p=2673"},"modified":"2017-06-14T17:18:38","modified_gmt":"2017-06-14T09:18:38","slug":"canvas%e7%99%be%e5%88%86%e6%af%94%e5%8a%a8%e7%94%bb","status":"publish","type":"post","link":"http:\/\/www.qdabc.cn\/?p=2673","title":{"rendered":"Canvas\u767e\u5206\u6bd4\u52a8\u753b"},"content":{"rendered":"
<!DOCTYPE html>\r\n<html>\r\n<head>\r\n\t<title><\/title>\r\n\t<meta charset=\"utf-8\">\r\n\t<style type=\"text\/css\">\r\n\t\t*{\r\n\t\t\tpadding: 0;\r\n\t\t\tmargin:0;\r\n\t\t}\r\n\t\tul{\r\n\t\t\tlist-style: none;\r\n\t\t\toverflow: hidden;\r\n\t\t\twidth: 1200px;\r\n\t\t\tmargin: 0 auto;\t\t\t\r\n\t\t}\r\n\t\tli{\r\n\t\t\twidth: 300px;\r\n\t\t\theight: 300px;\r\n\t\t\tfloat: left;\r\n\t\t}\r\n\t\tbody{\r\n\t\t\tbackground-color: #333\r\n\t\t}\r\n\t<\/style>\r\n<\/head>\r\n<body>\r\n    <ul id=\"canvas\">\r\n    \t<li>\r\n    \t\t<canvas class=\"canvas\" width=\"900\" height=\"900\"><\/canvas>\r\n    \t\t<span>70%<\/span>\r\n    \t<\/li>\r\n    \t<li>\r\n    \t\t<canvas class=\"canvas\" width=\"900\" height=\"900\"><\/canvas>\r\n    \t\t<span>60%<\/span>\r\n    \t<\/li>\r\n    \t<li>\r\n    \t\t<canvas class=\"canvas\" width=\"900\" height=\"900\"><\/canvas>\r\n    \t\t<span>30%<\/span>\r\n    \t<\/li>\r\n    \t<li>\r\n    \t\t<canvas class=\"canvas\" width=\"900\" height=\"900\"><\/canvas>\r\n    \t\t<span>80%<\/span>\r\n    \t<\/li>    \t\r\n    <\/ul>\r\n\t<canvas id=\"cvs\"><\/canvas>\r\n<\/body>\r\n<\/html>\r\n<script type=\"text\/javascript\">\r\nwindow.onload=function(){\r\n\tvar canUl=document.getElementById(\"canvas\");\r\n\tvar li=canUl.getElementsByTagName(\"li\");\r\n\tvar can=canUl.getElementsByTagName(\"canvas\");\r\n\tvar pecent=canUl.getElementsByTagName(\"span\");\r\n\tvar can_arr=[];\r\n\tfunction Cavas_pecent(json){\r\n\t\tthis.w=json.w;\r\n\t\tthis.h=json.h;\r\n\t\tthis.timer=null;\r\n\t\tthis.deg=0;\r\n\t\tthis.new_deg=json.new_deg,\r\n\t\tthis.obj=json.obj;\r\n\t\tthis.color=json.color;\r\n\t\tthis.stroke_color=json.stroke_color;\r\n\t\tthis.pecent_f=json.pecent_f;\r\n\t\tthis.lineWidth=json.lineWidth;\r\n\t\tthis.bg_color=json.bg_color;\r\n\t}\r\n\tCavas_pecent.prototype.draw = function() {\r\n\t\t\tvar txt=this.deg+\"%\";\r\n\t      \tthis.obj.lineCap=\"round\";\r\n\t\t    this.obj.lineWidth=this.lineWidth;\r\n\t\t    this.obj.strokeStyle = this.stroke_color;\r\n\t\t\tthis.obj.beginPath();\r\n\t\t\tthis.obj.arc(this.w\/2,this.h\/2,this.w\/2-this.lineWidth,0,this.deg\/100*Math.PI*2);\r\n\t\t\tthis.obj.fillStyle=\"#fff\";\r\n\t\t\tthis.obj.font=\"25px Arial\"; \r\n\t\t\tthis.obj.fillText(txt , 150 - this.obj.measureText(txt).width\/2 ,150);\r\n\t\t\tthis.obj.stroke();\r\n\t}\r\n\tCavas_pecent.prototype.drawBg = function(){\r\n\t\tthis.obj.beginPath();\r\n\t    this.obj.strokeStyle=this.bg_color;\r\n\t    this.obj.arc(this.w\/2,this.h\/2,this.w\/2-this.lineWidth,0,100*Math.PI*2);\r\n\t    this.obj.stroke();\r\n\t    this.obj.save();\r\n\t    return this;\r\n\t}\r\n\tCavas_pecent.prototype.go_draw = function(){\r\n\t\t  var _this=this;\r\n\t\t  _this.timer=setInterval(function(){\r\n\t\t  if(_this.deg==_this.pecent_f){\r\n\t\t  \t\tclearInterval(_this.timer);\r\n\t\t  \t}\r\n\t\t  \telse{\r\n\t\t  \t\t_this.deg++;\r\n\t\t\t  \t_this.obj.clearRect(0,0,300,300);\r\n\t\t\t  \t_this.drawBg().draw()\r\n\t\t\t  }\r\n\t\t  },30)\r\n\t}\r\nfor(var i=0;i<can.length;i++)\r\n\t{\r\n\t\tcan_arr[i]=new Cavas_pecent({\r\n\t\t\tw:li[i].offsetWidth,\r\n\t\t    h:li[i].offsetHeight,\r\n\t\t\tobj:can[i].getContext(\"2d\"),\r\n\t\t\tcolor:\"#a24565\",\r\n\t\t\tstroke_color:\"#a24565\",\r\n\t\t\tpecent_f:parseInt(pecent[i].innerText),\r\n\t\t\tlineWidth:5,\r\n\t\t\tbg_color:\"#fff\"\r\n\t\t})\r\n\t\tcan_arr[i].go_draw();\r\n\t}\r\n}\r\n<\/script><\/pre>\n
\u6b22\u8fce\u5206\u4eab\u672c\u6587\uff0c\u8f6c\u8f7d\u8bf7\u4fdd\u7559\u51fa\u5904\uff1a\u524d\u7aefABC<\/a> » Canvas\u767e\u5206\u6bd4\u52a8\u753b<\/a><\/p>","protected":false},"excerpt":{"rendered":"
<!DOCTYPE html> <html> <head> <title><\/title> <meta charset=”utf-8″ […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[30,9,378],"_links":{"self":[{"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=\/wp\/v2\/posts\/2673"}],"collection":[{"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2673"}],"version-history":[{"count":1,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=\/wp\/v2\/posts\/2673\/revisions"}],"predecessor-version":[{"id":2674,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=\/wp\/v2\/posts\/2673\/revisions\/2674"}],"wp:attachment":[{"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2673"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2673"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2673"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}