{"id":2428,"date":"2017-12-31T09:28:06","date_gmt":"2017-12-31T01:28:06","guid":{"rendered":"http:\/\/www.xttblog.com\/?p=2428"},"modified":"2017-12-31T09:28:06","modified_gmt":"2017-12-31T01:28:06","slug":"html5canvas%e5%ae%9e%e7%8e%b0%e4%b8%80%e6%ac%be%e5%9c%86%e5%bd%a2%e6%97%b6%e9%92%9f%e5%8a%a8%e7%94%bb%e7%89%b9%e6%95%88","status":"publish","type":"post","link":"https:\/\/www.xttblog.com\/?p=2428","title":{"rendered":"HTML5+Canvas\u5b9e\u73b0\u4e00\u6b3e\u5706\u5f62\u65f6\u949f\u52a8\u753b\u7279\u6548"},"content":{"rendered":"

\n\t\u5f88\u591a\u535a\u5ba2\u90fd\u4e00\u4e2a\u5706\u5f62\u65f6\u949f\u6446\u4ef6\uff0c\u770b\u8d77\u6765\u5f88\u70ab\u3002\u4eca\u5929\u6211\u501f\u52a9HTML5\u548cCanvas\u4e3a\u5927\u5bb6\u5b9e\u73b0\u4e00\u6b3e\u4f1a\u52a8\u7684\u5706\u5f62\u65f6\u949f\u3002\n<\/p>\n

\n\t\u5728\u5b66\u4e60\u672c\u6587\u4e4b\u524d\uff0c\u4f60\u9700\u8981\u5bf9HTML5\u548cCanvas\u6709\u4e00\u5b9a\u7684\u57fa\u7840\u77e5\u8bc6\u3002\u672c\u6848\u4f8b\u7684\u4ee3\u7801\u975e\u5e38\u7cbe\u7b80\uff0c\u603b\u4ee3\u7801100\u884c\u5de6\u53f3\u3002\u4e0b\u9762\u6211\u4eec\u5148\u770b\u770b\u8be5\u65f6\u949f\u52a8\u753b\u7684\u8fd0\u884c\u6548\u679c\u3002\n<\/p>\n

\n\t\"HTML5\n<\/p>\n

\n\t\u4e0b\u9762\u662f\u8be5\u6848\u4f8b\u7684\u5b9e\u73b0\u6e90\u7801\uff1a\n<\/p>\n

\r\n<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<meta charset="UTF-8">\r\n<title>HTML5 Canvas \u5706\u5f62\u65f6\u949f\u52a8\u753b|\u4e1a\u4f59\u8349\uff1awww.xttblog.com<\/title>\r\n<style type="text\/css">\r\n\t#myCanvas{\r\n\t\tdisplay: block;\r\n\t\tmargin:10px auto;\r\n\t}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n<canvas id="myCanvas" width="400" height="400"><\/canvas>\r\n<script type="text\/javascript">\r\n\tvar myCanvas = document.getElementById('myCanvas');\r\n\tvar c = myCanvas.getContext('2d');\r\n\tfunction clock(){\r\n\t\tc.clearRect(0,0,400,400);\r\n\t\tvar data = new Date();\r\n\t\tvar sec =data.getSeconds();\r\n\t\tvar min =data.getMinutes();\r\n\t\tvar hour=data.getHours();\r\n\t\t\/\/\u4e1a\u4f59\u8349\uff1awww.xttblog.com\r\n\t\tc.save();\r\n\t\tc.translate(200,200);\r\n\t\tc.rotate(-Math.PI\/2);\r\n\t\t\/\/\u4e1a\u4f59\u8349\uff1awww.xttblog.com\r\n\t\t\/\/\u5206\u949f\u523b\u5ea6\u7ebf\r\n\t\tfor(var i=0;i<60;i++){\t\/\/\u753b12\u4e2a\u523b\u5ea6\u7ebf\t\t\t\r\n\t\t\tc.beginPath();\r\n\t\t\tc.strokeStyle = "#f00";\t\t\t\t\r\n\t\t\tc.lineWidth = 5 ;\r\n\t\t\tc.moveTo(117,0);\r\n\t\t\tc.lineTo(120,0);\r\n\t\t\tc.stroke();\r\n\t\t\tc.rotate(Math.PI\/30); \/\/\u6bcf\u4e2a6deg\u753b\u4e00\u4e2a\u65f6\u949f\u523b\u5ea6\u7ebf\r\n\t\t\tc.closePath();\r\n\t\t}\r\n\t\t\/\/\u4e1a\u4f59\u8349\uff1awww.xttblog.com\r\n\t\t\/\/\u65f6\u949f\u523b\u5ea6\u7ebf\r\n\t\tfor(var i=0;i<12;i++){\t\/\/\u753b12\u4e2a\u523b\u5ea6\u7ebf\t\t\t\r\n\t\t\tc.beginPath();\r\n\t\t\tc.strokeStyle = "#000";\t\t\t\t\r\n\t\t\tc.lineWidth = 8 ;\r\n\t\t\tc.moveTo(100,0);\r\n\t\t\tc.lineTo(120,0);\r\n\t\t\tc.stroke();\r\n\t\t\tc.rotate(Math.PI\/6); \/\/\u6bcf\u4e2a30deg\u753b\u4e00\u4e2a\u65f6\u949f\u523b\u5ea6\u7ebf\r\n\t\t\tc.closePath();\r\n\t\t}\r\n\t\t\/\/\u5916\u8868\u76d8\r\n\t\tc.beginPath();\r\n\t\tc.strokeStyle = "pink";\r\n\t\tc.arc(0,0,145,0,Math.PI*2);\r\n\t\tc.lineWidth = 12 ;\r\n\t\tc.stroke();\r\n\t\tc.closePath();\r\n\t\t\/\/\u4e1a\u4f59\u8349\uff1awww.xttblog.com\r\n\t\t\/\/\u753b\u65f6\u9488\r\n\t\thour = hour>12?hour-12:hour;\r\n\t\t\/\/console.log(hour);\r\n\t\tc.beginPath();\r\n\t\tc.save();\r\n\t\tc.rotate(Math.PI\/6*hour+Math.PI\/6*min\/60+Math.PI\/6*sec\/3600);\r\n\t\tc.strokeStyle = "yellowgreen";\r\n\t\tc.lineWidth = 4 ;\r\n\t\tc.moveTo(-20,0);\r\n\t\tc.lineTo(50,0);\r\n\t\tc.stroke();\r\n\t\tc.restore();\r\n\t\tc.closePath();\r\n\t\t\/\/\u4e1a\u4f59\u8349\uff1awww.xttblog.com\r\n\t\t\/\/\u753b\u5206\u9488\r\n\t\t\/\/console.log(min);\r\n\t\tc.beginPath();\r\n\t\tc.save();\r\n\t\tc.rotate(Math.PI\/30*min+Math.PI\/30*sec\/60);\r\n\t\tc.strokeStyle = "springgreen";\r\n\t\tc.lineWidth = 3 ;\r\n\t\tc.moveTo(-30,0);\r\n\t\tc.lineTo(70,0);\r\n\t\tc.stroke();\r\n\t\tc.restore();\r\n\t\tc.closePath();\r\n\t\t\/\/\u753b\u79d2\u9488\r\n\t\tc.beginPath();\r\n\t\tc.save();\r\n\t\tc.rotate(Math.PI\/30*sec);\r\n\t\tc.strokeStyle = "red";\r\n\t\tc.lineWidth = 2 ;\r\n\t\tc.moveTo(-40,0);\r\n\t\tc.lineTo(120,0);\r\n\t\tc.stroke();\r\n\t\tc.restore();\r\n\t\tc.closePath();\r\n\t\tc.restore();\r\n\t}\r\n\tclock();\r\n\tsetInterval(clock,1000);\r\n<\/script>\r\n<\/body>\r\n<\/html><\/pre>\n
\n\t\u559c\u6b22\u7684\u670b\u53cb\u53ef\u4ee5\u81ea\u884c\u7684\u5c06\u6e90\u7801\u4fdd\u5b58\u5230\u6587\u4ef6\u4e2d\u8fd0\u884c\u770b\u770b\u6548\u679c\u3002<\/p>\n
\"\u4e1a\u4f59\u8349\u516c\u4f17\u53f7\"\/<\/p>
\u6700\u540e\uff0c\u6b22\u8fce\u5173\u6ce8\u6211\u7684\u4e2a\u4eba\u5fae\u4fe1\u516c\u4f17\u53f7\uff1a\u4e1a\u4f59\u8349\uff08yyucao\uff09\uff01\u53ef\u52a0\u4f5c\u8005\u5fae\u4fe1\u53f7\uff1axttblog2<\/font>\u3002\u5907\u6ce8\uff1a\u201c1\u201d\uff0c\u6dfb\u52a0\u535a\u4e3b\u5fae\u4fe1\u62c9\u4f60\u8fdb\u5fae\u4fe1\u7fa4\u3002\u5907\u6ce8\u9519\u8bef\u4e0d\u4f1a\u540c\u610f\u597d\u53cb\u7533\u8bf7\u3002<\/b>\u518d\u6b21\u611f\u8c22\u60a8\u7684\u5173\u6ce8\uff01\u540e\u7eed\u6709\u7cbe\u5f69\u5185\u5bb9\u4f1a\u7b2c\u4e00\u65f6\u95f4\u53d1\u7ed9\u60a8\uff01\u539f\u521b\u6587\u7ae0\u6295\u7a3f\u8bf7\u53d1\u9001\u81f3532009913@qq.com\u90ae\u7bb1\u3002\u5546\u52a1\u5408\u4f5c\u4e5f\u53ef\u6dfb\u52a0\u4f5c\u8005\u5fae\u4fe1\u8fdb\u884c\u8054\u7cfb\uff01<\/p>
\u672c\u6587\u539f\u6587\u51fa\u5904\uff1a\u4e1a\u4f59\u8349<\/a>\uff1a » HTML5+Canvas\u5b9e\u73b0\u4e00\u6b3e\u5706\u5f62\u65f6\u949f\u52a8\u753b\u7279\u6548<\/a><\/p>","protected":false},"excerpt":{"rendered":"
\u5f88\u591a\u535a\u5ba2\u90fd\u4e00\u4e2a\u5706\u5f62\u65f6\u949f\u6446\u4ef6\uff0c\u770b\u8d77\u6765\u5f88\u70ab\u3002\u4eca\u5929\u6211\u501f\u52a9HTML5\u548cCanvas\u4e3a\u5927\u5bb6\u5b9e\u73b0\u4e00\u6b3e\u4f1a\u52a8\u7684\u5706\u5f62\u65f6\u949f\u3002 \u5728\u5b66 […]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[31,54,119,50,395],"class_list":["post-2428","post","type-post","status-publish","format-standard","hentry","category-html5","tag-canvas","tag-html2canvas","tag-html5"],"_links":{"self":[{"href":"https:\/\/www.xttblog.com\/index.php?rest_route=\/wp\/v2\/posts\/2428","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.xttblog.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.xttblog.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.xttblog.com\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.xttblog.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2428"}],"version-history":[{"count":1,"href":"https:\/\/www.xttblog.com\/index.php?rest_route=\/wp\/v2\/posts\/2428\/revisions"}],"predecessor-version":[{"id":2429,"href":"https:\/\/www.xttblog.com\/index.php?rest_route=\/wp\/v2\/posts\/2428\/revisions\/2429"}],"wp:attachment":[{"href":"https:\/\/www.xttblog.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2428"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.xttblog.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2428"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.xttblog.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2428"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}