{"id":2452,"date":"2017-06-02T13:31:09","date_gmt":"2017-06-02T05:31:09","guid":{"rendered":"http:\/\/www.qdabc.cn\/?p=2452"},"modified":"2017-06-02T13:31:09","modified_gmt":"2017-06-02T05:31:09","slug":"canvas%e5%ae%9e%e7%8e%b0%e5%88%ae%e5%88%ae%e4%b9%90%e6%8f%92%e4%bb%b6","status":"publish","type":"post","link":"http:\/\/www.qdabc.cn\/?p=2452","title":{"rendered":"canvas\u5b9e\u73b0\u522e\u522e\u4e50\u63d2\u4ef6"},"content":{"rendered":"
<!DOCTYPE html>\r\n<html>\r\n\t<head>\r\n\t\t<meta charset=\"utf-8\" \/>\r\n\t\t<title>qdabc.cn<\/title>\r\n\t\t<style>\r\n\t\t\tbody{ padding: 80px; background: #fff;}\r\n\t\t\t*{ box-sizing: border-box;}\r\n\t\t\t.con{ width:400px; height: 200px; background: #AAAAAA; position: relative; cursor: cell; text-align: center;\r\n\t\t\t\tmargin:20px auto;}\r\n\t\t\t.text{ display: none; width:100%; height: 100%; text-align: center; color: #2244EE;font-size: 80px;\r\n\t\t\t\tfont-weight: bold; font-family: simsun; line-height: 200px;}\r\n\t\t<\/style>\r\n\t<\/head>\r\n\t<body>\r\n\t\t<div id=\"container1\" class=\"con\">\r\n\t\t\t<span class=\"text\">\u56fd\u9645\u73a9\u7b11<\/span>\r\n\t\t<\/div>\r\n\t\t\r\n\t\t<div id=\"container2\" class=\"con\">\r\n\t\t\t<span class=\"text\">\u4e16\u754c\u5927\u4e8b<\/span>\r\n\t\t<\/div>\r\n\t\t\r\n\t\t<script type=\"text\/javascript\" src=\"http:\/\/code.jquery.com\/jquery-1.11.2.js\"><\/script>\r\n\t\t<script>\r\n\t\t\t\/**\r\n\t\t\t * \u522e\u522e\u4e50\u63d2\u4ef6\r\n\t\t\t *\/\r\n\t\t\t$.fn.wqzGgl?console.error(\"jQuery\u63d2\u4ef6\u51b2\u7a81\uff01\\n \u51b2\u7a81\u539f\u56e0\uff1a\u547d\u540d\u7a7a\u95f4\u91cd\u590d:$.fn.wqzGgl\"):\r\n\t\t\t(function($){\r\n\t\t\t\t$.fn.wqzGgl = function(options,param){\r\n\t\t\t\t\t\/\/ \u6267\u884c\u5bf9\u5916\u5f00\u653e\u7684\u65b9\u6cd5\r\n\t\t\t\t\tif (typeof options === \"string\"){\r\n\t\t\t\t\t\tvar state = this.data(\"_wqzGgl\");\r\n\t\t\t\t\t\tvar method;\r\n\t\t\t\t\t\tif (state){\t\/\/ \u5f53\u524d\u5bf9\u8c61\u5df2\u88ab\u521d\u59cb\u5316\u8fc7\r\n\t\t\t\t\t\t\tmethod = $.fn._wqzGgl.methods[options];\r\n\t\t\t\t\t\t\tif (method){\t\/\/ \u63d2\u4ef6\u4e2d\u5b58\u5728\u6b64\u65b9\u6cd5\r\n\t\t\t\t\t\t\t\treturn method(this,param);\r\n\t\t\t\t\t\t\t}else{\r\n\t\t\t\t\t\t\t\tconsole.error(\"\u9519\u8bef\uff1a_wqzGgl\u63d2\u4ef6\u672a\u63d0\u4f9b\u6b64\u65b9\u6cd5\uff1a\"+options);\t\r\n\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\treturn this;\r\n\t\t\t\t\t\t}else{\r\n\t\t\t\t\t\t\tconsole.error(\"\u9519\u8bef\uff1a\"+this[0].outerHTML+\"\u5143\u7d20\u5c1a\u672a\u88ab_wqzGgl\u63d2\u4ef6\u6e32\u67d3\u8fc7\uff01\u65e0\u6cd5\u8c03\u7528\u65b9\u6cd5\uff1a\"+options);\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t\treturn this;\r\n\t\t\t\t\t}\r\n\t\t\t\t\t\r\n\t\t\t\t\t\/\/ \u6e32\u67d3\u63d2\u4ef6\r\n\t\t\t\t\treturn this.each(function(){\r\n\t\t\t\t\t\tvar _options = $.extend(true,{},$.fn.wqzGgl.defaultSettings,options||{});\r\n\t\t\t\t\t\tvar plugin = new wqzGgl(_options,$(this));\r\n\t\t\t\t\t\tplugin.generate();\r\n\t\t\t\t\t\t$(this).data(\"_wqzGgl\",plugin);\r\n\t\t\t\t\t});\r\n\t\t\t\t}\r\n\t\t\t\t\r\n\t\t\t\t\/\/ \u9ed8\u8ba4\u914d\u7f6e\r\n\t\t\t\t$.fn.wqzGgl.defaultSettings = {\r\n\t\t\t\t\tcoverBg:\t\"#CCCCCC\"\r\n\t\t\t\t};\r\n\t\t\t\t\r\n\t\t\t\t\/\/ \u5bf9\u5916\u65b9\u6cd5\r\n\t\t\t\t$.fn.wqzGgl.methods = {\r\n\t\t\t\t};\r\n\t\t\t\t\r\n\t\t\t\t\/\/ \u63d2\u4ef6\u5bf9\u8c61\r\n\t\t\t\tfunction wqzGgl(_options,$elem){\r\n\t\t\t\t\tthis._options = _options;\r\n\t\t\t\t\tthis.$elem = $elem;\t\t\t\t\t\t\/\/ \u76ee\u6807\u5bf9\u8c61\r\n\t\t\t\t\tthis.domWidth = $elem.innerWidth();\t\t\/\/ \u76ee\u6807\u5143\u7d20\u5bbd\u5ea6\r\n\t\t\t\t\tthis.domHeight = $elem.innerHeight();\t\/\/ \u76ee\u6807\u5143\u7d20\u9ad8\u5ea6\r\n\t\t\t\t\tthis.enableClear = false;\t\t\t\t\/\/ \u662f\u5426\u5141\u8bb8\u64e6\u9664\r\n\t\t\t\t\tthis.startPoint = {x:0,y:0};\t\t\t\/\/ \u8d77\u59cb\u70b9\r\n\t\t\t\t\tthis.lineWidth = 15;\t\t\t\t\t\/\/ \u64e6\u9664\u65f6\u7ebf\u7684\u5bbd\u5ea6\r\n\t\t\t\t\tthis.canvas;\t\t\t\t\t\t\t\/\/ \u65b0\u589e\u7684canvas\u5bf9\u8c61\r\n\t\t\t\t\tthis.ctx;\t\t\t\t\t\t\t\t\/\/ canvas\u5bf9\u5e94\u7684CanvasRenderingContext2D\u73af\u5883\r\n\t\t\t\t};\r\n\t\t\t\t\r\n\t\t\t\t\/* \r\n\t\t\t\t * \u63d2\u4ef6\u5bf9\u8c61\u539f\u578b\u6269\u5c55\r\n\t\t\t\t * \tgenerate\t\t\u751f\u6210\u63d2\u4ef6\r\n\t\t\t\t * \tinit\t\t\t\u521d\u59cb\u5316\r\n\t\t\t\t * \tbindEvent\t\t\u7ed1\u5b9a\u4e8b\u4ef6\r\n\t\t\t\t *\/\r\n\t\t\t\twqzGgl.prototype = {\r\n\t\t\t\t\tgenerate: function(){\r\n\t\t\t\t\t\tvar $plugin = this;\r\n\t\t\t\t\t\t$plugin.canvas = document.createElement(\"canvas\");\r\n\t\t\t\t\t\t$plugin.$elem.append($plugin.canvas);\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\tif($plugin.canvas.getContext(\"2d\")){\r\n\t\t\t\t\t\t\t$plugin.ctx = $plugin.canvas.getContext(\"2d\");\r\n\t\t\t\t\t\t\t$plugin.init();\r\n\t\t\t\t\t\t\t$plugin.bindEvent();\r\n\t\t\t\t\t\t}else{\r\n\t\t\t\t\t\t\t$plugin.canvas.remove();\r\n\t\t\t\t\t\t\tconsole.error(\"\u5f53\u524d\u6d4f\u89c8\u5668\u4e0d\u652f\u6301canvas\uff01\");\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t\t$plugin.$elem.children().show();\r\n\t\t\t\t\t},\r\n\t\t\t\t\tinit: function(){\r\n\t\t\t\t\t\tvar $plugin = this;\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\t$plugin.$elem.css({\r\n\t\t\t\t\t\t\t\"moz-user-select\": \t\"-moz-none\",\r\n\t\t\t\t\t\t\t\"-moz-user-select\":\t\"none\",\r\n\t\t\t\t\t\t\t\"-webkit-user-select\":\t\"none\",\r\n\t\t\t\t\t\t\t\"-ms-user-select\":\t\"none\",\r\n\t\t\t\t\t\t\t\"user-select\":\t\"none\"\r\n\t\t\t\t\t\t});\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\t$plugin.canvas.width = $plugin.domWidth;\r\n\t\t\t\t\t\t$plugin.canvas.height = $plugin.domHeight;\r\n\t\t\t\t\t\t$plugin.canvas.style.position = \"absolute\";\r\n\t\t\t\t\t\t$plugin.canvas.style.left = 0;\r\n\t\t\t\t\t\t$plugin.canvas.style.top = 0;\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\t$plugin.ctx.fillStyle =  $plugin._options.coverBg;\r\n\t\t\t\t\t\t$plugin.ctx.fillRect(0,0,$plugin.domWidth,$plugin.domHeight);\r\n\t\t\t\t\t\t$plugin.ctx.globalCompositeOperation = \"destination-out\";\r\n\t\t\t\t\t\t$plugin.ctx.lineWidth = $plugin.lineWidth;\r\n\t\t\t\t\t},\r\n\t\t\t\t\tbindEvent: function(){\r\n\t\t\t\t\t\tvar $plugin = this;\r\n\t\t\t\t\t\t$plugin.$elem.on(\"mousedown\",function(event){\r\n\t\t\t\t\t\t\t$plugin.enableClear = true;\r\n\t\t\t\t\t\t\t$plugin.startPoint.x = event.offsetX;\r\n\t\t\t\t\t\t\t$plugin.startPoint.y = event.offsetY;\r\n\t\t\t\t\t\t\t$plugin.ctx.beginPath();\r\n\t\t\t\t\t\t\t$plugin.ctx.moveTo($plugin.startPoint.x,$plugin.startPoint.y);\r\n\t\t\t\t\t\t});\r\n\t\t\t\t\t\t$plugin.$elem.on(\"mousemove\",function(event){\r\n\t\t\t\t\t\t\tif($plugin.enableClear){\r\n\t\t\t\t\t\t\t\tvar x = event.offsetX;\r\n\t\t\t\t\t\t\t\tvar y = event.offsetY;\r\n\t\t\t\t\t\t\t\t$plugin.ctx.lineTo(x,y);\r\n\t\t\t\t\t\t\t\t$plugin.ctx.stroke();\r\n\t\t\t\t\t\t\t\t$plugin.startPoint.x = x;\r\n\t\t\t\t\t\t\t\t$plugin.startPoint.y = y;\r\n\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t});\r\n\t\t\t\t\t\t$(document).on(\"mouseup\",function(event){\r\n\t\t\t\t\t\t\t$plugin.enableClear = false;\r\n\t\t\t\t\t\t\t$plugin.ctx.closePath();\r\n\t\t\t\t\t\t});\r\n\t\t\t\t\t}\r\n\t\t\t\t}\r\n\t\t\t})(jQuery);\r\n\t\t<\/script>\r\n\t\t<script>\r\n\t\t\t$(function(){\r\n\t\t\t\t$(\"#container1\").wqzGgl({});\r\n\t\t\t\t$(\"#container2\").wqzGgl({});\r\n\t\t\t})\r\n\t\t<\/script>\r\n\t<\/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\u5b9e\u73b0\u522e\u522e\u4e50\u63d2\u4ef6<\/a><\/p>","protected":false},"excerpt":{"rendered":"
<!DOCTYPE html> <html> <head> <meta charset=”utf-8″ \/> <title>qdabc.cn […]<\/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,341],"_links":{"self":[{"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=\/wp\/v2\/posts\/2452"}],"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=2452"}],"version-history":[{"count":1,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=\/wp\/v2\/posts\/2452\/revisions"}],"predecessor-version":[{"id":2453,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=\/wp\/v2\/posts\/2452\/revisions\/2453"}],"wp:attachment":[{"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2452"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2452"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2452"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}