{"id":913,"date":"2017-03-12T21:53:36","date_gmt":"2017-03-12T13:53:36","guid":{"rendered":"http:\/\/www.qdabc.cn\/?p=913"},"modified":"2017-03-12T21:53:54","modified_gmt":"2017-03-12T13:53:54","slug":"canvas%e9%bc%a0%e6%a0%87%e7%a7%bb%e5%8a%a8%e7%82%ab%e5%bd%a9%e5%b0%8f%e7%90%83%ef%bc%8c%e9%9d%9e%e5%b8%b8%e7%82%ab","status":"publish","type":"post","link":"http:\/\/www.qdabc.cn\/?p=913","title":{"rendered":"Canvas\u9f20\u6807\u79fb\u52a8\u70ab\u5f69\u5c0f\u7403\uff0c\u975e\u5e38\u70ab"},"content":{"rendered":"
<!DOCTYPE html>\r\n<html>\r\n<head>\r\n    <meta charset=\"utf-8\">\r\n    <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\r\n    <title>canvas<\/title>\r\n    <style type=\"text\/css\">\r\n        *{\r\n            margin: 0;\r\n            padding: 0;\r\n        }\r\n        img{\r\n            border:0;\r\n        }\r\n        ol, ul ,li{list-style: none;}\r\n        canvas{\r\n            border: 1px solid #000;\r\n        }\r\n    <\/style>\r\n<\/head>\r\n<body>\r\n    <canvas id=\"mycanvas\" width=\"1000\" height=\"600\"><\/canvas>\r\n    <script type=\"text\/javascript\">\r\n\r\n        var mycanvas = document.getElementById(\"mycanvas\");\r\n        var ctx = mycanvas.getContext(\"2d\");\r\n        \/\/\u5706\u5f62\u7c7b\r\n         function Circle(x,y,r,color){\r\n            this.x = x;\r\n            this.y = y;\r\n            this.r = r;\r\n            \/\/ \u989c\u8272\u7684\u53d6\u503c\u8303\u56f4\r\n            this.color = \"rgb(\"+ (parseInt(Math.random() * 240 ) + 9) + \",\"+ (parseInt(Math.random() * 220 )+18) +\",203)\";\r\n\r\n            \/\/\u968f\u673a\u65b9\u5411\r\n            this.dx = Math.random() * 12 - 7;\r\n            this.dy = Math.random() * 12 - 7;\r\n            \/\/\u5f80\u6570\u7ec4\u4e2dpush\u81ea\u5df1\r\n            circleArr.push(this);\r\n         }\r\n\r\n         \/\/\u6e32\u67d3\r\n         Circle.prototype.render = function(){\r\n            \/\/\u65b0\u5efa\u4e00\u6761\u8def\u5f84\r\n            ctx.beginPath();\r\n            \/\/\u521b\u5efa\u4e00\u4e2a\u5706\r\n            ctx.arc(this.x, this.y, this.r, 0, Math.PI*2, true);\r\n            \/\/\u8bbe\u7f6e\u6837\u5f0f\u989c\u8272\r\n            ctx.fillStyle = this.color;\r\n            \/\/\u901a\u8fc7\u586b\u5145\u8def\u5f84\u7684\u5185\u5bb9\u533a\u57df\u751f\u6210\u5b9e\u5fc3\u7684\u56fe\u5f62\r\n            ctx.fill();\r\n         }\r\n\r\n         \/\/\u66f4\u65b0\r\n         Circle.prototype.update = function(){\r\n            this.x += this.dx;\r\n            this.y += this.dy;\r\n            this.r--;\r\n            if(this.r < 0){\r\n                for (var i = 0; i < circleArr.length; i++) {\r\n                    if (circleArr[i] === this) {\r\n                        circleArr.splice(i,1);\r\n                    };\r\n                }\r\n                return false;\r\n            }\r\n            return true;\r\n         }\r\n         \/\/\u521b\u5efa\u4e00\u4e2a\u6570\u7ec4\r\n         var circleArr = [];\r\n\r\n         \/\/\u9f20\u6807\u79fb\u52a8\u4e8b\u4ef6\r\n         mycanvas.onmousemove = function(event){\r\n            new Circle(event.clientX,event.clientY,30,\"orange\");\r\n         }\r\n\r\n         \/\/\u8bbe\u7f6e\u5b9a\u65f6\u5668\u6bcf20\u6beb\u79d2\u66f4\u65b0\u548c\u6e32\u67d3\r\n         setInterval(function(){\r\n            ctx.clearRect(0, 0, 1000, 600)\r\n            for (var i = 0; i < circleArr.length; i++) {\r\n                circleArr[i].update() && circleArr[i].render();\r\n            };\r\n         },20);\r\n\r\n    <\/script>\r\n<\/body>\r\n<\/html><\/pre>\n
\u6b22\u8fce\u5206\u4eab\u672c\u6587\uff0c\u8f6c\u8f7d\u8bf7\u4fdd\u7559\u51fa\u5904\uff1a\u524d\u7aefABC<\/a> » Canvas\u9f20\u6807\u79fb\u52a8\u70ab\u5f69\u5c0f\u7403\uff0c\u975e\u5e38\u70ab<\/a><\/p>","protected":false},"excerpt":{"rendered":"
<!DOCTYPE html> <html> <head> <meta charset=”utf-8″> <meta http-equiv=”X- […]<\/p>\n","protected":false},"author":1,"featured_media":320,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[30],"_links":{"self":[{"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=\/wp\/v2\/posts\/913"}],"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=913"}],"version-history":[{"count":1,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=\/wp\/v2\/posts\/913\/revisions"}],"predecessor-version":[{"id":914,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=\/wp\/v2\/posts\/913\/revisions\/914"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=\/wp\/v2\/media\/320"}],"wp:attachment":[{"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=913"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=913"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=913"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}