{"id":399,"date":"2016-04-08T20:42:43","date_gmt":"2016-04-08T12:42:43","guid":{"rendered":"http:\/\/www.xttblog.com\/?p=399"},"modified":"2016-09-04T17:57:10","modified_gmt":"2016-09-04T09:57:10","slug":"html5-canvas%e5%9c%86%e7%9b%98%e6%8a%bd%e5%a5%96%e5%ba%94%e7%94%a8demo%e6%bc%94%e7%a4%ba","status":"publish","type":"post","link":"https:\/\/www.xttblog.com\/?p=399","title":{"rendered":"HTML5 Canvas\u5706\u76d8\u62bd\u5956\u5e94\u7528DEMO\u6f14\u793a"},"content":{"rendered":"

\n\t\u6211\u4eec\u7ecf\u5e38\u53c2\u52a0\u5404\u79cd\u7535\u5546\u4f18\u60e0\u6d3b\u52a8\uff0c\u6bd4\u5982\u8d2d\u4e70\u8fbe\u5230\u4e00\u5b9a\u6570\u989d\u8fdb\u884c\u62bd\u5956\u6d3b\u52a8\uff0c\u5728\u6bd4\u5982\u5fae\u4fe1\u62bd\u5956\uff0c\u6dd8\u5b9d\u62bd\u5956\uff0c\u8fc5\u96f7\u8d5a\u94b1\u5b9d\u5706\u76d8\u62bd\u5956\u6d3b\u52a8\u7b49\u3002\u8fd9\u4e9b\u62bd\u5956\u6d3b\u52a8\u90e8\u5206\u5c31\u662f\u7531HTML5\u7684Canvas\u6765\u5236\u4f5c\u7684\uff0c\u4eca\u5929\u5c31\u4e3a\u5927\u5bb6\u5206\u4eab\u4e00\u4e0b\u5982\u4f55\u4f7f\u7528HTML5\u7684Canvas\u6765\u5236\u4f5c\u5706\u76d8\u62bd\u5956\u529f\u80fd\u3002\u8001\u89c4\u77e9\uff0c\u5148\u770b\u4e0b\u6548\u679c\u56fe\u5427\uff1a
\n\t\n<\/p>\n

\n\t\u518d\u6765\u770b\u770bCanvas\u7684\u51e0\u4e2a\u4e3b\u8981api\uff1a\n<\/p>\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
\n\t\t\t\t\u65b9\u6cd5\n\t\t\t<\/th>\n\n\t\t\t\t\u7528\u9014\n\t\t\t<\/th>\n<\/tr>\n<\/thead>\n
\n\t\t\t\tgetContext(contextId)\n\t\t\t<\/td>\n\n\t\t\t\t\u516c\u5f00\u5728canvas\u4e0a\u7ed8\u56fe\u9700\u8981\u7684API\u3002\u60df\u4e00(\u5f53\u524d)\u53ef\u7528\u7684contextID\u662f 2d\u3002\n\t\t\t<\/td>\n<\/tr>\n
\n\t\t\t\theight\n\t\t\t<\/td>\n\n\t\t\t\t\u8bbe\u7f6e canvas \u7684\u9ad8\u5ea6\u3002\u9ed8\u8ba4\u503c\u662f 150 \u50cf\u7d20\u3002\n\t\t\t<\/td>\n<\/tr>\n
\n\t\t\t\twidth\n\t\t\t<\/td>\n\n\t\t\t\t\u8bbe\u7f6e canvas \u7684\u5bbd\u5ea6\u3002\u9ed8\u8ba4\u503c\u662f 300 \u50cf\u7d20\u3002\n\t\t\t<\/td>\n<\/tr>\n
\n\t\t\t\tcreateLinearGradient(x1,y1,x2,y2)\n\t\t\t<\/td>\n\n\t\t\t\t\u521b\u5efa\u4e00\u4e2a\u7ebf\u6027\u6e10\u53d8\u3002\u8d77\u59cb\u5750\u6807\u4e3ax1,y1\uff0c\u7ed3\u675f\u5750\u6807\u4e3ax2,y2\u3002\n\t\t\t<\/td>\n<\/tr>\n
\n\t\t\t\tcreateRadialGradient(x1,y1,r1,x2,y2,r2)\n\t\t\t<\/td>\n\n\t\t\t\t\u521b\u5efa\u4e00\u4e2a\u653e\u5c04\u72b6\u6e10\u53d8\u3002\u5706\u5708\u7684\u8d77\u59cb\u5750\u6807\u662fx1,y1\uff0c\u534a\u5f84\u4e3ar1\u3002\u5706\u5708\u7684\u7ed3\u675f\u5750\u6807\u4e3ax2,y2\uff0c\u534a\u5f84\u4e3ar2\u3002\n\t\t\t<\/td>\n<\/tr>\n
\n\t\t\t\taddColorStop(offset, color)\n\t\t\t<\/td>\n\n\t\t\t\t\u5411\u4e00\u4e2a\u6e10\u53d8\u6dfb\u52a0\u4e00\u4e2a\u989c\u8272\u505c\u6b62\u3002\u989c\u8272\u505c\u6b62\uff08color stop\uff09\u662f\u6e10\u53d8\u4e2d\u989c\u8272\u66f4\u6539\u53d1\u751f\u7684\u4f4d\u7f6e\u3002offset\u5fc5\u987b\u4ecb\u4e8e0\u52301\u4e4b\u95f4\u3002\n\t\t\t<\/td>\n<\/tr>\n
\n\t\t\t\tfillStyle\n\t\t\t<\/td>\n\n\t\t\t\t\u8bbe\u7f6e\u7528\u4e8e\u586b\u5145\u4e00\u4e2a\u533a\u57df\u7684\u989c\u8272 — \u4f8b\u5982\uff0cfillStyle='rgb(255,0,0)'.\n\t\t\t<\/td>\n<\/tr>\n
\n\t\t\t\tstrokeStyle\n\t\t\t<\/td>\n\n\t\t\t\t\u8bbe\u7f6e\u7528\u4e8e\u7ed8\u5236\u4e00\u6839\u76f4\u7ebf\u7684\u989c\u8272 — \u4f8b\u5982\uff0cfillStyle='rgb(255,0,0)'.\n\t\t\t<\/td>\n<\/tr>\n
\n\t\t\t\tfillRect(x,y,w,h)\n\t\t\t<\/td>\n\n\t\t\t\t\u586b\u5145\u4e00\u4e2a\u5b9a\u4f4d\u4e8e x \u548c y\uff0c\u5bbd\u5ea6\u548c\u9ad8\u5ea6\u5206\u522b\u4e3a w \u548c h \u7684\u77e9\u5f62\u3002\n\t\t\t<\/td>\n<\/tr>\n
\n\t\t\t\tstrokeRect(x,y,w,h)\n\t\t\t<\/td>\n\n\t\t\t\t\u7ed8\u5236\u4e00\u4e2a\u5b9a\u4f4d\u4e8e x \u548c y\uff0c\u5bbd\u5ea6\u548c\u9ad8\u5ea6\u5206\u522b\u4e3a w \u548c h \u7684\u77e9\u5f62\u7684\u8f6e\u5ed3\u3002\n\t\t\t<\/td>\n<\/tr>\n
\n\t\t\t\tmoveTo(x,y)\n\t\t\t<\/td>\n\n\t\t\t\t\u5c06\u7ed8\u56fe\u4f4d\u7f6e\u79fb\u52a8\u5230\u5750\u6807 x,y\u3002\n\t\t\t<\/td>\n<\/tr>\n
\n\t\t\t\tlineTo(x,y)\n\t\t\t<\/td>\n\n\t\t\t\t\u4ece\u7ed8\u56fe\u65b9\u6cd5\u7ed3\u675f\u7684\u6700\u540e\u4f4d\u7f6e\u5230 x,y \u7ed8\u5236\u4e00\u6761\u76f4\u7ebf\u3002\n\t\t\t<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

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

\r\n<!DOCTYPE html>\r\n<html lang="zh-cn">\r\n<head>\r\n<meta charset="UTF-8">\r\n<title>HTML5 Canvas\u5706\u76d8\u62bd\u5956\u5e94\u7528DEMO\u6f14\u793a<\/title>\r\n<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">\r\n<style>\r\n*{padding: 0px;margin: 0px;font-size: 16px;font-family: "Microsoft YaHei";}\r\n.xttblog_box{width: 300px;height: 300px;margin: 100px auto;position: relative; }\r\n.xttblog_box canvas{position: absolute;}\r\n#xttblog{background-color: white;border-radius: 100%;}\r\n#xttblog01,#xttblog03{left: 50px;top: 50px;z-index: 30;}\r\n#xttblog02{left: 75px;top: 75px;z-index: 20;}\r\n#xttblog{-o-transform:  transform 6s;-ms-transform:  transform 6s;-moz-transform:  transform 6s;\t\t\r\n-webkit-transform:  transform 6s;transition: transform 6s;-o-transform-origin:  50% 50%;\r\n-ms-transform-origin:  50% 50%;-moz-transform-origin:  50% 50%;-webkit-transform-origin:  50% 50%;\r\ntransform-origin: 50% 50%;}\r\n.taoge_btn{width: 60px;height: 60px;left: 120px;top: 120px;border-radius: 100%;\r\nposition: absolute;cursor: pointer;border: none;background: transparent;\r\noutline: none;z-index: 40;}\r\n<\/style>\r\n<script type="text\/javascript" src="http:\/\/cdn.bootcss.com\/jquery\/1.11.3\/jquery.min.js"><\/script>\r\n<script>\r\n$(document).ready(function(){\r\n\t\/\/\u65cb\u8f6c\u89d2\u5ea6\r\n\tvar angles;\r\n\t\/\/\u53ef\u62bd\u5956\u6b21\u6570\r\n\tvar clickNum = 5;\r\n\t\/\/\u65cb\u8f6c\u6b21\u6570\r\n\tvar rotNum = 0;\r\n\t\/\/\u4e2d\u5956\u516c\u544a\r\n\tvar notice = null;\r\n\t\/\/\u8f6c\u76d8\u521d\u59cb\u5316\r\n\tvar color = [\"#626262\",\"#787878\",\"rgba(0,0,0,0.5)\",\"#DCC722\",\"white\",\"#FF4350\"];\r\n\tvar info = [\"\u8c22\u8c22\u53c2\u4e0e\",\"  1000\",\"   10\",\"  500\",\"  100\",\" 4999\",\"    1\",\"   20\"];\r\n\tvar info1 = ['\u518d\u63a5\u518d\u5389','      \u5143','     \u5143','  \u6dd8\u91d1\u5e01','     \u5143','  \u6dd8\u91d1\u5e01','     \u5143','  \u6dd8\u91d1\u5e01']\r\n\tcanvasRun();\r\n\t$('#tupBtn').bind('click',function(){\r\n\t\tif (clickNum >= 1) {\r\n\t\t\t\/\/\u53ef\u62bd\u5956\u6b21\u6570\u51cf\u4e00\r\n\t\t\tclickNum = clickNum-1;\r\n\t\t\t\/\/\u8f6c\u76d8\u65cb\u8f6c\r\n\t\t\trunCup();\r\n\t\t\t\/\/\u8f6c\u76d8\u65cb\u8f6c\u8fc7\u7a0b“\u5f00\u59cb\u62bd\u5956”\u6309\u94ae\u65e0\u6cd5\u70b9\u51fb\r\n\t\t\t$('#tupBtn').attr("disabled", true);\r\n\t\t\t\/\/\u65cb\u8f6c\u6b21\u6570\u52a0\u4e00\r\n\t\t\trotNum = rotNum + 1;\r\n\t\t\t\/\/“\u5f00\u59cb\u62bd\u5956”\u6309\u94ae\u65e0\u6cd5\u70b9\u51fb\u6062\u590d\u70b9\u51fb\r\n\t\t\tsetTimeout(function(){\r\n\t\t\t\talert(notice);\r\n\t\t\t\t$('#tupBtn').removeAttr("disabled", true);\r\n\t\t\t},6000);\r\n\t\t}\r\n\t\telse{\r\n\t\t\talert("\u4eb2\uff0c\u62bd\u5956\u6b21\u6570\u5df2\u7528\u5149\uff01");\r\n\t\t}\r\n\t});\r\n\r\n\t\/\/\u8f6c\u76d8\u65cb\u8f6c\r\n\tfunction runCup(){\r\n\t\tprobability();\r\n\t\tvar degValue = 'rotate('+angles+'deg'+')';\r\n\t\t$('#xttblog').css('-o-transform',degValue);           \/\/Opera\r\n\t\t$('#xttblog').css('-ms-transform',degValue);          \/\/IE\u6d4f\u89c8\u5668\r\n\t\t$('#xttblog').css('-moz-transform',degValue);         \/\/Firefox\r\n\t\t$('#xttblog').css('-webkit-transform',degValue);      \/\/Chrome\u548cSafari\r\n\t\t$('#xttblog').css('transform',degValue);\r\n\t}\r\n\r\n\t\/\/\u5404\u5956\u9879\u5bf9\u5e94\u7684\u65cb\u8f6c\u89d2\u5ea6\u53ca\u4e2d\u5956\u516c\u544a\u5185\u5bb9\r\n\tfunction probability(){\r\n\t\t\/\/\u83b7\u53d6\u968f\u673a\u6570\r\n\t\tvar num = parseInt(Math.random()*(7 - 0 + 0) + 0);\r\n\t\t\/\/\u6982\u7387\r\n\t\tif ( num == 0 ) {\r\n\t\t\tangles = 2160 * rotNum + 1800;\r\n\t\t\tnotice = info[0] + info1[0];\r\n\t\t}\r\n\t\t\/\/\u6982\u7387\r\n\t\telse if ( num == 1 ) {\r\n\t\t\tangles = 2160 * rotNum + 1845;\r\n\t\t\tnotice = info[7] + info1[7];\r\n\t\t}\r\n\t\t\/\/\u6982\u7387\r\n\t\telse if ( num == 2 ) {\r\n\t\t\tangles = 2160 * rotNum + 1890;\r\n\t\t\tnotice = info[6] + info1[6];\r\n\t\t}\r\n\t\t\/\/\u6982\u7387\r\n\t\telse if ( num == 3 ) {\r\n\t\t\tangles = 2160 * rotNum + 1935;\r\n\t\t\tnotice = info[5] + info1[5];\r\n\t\t}\r\n\t\t\/\/\u6982\u7387\r\n\t\telse if ( num == 4 ) {\r\n\t\t\tangles = 2160 * rotNum + 1980;\r\n\t\t\tnotice = info[4] + info1[4];\r\n\t\t}\r\n\t\t\/\/\u6982\u7387\r\n\t\telse if ( num == 5 ) {\r\n\t\t\tangles = 2160 * rotNum + 2025;\r\n\t\t\tnotice = info[3] + info1[3];\r\n\t\t}\r\n\t\t\/\/\u6982\u7387\r\n\t\telse if ( num == 6 ) {\r\n\t\t\tangles = 2160 * rotNum + 2070;\r\n\t\t\tnotice = info[2] + info1[2];\r\n\t\t}\r\n\t\t\/\/\u6982\u7387\r\n\t\telse if ( num == 7 ) {\r\n\t\t\tangles = 2160 * rotNum + 2115;\r\n\t\t\tnotice = info[1] + info1[1];\r\n\t\t}\r\n\t}\r\n\r\n\t\/\/\u7ed8\u5236\u8f6c\u76d8\r\n\tfunction canvasRun(){\r\n\t\tvar canvas=document.getElementById('xttblog');\r\n\t\tvar canvas01=document.getElementById('xttblog01');\r\n\t\tvar canvas03=document.getElementById('xttblog03');\r\n\t\tvar canvas02=document.getElementById('xttblog02');\r\n\t\tvar ctx=canvas.getContext('2d');\r\n\t\tvar ctx1=canvas01.getContext('2d');\r\n\t\tvar ctx3=canvas03.getContext('2d');\r\n\t\tvar ctx2=canvas02.getContext('2d');\r\n\t\tcreateCircle();\r\n\t\tcreateCirText();\r\n\t\tinitPoint();\r\n\t\r\n\t\t\/\/\u5916\u5706\r\n\t\tfunction createCircle(){\r\n\t        var startAngle = 0;\/\/\u6247\u5f62\u7684\u5f00\u59cb\u5f27\u5ea6\r\n\t        var endAngle = 0;\/\/\u6247\u5f62\u7684\u7ec8\u6b62\u5f27\u5ea6\r\n\t        \/\/\u753b\u4e00\u4e2a8\u7b49\u4efd\u6247\u5f62\u7ec4\u6210\u7684\u5706\u5f62\r\n\t        for (var i = 0; i< 8; i++){\r\n\t            startAngle = Math.PI*(i\/4-1\/8);\r\n\t            endAngle = startAngle+Math.PI*(1\/4);\r\n\t            ctx.save();\r\n\t            ctx.beginPath(); \r\n\t            ctx.arc(150,150,100, startAngle, endAngle, false);\r\n\t            ctx.lineWidth = 120;\r\n\t            if (i%2 == 0) {\r\n\t            \tctx.strokeStyle =  color[0];\r\n\t            }else{\r\n\t            \tctx.strokeStyle =  color[1];\r\n\t            }\r\n\t            ctx.stroke();\r\n\t            ctx.restore();\r\n\t        } \r\n\t    }\r\n\r\n\t    \/\/\u5404\u5956\u9879\r\n\t    function createCirText(){\t \r\n\t\t    ctx.textAlign='start';\r\n\t\t    ctx.textBaseline='middle';\r\n\t\t    ctx.fillStyle = color[3];\r\n\t\t    var step = 2*Math.PI\/8;\r\n\t\t    for ( var i = 0; i < 8; i++) {\r\n\t\t    \tctx.save();\r\n\t\t    \tctx.beginPath();\r\n\t\t        ctx.translate(150,150);\r\n\t\t        ctx.rotate(i*step);\r\n\t\t        ctx.font = " 20px Microsoft YaHei";\r\n\t\t        ctx.fillStyle = color[3];\r\n\t\t        ctx.fillText(info[i],-30,-115,60);\r\n\t\t        ctx.font = " 14px Microsoft YaHei";\r\n\t\t        ctx.fillText(info1[i],-30,-95,60);\r\n\t\t        ctx.closePath();\r\n\t\t        ctx.restore();\r\n\t\t    }\r\n\t\t}\r\n\r\n\t\tfunction initPoint(){ \r\n\t        \/\/\u7bad\u5934\u6307\u9488\r\n\t        ctx1.beginPath();\r\n\t        ctx1.moveTo(100,24);\r\n\t        ctx1.lineTo(90,62);\r\n\t        ctx1.lineTo(110,62);\r\n\t        ctx1.lineTo(100,24);\r\n\t        ctx1.fillStyle = color[5];\r\n\t        ctx1.fill();\r\n\t        ctx1.closePath();\r\n\t        \/\/\u4e2d\u95f4\u5c0f\u5706\r\n\t        ctx3.beginPath();\r\n\t        ctx3.arc(100,100,40,0,Math.PI*2,false);\r\n\t        ctx3.fillStyle = color[5];\r\n\t        ctx3.fill();\r\n\t        ctx3.closePath();\r\n\t        \/\/\u5c0f\u5706\u6587\u5b57\r\n\t        ctx3.font = "Bold 20px Microsoft YaHei"; \r\n\t\t    ctx3.textAlign='start';\r\n\t\t    ctx3.textBaseline='middle';\r\n\t\t    ctx3.fillStyle = color[4];\r\n\t        ctx3.beginPath();\r\n\t        ctx3.fillText('\u5f00\u59cb',80,90,40);\r\n\t        ctx3.fillText('\u62bd\u5956',80,110,40);\r\n\t        ctx3.fill();\r\n\t        ctx3.closePath();\r\n\t        \/\/\u4e2d\u95f4\u5706\u5708\r\n\t        ctx2.beginPath();\r\n\t        ctx2.arc(75,75,75,0,Math.PI*2,false);\r\n\t        ctx2.fillStyle = color[2];\r\n\t        ctx2.fill();\r\n\t        ctx2.closePath();\r\n\t\t}\r\n\t}\r\n});\r\n<\/script>\r\n<\/head>\r\n<body>\r\n<div class="xttblog_box">\r\n\t<canvas id="xttblog" width="300px" height="300px">\u62b1\u6b49\uff01\u6d4f\u89c8\u5668\u4e0d\u652f\u6301\u3002<\/canvas>\r\n\t<canvas id="xttblog01" width="200px" height="200px">\u62b1\u6b49\uff01\u6d4f\u89c8\u5668\u4e0d\u652f\u6301\u3002<\/canvas>\r\n\t<canvas id="xttblog03" width="200px" height="200px">\u62b1\u6b49\uff01\u6d4f\u89c8\u5668\u4e0d\u652f\u6301\u3002<\/canvas>\r\n\t<canvas id="xttblog02" width="150px" height="150px">\u62b1\u6b49\uff01\u6d4f\u89c8\u5668\u4e0d\u652f\u6301\u3002<\/canvas>\r\n\t<button id="tupBtn" class="taoge_btn"><\/button>\r\n<\/div>\r\n<!-- \u66f4\u6539\u7cfb\u7edf\u9ed8\u8ba4\u5f39\u7a97 -->\r\n<script type="text\/javascript">\r\nwindow.alert = function(str)\r\n{\r\n\tvar shield = document.createElement("DIV");\r\n\tshield.id = "shield";\r\n\tshield.style.position = "absolute";\r\n\tshield.style.left = "50%";\r\n\tshield.style.top = "50%";\r\n\tshield.style.width = "280px";\r\n\tshield.style.height = "150px";\r\n\tshield.style.marginLeft = "-140px";\r\n\tshield.style.marginTop = "-110px";\r\n\tshield.style.zIndex = "25";\r\n\tvar alertFram = document.createElement("DIV");\r\n\talertFram.id="alertFram";\r\n\talertFram.style.position = "absolute";\r\n\talertFram.style.width = "280px";\r\n\talertFram.style.height = "150px";\r\n\talertFram.style.left = "50%";\r\n\talertFram.style.top = "50%";\r\n\talertFram.style.marginLeft = "-140px";\r\n\talertFram.style.marginTop = "-110px";\r\n\talertFram.style.textAlign = "center";\r\n\talertFram.style.lineHeight = "150px";\r\n\talertFram.style.zIndex = "300";\r\n\tstrHtml = "<ul style=\\"list-style:none;margin:0px;padding:0px;width:100%\\">\\n";\r\n\tstrHtml += " <li style=\\"background:#626262;text-align:left;padding-left:20px;font-size:14px;font-weight:bold;height:25px;line-height:25px;border:1px solid #F9CADE;color:white\\">[\u4e2d\u5956\u63d0\u9192]<\/li>\\n";\r\n\tstrHtml += " <li style=\\"background:#787878;text-align:center;font-size:12px;height:95px;line-height:95px;border-left:1px solid #F9CADE;border-right:1px solid #F9CADE;color:#DCC722\\">"+str+"<\/li>\\n";\r\n\tstrHtml += " <li style=\\"background:#626262;text-align:center;font-weight:bold;height:30px;line-height:25px; border:1px solid #F9CADE;\\"><input type=\\"button\\" value=\\"\u786e \u5b9a\\" onclick=\\"doOk()\\" style=\\"width:80px;height:20px;background:#626262;color:white;border:1px solid white;font-size:14px;line-height:20px;outline:none;margin-top: 4px\\"\/><\/li>\\n";\r\n\tstrHtml += "<\/ul>\\n";\r\n\talertFram.innerHTML = strHtml;\r\n\tdocument.body.appendChild(alertFram);\r\n\tdocument.body.appendChild(shield);\r\n\tthis.doOk = function(){\r\n\t\talertFram.style.display = "none";\r\n\t\tshield.style.display = "none";\r\n\t}\r\n\talertFram.focus();\r\n\tdocument.body.onselectstart = function(){return false;};\r\n}\r\n<\/script>\r\n<\/body>\r\n<\/html><\/pre>\n
\n\t\u7248\u6743\u58f0\u660e\uff1a\u672c\u6587\u4e3a\u535a\u4e3b\u539f\u521b\u6587\u7ae0\uff0c\u672a\u7ecf\u535a\u4e3b\u5141\u8bb8\u4e0d\u5f97\u8f6c\u8f7d\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\u5706\u76d8\u62bd\u5956\u5e94\u7528DEMO\u6f14\u793a<\/a><\/p>","protected":false},"excerpt":{"rendered":"
\u6211\u4eec\u7ecf\u5e38\u53c2\u52a0\u5404\u79cd\u7535\u5546\u4f18\u60e0\u6d3b\u52a8\uff0c\u6bd4\u5982\u8d2d\u4e70\u8fbe\u5230\u4e00\u5b9a\u6570\u989d\u8fdb\u884c\u62bd\u5956\u6d3b\u52a8\uff0c\u5728\u6bd4\u5982\u5fae\u4fe1\u62bd\u5956\uff0c\u6dd8\u5b9d\u62bd\u5956\uff0c\u8fc5\u96f7\u8d5a\u94b1\u5b9d\u5706\u76d8\u62bd\u5956\u6d3b […]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[31,146,119,148,147],"class_list":["post-399","post","type-post","status-publish","format-standard","hentry","category-html5","tag-canvas","tag-html5","tag-lineto","tag-moveto"],"_links":{"self":[{"href":"https:\/\/www.xttblog.com\/index.php?rest_route=\/wp\/v2\/posts\/399","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=399"}],"version-history":[{"count":4,"href":"https:\/\/www.xttblog.com\/index.php?rest_route=\/wp\/v2\/posts\/399\/revisions"}],"predecessor-version":[{"id":1994,"href":"https:\/\/www.xttblog.com\/index.php?rest_route=\/wp\/v2\/posts\/399\/revisions\/1994"}],"wp:attachment":[{"href":"https:\/\/www.xttblog.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=399"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.xttblog.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=399"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.xttblog.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=399"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}