{"id":255,"date":"2016-03-03T13:49:07","date_gmt":"2016-03-03T05:49:07","guid":{"rendered":"http:\/\/www.xttblog.com\/?p=255"},"modified":"2016-03-03T13:49:07","modified_gmt":"2016-03-03T05:49:07","slug":"html5%e8%ae%a9canvas%e5%85%a8%e5%b1%8f%e7%9a%84%e4%be%8b%e5%ad%90","status":"publish","type":"post","link":"https:\/\/www.xttblog.com\/?p=255","title":{"rendered":"HTML5\u8ba9Canvas\u5168\u5c4f\u7684\u4f8b\u5b50"},"content":{"rendered":"

\n\t\u672cdemo\u517c\u5bb9\u6240\u6709\u4e3b\u6d41\u6d4f\u89c8\u5668\u3002\u5728\u751f\u6d3b\u4e2d\u4e5f\u6709\u5f88\u591a\u8fd9\u6837\u7684\u4f7f\u7528\u573a\u666f\uff0c\u6bd4\u5982\u4f60\u5728\u73a9\u67d0\u9875\u6e38\u7684\u65f6\u5019\uff0c\u5e0c\u671b\u6e38\u620f\u5168\u5c4f\u5c55\u793a\u3002\u4f20\u7edf\u7684\u505a\u6cd5\uff0c\u5c31\u662f\u5728\u6d4f\u89c8\u5668\u91cc\u4f7f\u7528div\u6a21\u62df\u5168\u5c4f\u3002\u8fd9\u79cd\u505a\u6cd5\u5e76\u4e0d\u80fd\u8fbe\u5230\u771f\u6b63\u610f\u4e49\u4e0a\u884c\u7684\u5168\u5c4f\u3002\n<\/p>\n

\n\t\u4e0b\u9762\u6211\u5c31\u6559\u5927\u5bb6\u4f7f\u7528HTML5\u7684Canvas\u5b9e\u73b0\u5168\u5c4f\u7684\u4f8b\u5b50\u3002\u6548\u679c\u5982\u4e0b\uff1a\n<\/p>\n

\n\t\n<\/p>\n

\n\t\u4ee3\u7801\u5982\u4e0b\uff1a\n<\/p>\n

\r\n<!DOCTYPE HTML>\r\n<html>\r\n  <head>\r\n    <title>HTML5\u5b9e\u73b0Canvas\u5168\u5c4f——\u4e1a\u4f59\u8349<\/title>\r\n\t<meta charset="utf-8">\r\n  <\/head>\r\n  <body>\r\n  \t<canvas id="xttblog" width="548" height="364"><\/canvas>\r\n  \t<br\/>\r\n  \t<input value="\u70b9\u51fb\u5168\u5c4f" onclick="fullScreen();" type="button">\r\n  \t<script type="text\/javascript">\r\n  \t\t\/\/ \u6b22\u8fce\u60a8\u8bbf\u95ee\u4e1a\u4f59\u8349\u5b98\u7f51\uff1awww.xttblog.com\r\n  \t\t\/\/ \u6d9b\u54e5qq\u7fa4\uff1a454796847\r\n  \t\twindow.onload = function(){  \r\n\t\t    var xttblog =document.getElementById('xttblog');  \r\n\t\t    var context = xttblog.getContext('2d');  \r\n\t\t    var img = new Image();  \r\n\t\t    img.onload = function(){  \r\n\t\t        draw(this);  \r\n\t\t    };  \r\n\t\t    img.src = 'http:\/\/www.xttblog.com\/wp-content\/uploads\/2016\/03\/xttblog.png';  \r\n\t\t    function draw(obj){  \r\n\t\t        context.drawImage(obj,0,0);  \r\n\t\t          \r\n\t\t    }  \r\n\t\t};  \r\n  \t\tfunction fullScreen() {\r\n  \t\t\tvar element = document.getElementById('xttblog'),method = "RequestFullScreen";\r\n\t\t\tvar prefixMethod;\r\n\t\t\t[\"webkit\", \"moz\", \"ms\", \"o\", \"\"].forEach(function(prefix) {\r\n\t\t\t\tif (prefixMethod) \r\n\t\t\t\t\treturn;\r\n\t\t\t\tif (prefix === "") {\r\n\t\t\t\t\t\/\/ \u65e0\u524d\u7f00\uff0c\u65b9\u6cd5\u9996\u5b57\u6bcd\u5c0f\u5199\r\n\t\t\t\t\tmethod = method.slice(0,1).toLowerCase() + method.slice(1);\r\n\t\t\t\t}\r\n\t\t\t\tvar fsMethod = typeof element[prefix + method];\r\n\t\t\t\t\tif (fsMethod + "" !== "undefined") {\r\n\t\t\t\t\t\t\/\/ \u5982\u679c\u662f\u51fd\u6570,\u5219\u6267\u884c\u8be5\u51fd\u6570\r\n\t\t\t\t\t\tif (fsMethod === "function") {\r\n\t\t\t\t\t\t\tprefixMethod = element[prefix + method]();\r\n\t\t\t\t\t\t} else {\r\n\t\t\t\t\t\t\tprefixMethod = element[prefix + method];\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);\r\n\t\t\treturn prefixMethod;\r\n\t\t};\r\n  \t<\/script>\r\n  <\/body>\r\n<\/html><\/pre>\n
\n\t\u7248\u6743\u58f0\u660e\uff1a\u672c\u6587\u4e3a\u4e1a\u4f59\u8349\u539f\u521b\u6587\u7ae0\uff0c\u672a\u7ecf\u535a\u4e3b\u5141\u8bb8\u4e0d\u5f97\u8f6c\u8f7d\u3002\u539f\u6587\u5730\u5740\uff1ahttp:\/\/www.xttblog.com\/?p=255<\/a>\n<\/p>\n
\n\t <\/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\u8ba9Canvas\u5168\u5c4f\u7684\u4f8b\u5b50<\/a><\/p>","protected":false},"excerpt":{"rendered":"
\u672cdemo\u517c\u5bb9\u6240\u6709\u4e3b\u6d41\u6d4f\u89c8\u5668\u3002\u5728\u751f\u6d3b\u4e2d\u4e5f\u6709\u5f88\u591a\u8fd9\u6837\u7684\u4f7f\u7528\u573a\u666f\uff0c\u6bd4\u5982\u4f60\u5728\u73a9\u67d0\u9875\u6e38\u7684\u65f6\u5019\uff0c\u5e0c\u671b\u6e38\u620f\u5168\u5c4f\u5c55\u793a\u3002\u4f20\u7edf\u7684 […]<\/p>\n","protected":false},"author":2,"featured_media":254,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[31,119],"class_list":["post-255","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-html5","tag-canvas","tag-html5"],"_links":{"self":[{"href":"https:\/\/www.xttblog.com\/index.php?rest_route=\/wp\/v2\/posts\/255","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=255"}],"version-history":[{"count":1,"href":"https:\/\/www.xttblog.com\/index.php?rest_route=\/wp\/v2\/posts\/255\/revisions"}],"predecessor-version":[{"id":256,"href":"https:\/\/www.xttblog.com\/index.php?rest_route=\/wp\/v2\/posts\/255\/revisions\/256"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.xttblog.com\/index.php?rest_route=\/wp\/v2\/media\/254"}],"wp:attachment":[{"href":"https:\/\/www.xttblog.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=255"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.xttblog.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=255"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.xttblog.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=255"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}