{"id":311,"date":"2024-06-28T19:25:07","date_gmt":"2024-06-28T11:25:07","guid":{"rendered":"https:\/\/www.funworld.cc\/?p=311"},"modified":"2024-06-28T19:27:51","modified_gmt":"2024-06-28T11:27:51","slug":"vue3%e4%bd%bf%e7%94%a8%e7%ba%af%e5%89%8d%e7%ab%af%e5%ae%9e%e7%8e%b0%e5%9b%be%e5%bd%a2%e9%aa%8c%e8%af%81%e7%a0%81","status":"publish","type":"post","link":"https:\/\/blog.itsmygo.cn\/?p=311","title":{"rendered":"Vue3\u4f7f\u7528\u7eaf\u524d\u7aef\u5b9e\u73b0\u56fe\u5f62\u9a8c\u8bc1\u7801"},"content":{"rendered":"

\u524d\u671f\u51c6\u5907<\/h1>\n

Canvas \u6559\u7a0b – Web API | MDN (mozilla.org)<\/a><\/p>\n

\u4e86\u89e3Canvas\u5143\u7d20\u5982\u4f55\u4f7f\u7528<\/p>\n

\u6b63\u5f0f\u5de5\u4f5c<\/h1>\n

\u521b\u5efa\u6587\u4ef6<\/h2>\n

\u521b\u5efaIdentifyCode.vue\u4f5c\u4e3a\u7ec4\u4ef6\uff0c\u4e3a\u4e86\u663e\u793a\u9a8c\u8bc1\u7801\uff0c\u6211\u4eec\u9996\u5148\u8981\u58f0\u660e\u4e00\u4e2acanvas\u5143\u7d20<\/p>\n

\n
<template>\r\n\u00a0 <canvas id=\"code-canvas\" :width=\"picWidth\" :height=\"picHeight\"><\/canvas>\r\n<\/template><\/pre>\n
\u8981\u505a\u5230\u4e0b\u56fe\u7684\u6548\u679c\uff0c\u6211\u4eec\u9996\u5148\u8981\u6765\u8fdb\u884c\u4e00\u4e0b\u5143\u7d20\u7684\u5206\u6790<\/p>\n<\/div>\n
\"\"<\/div><\/p>\n
\u8be5\u9a8c\u8bc1\u7801\u75314\u4e2a\u6570\u5b57\u6216\u5b57\u6bcd\u7ec4\u6210\uff0c\u5927\u5c0f\u968f\u673a\uff0c\u65cb\u8f6c\u89d2\u5ea6\u968f\u673a\uff0c\u989c\u8272\u968f\u673a\uff1b\u80cc\u666f\u989c\u8272\u968f\u673a\uff0c\u6709\u968f\u673a\u989c\u8272\u7684\u70b9\u72b6\u968f\u673a\u5206\u5e03\uff0c\u968f\u673a\u5e72\u6270\u7ebf\u3002<\/p>\n
\u4e00\u4e2a\u9a8c\u8bc1\u7801\u5143\u7d20\u8fd8\u5177\u6709\u957f\u5ea6\u548c\u5bbd\u5ea6\u4e24\u4e2a\u5c5e\u6027\uff0c\u6240\u4ee5\u5728data\u91cc\u9762\u8fdb\u884c\u4e00\u4e0b\u58f0\u660e\uff0c\u4fbf\u4e8e\u540e\u7eed\u51fd\u6570\u4f7f\u7528\u3002<\/p>\n
data() {\r\n  return {\r\n    picWidth: 120,\r\n    picHeight: 35,\r\n  };\r\n},\u00a0\u00a0\r\nprops: {\r\n \u00a0\u00a0\u00a0code: {\r\n \u00a0\u00a0\u00a0type: String,\r\n \u00a0\u00a0\u00a0default: \"2244\",\r\n\u3000},\r\n},<\/pre>\n
\u9a8c\u8bc1\u7801\u5145\u6ee1\u4e86\u968f\u673a\u6027\uff0c\u4e8e\u662f\u6211\u4eec\u5f00\u59cb\u7f16\u5199\u968f\u673a\u51fd\u6570\u3002<\/p>\n
getRandomVal(min, max) {\r\n  return Math.floor(Math.random() * (max - min) + min);\r\n}\r\ngetRandomCol(min, max) {\r\n  var r = this.getRandomVal(min, max);\r\n  var g = this.getRandomVal(min, max);\r\n  var b = this.getRandomVal(min, max);\r\n  return \"rgb(\" + r + \",\" + g + \",\" + b + \")\";\r\n}<\/pre>\n
\u8fd9\u91cc\u968f\u673a\u989c\u8272\u8fd4\u56de\u7684\u662frgb(255,255,255)<\/span>\u8fd9\u79cd\u683c\u5f0f\u7684\u5b57\u7b26\u4e32\u3002\u5b8c\u6210\u4e86\u968f\u673a\u751f\u6210\u6570\u5b57\u548c\u989c\u8272\u540e\uff0c\u63a5\u4e0b\u6765\u5206\u6b65\u8fdb\u884c\u751f\u6210\u9a8c\u8bc1\u7801\u7684\u51fd\u6570\u3002<\/p>\n
\u8fdb\u884c\u80cc\u666f\u989c\u8272\u7684\u968f\u673a\u751f\u6210<\/h2>\n
drawBackground(context) {\r\n  context.fillStyle = this.getRandomCol(180, 240);\r\n  context.fillRect(0, 0, this.picWidth, this.picHeight);\r\n}<\/pre>\n
\u8fdb\u884c\u968f\u673a\u6587\u672c\u7684\u586b\u5145<\/h2>\n
drawText(context) {\r\n  for (let i = 0; i < this.code.length; i++) {\r\n    context.fillStyle = this.getRandomCol(0, 180);\r\n    context.font = this.getRandomVal(20, 40) + \"px serif\";\r\n    let deg = this.getRandomVal(-20, 20);\r\n    let x = 20 * (i + 1);\r\n    let y = this.getRandomVal(25, 32);\r\n    context.translate(x, y);\r\n    context.rotate((Math.PI \/ 180) * deg);\r\n    context.fillText(this.code[i], 0, 0);\r\n    context.rotate(-(Math.PI \/ 180) * deg);\r\n    context.translate(-x, -y);\r\n  }\r\n},<\/pre>\n
\u5728\u8fd9\u91cc\u8981\u6ce8\u610f\uff0c\u662f\u5148\u5bf9\u753b\u5e03\u8fdb\u884c\u5e73\u79fb\u64cd\u4f5c\u518d\u8fdb\u884c\u65cb\u8f6c\uff0c\u56e0\u4e3a\u753b\u5e03\u65cb\u8f6c\u540e\u518d\u5e73\u79fb\uff0c\u4f1a\u8ba9\u753b\u5e03\u4ee5\u65b0\u7684\u65cb\u8f6c\u540e\u7684\u53c2\u8003\u7cfb\u8fdb\u884c\u5e73\u79fb\uff0c\u5728\u586b\u5145\u6587\u672c\u4e4b\u540e\u8981\u6ce8\u610f\u6062\u590d\u753b\u5e03\u5230\u6b63\u5e38\u7684\u72b6\u6001\uff0c\u4e3a\u4e0b\u4e00\u6b65\u751f\u6210\u6587\u672c\u505a\u51c6\u5907\u3002<\/p>\n
\u8fdb\u884c\u968f\u673a\u5e72\u6270\u70b9\u7684\u751f\u6210<\/h2>\n
drawDot(context) {\r\n  for (let i = 0; i < 20; i++) {\r\n    context.fillStyle = this.getRandomCol(0, 255);\r\n    context.beginPath();\r\n    context.arc(\r\n      this.getRandomVal(0, this.picWidth),\r\n      this.getRandomVal(0, this.picHeight),\r\n      1,\r\n      0,\r\n      Math.PI * 2\r\n    );\r\n    context.fill();\r\n  }\r\n},<\/pre>\n
arc(x, y, radius, startAngle, endAngle, anticlockwise)\r\n\/\/\u753b\u4e00\u4e2a\u4ee5\uff08x,y\uff09\u4e3a\u5706\u5fc3\u7684\u4ee5 radius \u4e3a\u534a\u5f84\u7684\u5706\u5f27\uff08\u5706\uff09\uff0c\u4ece startAngle \u5f00\u59cb\u5230 endAngle \u7ed3\u675f\uff0c\u6309\u7167 anticlockwise \u7ed9\u5b9a\u7684\u65b9\u5411\uff08\u9ed8\u8ba4\u4e3a\u987a\u65f6\u9488\uff09\u6765\u751f\u6210\u3002<\/pre>\n
 <\/p>\n
\u8fd9\u91cc\u4f7f\u7528\u7684\u662fcanvas\u7684\u8def\u5f84\u7ed8\u5236\u51fd\u6570\uff0c\u4f46\u662f\u6bcf\u4e00\u6b21beginPath\u540e\u56e0\u4e3a\u53ea\u7ed8\u5236\u4e86\u4e00\u4e2a\u5706\u5f27\uff0c\u6240\u4ee5\u53ef\u4ee5\u770b\u505a\u753b\u4e86\u4e00\u4e2a\u5b9e\u5fc3\u5706\u5f62\u3002<\/p>\n
\u8fdb\u884c\u968f\u673a\u5e72\u6270\u7ebf\u7684\u751f\u6210<\/h2>\n
drawLines(context) {\r\n  for (let i = 0; i < 2; i++) {\r\n    context.strokeStyle = this.getRandomCol(0, 155);\r\n    context.beginPath();\r\n    context.moveTo(\r\n      this.getRandomVal(0, this.picWidth),\r\n      this.getRandomVal(0, this.picHeight)\r\n    );\r\n    context.lineTo(\r\n      this.getRandomVal(0, this.picWidth),\r\n      this.getRandomVal(0, this.picHeight)\r\n    );\r\n    context.stroke();\r\n  }\r\n},<\/pre>\n
\u8fd9\u91cc\u662f\u901a\u8fc7for\u5faa\u73af\u751f\u62102\u6761\u5e72\u6270\u7ebf\uff0c\u4f7f\u7528moveTo\u548clineTo\u8fdb\u884c\u843d\u7b14\u3001\u63d0\u7b14\u64cd\u4f5c\u3002<\/p>\n
\u5b8c\u5584\u7ec4\u4ef6\u52a0\u8f7d\u51fa\u6765\u5c31\u7ed8\u5236\u9a8c\u8bc1\u7801\u529f\u80fd<\/h2>\n
\u5728methods\u4e2d\u6dfb\u52a0drawPic()\u51fd\u6570\uff0c\u5c06\u4e0a\u8ff0\u529f\u80fd\u653e\u5728\u8be5\u51fd\u6570\u4e2d\u8fdb\u884c\u5b9e\u73b0\u3002<\/p>\n
drawPic() {\r\n  var canvas = document.getElementById(\"code-canvas\");\r\n  var context = canvas.getContext(\"2d\");\r\n  this.drawBackground(context);\r\n  this.drawText(context);\r\n  this.drawDot(context);\r\n  this.drawLines(context);\r\n},<\/pre>\n
\u5728mounted\u65f6\u6267\u884cdrawPic()\u3002<\/p>\n
mounted() {\r\n  this.drawPic();\r\n},<\/pre>\n
\u5728\u7236\u754c\u9762\u5f15\u5165\u8be5\u9a8c\u8bc1\u7801\u7ec4\u4ef6<\/h2>\n
\u58f0\u660e\u53c2\u6570code\u4f5c\u4e3a\u751f\u6210\u968f\u673a\u9a8c\u8bc1\u7801\u5b57\u7b26\u4e32\u7684\u4e2d\u4ecb<\/p>\n
data() {\r\n  return {\r\n    code: ref(\"\"),\r\n  };\r\n},<\/pre>\n
\u5728methods\u4e2d\u6dfb\u52a0\u751f\u6210\u968f\u673a\u9a8c\u8bc1\u7801\u6587\u672c\u7684\u51fd\u6570<\/p>\n
genCode() {\r\n  this.code = \"\";\r\n  var str = \"0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ\";\r\n  for(let i = 0;i < 4;i++){\r\n    let index = Math.floor(Math.random()*62);\r\n    this.code += str[index];\r\n  }\r\n},<\/pre>\n
\u5728template\u4e2d\u6dfb\u52a0\u8be5\u7ec4\u4ef6\u5e76\u4f20\u5165code\uff0c\u4e3a\u7ec4\u4ef6\u6dfb\u52a0\u70b9\u51fb\u4e8b\u4ef6\u5b9e\u73b0\u70b9\u51fb\u5237\u65b0<\/p>\n
<IdentifyCode :code=\"code\" @click=\"genCode()\"><\/IdentifyCode><\/pre>\n
\u8981\u5b9e\u73b0\u9875\u9762\u52a0\u8f7d\u51fa\u6765\u5c31\u968f\u673a\u751f\u6210\u4e00\u4e2a\u968f\u673a\u9a8c\u8bc1\u7801\u5b57\u7b26\u4e32\uff0c\u6211\u4eec\u8fd8\u9700\u8981\u4e3a\u751f\u547d\u5468\u671fmounted\u6dfb\u52a0genCode()<\/p>\n
mounted(){\r\n  this.genCode();\r\n}<\/pre>\n
\u8fd9\u4e2a\u65f6\u5019\u6211\u4eec\u4f1a\u53d1\u73b0\uff0c\u9a8c\u8bc1\u7801\u4e2d\u5e76\u6ca1\u6709\u6587\u672c\u751f\u6210\uff0c\u5176\u539f\u56e0\u662f\u5728mounted\u4e4b\u540ecode\u624d\u751f\u6210\uff0c\u800c\u8be5\u7ec4\u4ef6\u7684code\u65e9\u5728\u8fd9\u4e2a\u9636\u6bb5\u4e4b\u524d\u5c31\u4f20\u5165\u5e76\u4e14\u5728\u7ec4\u4ef6\u7684mounted\u4e2d\u8fdb\u884c\u4e86\u4e00\u6b21drawPic()\uff0c\u5bfc\u81f4\u540e\u7eedcode\u66f4\u65b0\u65f6\uff0c\u8be5\u9a8c\u8bc1\u7801\u4e0d\u4f1a\u53d1\u751f\u53d8\u5316\uff0c\u6240\u4ee5\u6211\u4eec\u9700\u8981\u5728\u7ec4\u4ef6\u4e2d\u6dfb\u52a0\u76d1\u542c\u4e8b\u4ef6\uff0c\u76d1\u542ccode\u662f\u5426\u53d1\u751f\u6539\u53d8\uff0c\u82e5\u6539\u53d8\u5219\u518d\u6b21\u6267\u884cdrawPic()\u3002<\/p>\n
watch: {\r\n  code() {\r\n    this.drawPic();\r\n  },\r\n},<\/pre>\n
\u7ec4\u4ef6\u4ee3\u7801\u4e00\u89c8<\/h1>\n
<template>\r\n  <canvas id=\"code-canvas\" :width=\"picWidth\" :height=\"picHeight\"><\/canvas>\r\n<\/template>\r\n\r\n<script>\r\nexport default {\r\n  name: \"IdentifyCode\",\r\n  props: {\r\n    code: {\r\n      type: String,\r\n      default: \"2244\",\r\n    },\r\n  },\r\n  data() {\r\n    return {\r\n      picWidth: 120,\r\n      picHeight: 35,\r\n    };\r\n  },\r\n  methods: {\r\n    getRandomVal(min, max) {\r\n      return Math.floor(Math.random() * (max - min) + min);\r\n    },\r\n    getRandomCol(min, max) {\r\n      var r = this.getRandomVal(min, max);\r\n      var g = this.getRandomVal(min, max);\r\n      var b = this.getRandomVal(min, max);\r\n      return \"rgb(\" + r + \",\" + g + \",\" + b + \")\";\r\n    },\r\n    drawPic() {\r\n      var canvas = document.getElementById(\"code-canvas\");\r\n      var context = canvas.getContext(\"2d\");\r\n      this.drawBackground(context);\r\n      this.drawText(context);\r\n      this.drawDot(context);\r\n      this.drawLines(context);\r\n    },\r\n    drawBackground(context) {\r\n      context.fillStyle = this.getRandomCol(180, 240);\r\n      context.fillRect(0, 0, this.picWidth, this.picHeight);\r\n    },\r\n    drawText(context) {\r\n      for (let i = 0; i < this.code.length; i++) {\r\n        context.fillStyle = this.getRandomCol(0, 180);\r\n        context.font = this.getRandomVal(20, 40) + \"px serif\";\r\n        let deg = this.getRandomVal(-20, 20);\r\n        let x = 20 * (i + 1);\r\n        let y = this.getRandomVal(25, 32);\r\n        context.translate(x, y);\r\n        context.rotate((Math.PI \/ 180) * deg);\r\n        context.fillText(this.code[i], 0, 0);\r\n        context.rotate(-(Math.PI \/ 180) * deg);\r\n        context.translate(-x, -y);\r\n      }\r\n    },\r\n    drawDot(context) {\r\n      for (let i = 0; i < 20; i++) {\r\n        context.fillStyle = this.getRandomCol(0, 255);\r\n        context.beginPath();\r\n        context.arc(\r\n          this.getRandomVal(0, this.picWidth),\r\n          this.getRandomVal(0, this.picHeight),\r\n          1,\r\n          0,\r\n          Math.PI * 2\r\n        );\r\n        context.fill();\r\n      }\r\n    },\r\n    drawLines(context) {\r\n      for (let i = 0; i < 2; i++) {\r\n        context.strokeStyle = this.getRandomCol(0, 155);\r\n        context.beginPath();\r\n        context.moveTo(\r\n          this.getRandomVal(0, this.picWidth),\r\n          this.getRandomVal(0, this.picHeight)\r\n        );\r\n        context.lineTo(\r\n          this.getRandomVal(0, this.picWidth),\r\n          this.getRandomVal(0, this.picHeight)\r\n        );\r\n        context.stroke();\r\n      }\r\n    },\r\n  },\r\n  watch: {\r\n    code() {\r\n      this.drawPic();\r\n    },\r\n  },\r\n  mounted() {\r\n    this.drawPic();\r\n  },\r\n};\r\n<\/script>\r\n<\/pre>\n
 <\/p>\n
 <\/p>\n","protected":false},"excerpt":{"rendered":"
\u524d\u671f\u51c6\u5907 Canvas \u6559\u7a0b – Web API | MDN (mozilla.org) \u4e86\u89e3Ca […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[17,36],"tags":[18,39,38],"class_list":["post-311","post","type-post","status-publish","format-standard","hentry","category-javascript","category-vue","tag-javascript","tag-vue","tag-web"],"yoast_head":"\nVue3\u4f7f\u7528\u7eaf\u524d\u7aef\u5b9e\u73b0\u56fe\u5f62\u9a8c\u8bc1\u7801 - It's MyGO<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/blog.itsmygo.cn\/?p=311\" \/>\n<meta property=\"og:locale\" content=\"zh_CN\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Vue3\u4f7f\u7528\u7eaf\u524d\u7aef\u5b9e\u73b0\u56fe\u5f62\u9a8c\u8bc1\u7801 - It's MyGO\" \/>\n<meta property=\"og:description\" content=\"\u524d\u671f\u51c6\u5907 Canvas \u6559\u7a0b – Web API | MDN (mozilla.org) \u4e86\u89e3Ca […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/blog.itsmygo.cn\/?p=311\" \/>\n<meta property=\"og:site_name\" content=\"It's MyGO\" \/>\n<meta property=\"article:published_time\" content=\"2024-06-28T11:25:07+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-06-28T11:27:51+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/new.funworld.cc\/wp-content\/uploads\/2024\/06\/48ad8297f506022edb123529c42c0644.png\" \/>\n<meta name=\"author\" content=\"MappyJ\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"\u4f5c\u8005\" \/>\n\t<meta name=\"twitter:data1\" content=\"MappyJ\" \/>\n\t<meta name=\"twitter:label2\" content=\"\u9884\u8ba1\u9605\u8bfb\u65f6\u95f4\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 \u5206\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/blog.itsmygo.cn\/?p=311#article\",\"isPartOf\":{\"@id\":\"https:\/\/blog.itsmygo.cn\/?p=311\"},\"author\":{\"name\":\"MappyJ\",\"@id\":\"https:\/\/blog.itsmygo.cn\/#\/schema\/person\/d3135ff7ba5bf47c42c71491a95cc647\"},\"headline\":\"Vue3\u4f7f\u7528\u7eaf\u524d\u7aef\u5b9e\u73b0\u56fe\u5f62\u9a8c\u8bc1\u7801\",\"datePublished\":\"2024-06-28T11:25:07+00:00\",\"dateModified\":\"2024-06-28T11:27:51+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/blog.itsmygo.cn\/?p=311\"},\"wordCount\":42,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/blog.itsmygo.cn\/#\/schema\/person\/d3135ff7ba5bf47c42c71491a95cc647\"},\"image\":{\"@id\":\"https:\/\/blog.itsmygo.cn\/?p=311#primaryimage\"},\"thumbnailUrl\":\"https:\/\/new.funworld.cc\/wp-content\/uploads\/2024\/06\/48ad8297f506022edb123529c42c0644.png\",\"keywords\":[\"Javascript\",\"Vue\",\"Web\"],\"articleSection\":[\"Javascript\",\"Vue\"],\"inLanguage\":\"zh-Hans\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/blog.itsmygo.cn\/?p=311#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/blog.itsmygo.cn\/?p=311\",\"url\":\"https:\/\/blog.itsmygo.cn\/?p=311\",\"name\":\"Vue3\u4f7f\u7528\u7eaf\u524d\u7aef\u5b9e\u73b0\u56fe\u5f62\u9a8c\u8bc1\u7801 - It's MyGO\",\"isPartOf\":{\"@id\":\"https:\/\/blog.itsmygo.cn\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/blog.itsmygo.cn\/?p=311#primaryimage\"},\"image\":{\"@id\":\"https:\/\/blog.itsmygo.cn\/?p=311#primaryimage\"},\"thumbnailUrl\":\"https:\/\/new.funworld.cc\/wp-content\/uploads\/2024\/06\/48ad8297f506022edb123529c42c0644.png\",\"datePublished\":\"2024-06-28T11:25:07+00:00\",\"dateModified\":\"2024-06-28T11:27:51+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/blog.itsmygo.cn\/?p=311#breadcrumb\"},\"inLanguage\":\"zh-Hans\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/blog.itsmygo.cn\/?p=311\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"zh-Hans\",\"@id\":\"https:\/\/blog.itsmygo.cn\/?p=311#primaryimage\",\"url\":\"https:\/\/new.funworld.cc\/wp-content\/uploads\/2024\/06\/48ad8297f506022edb123529c42c0644.png\",\"contentUrl\":\"https:\/\/new.funworld.cc\/wp-content\/uploads\/2024\/06\/48ad8297f506022edb123529c42c0644.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/blog.itsmygo.cn\/?p=311#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"\u9996\u9875\",\"item\":\"https:\/\/blog.itsmygo.cn\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Code\",\"item\":\"https:\/\/blog.itsmygo.cn\/?cat=8\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Javascript\",\"item\":\"https:\/\/blog.itsmygo.cn\/?cat=17\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"Vue3\u4f7f\u7528\u7eaf\u524d\u7aef\u5b9e\u73b0\u56fe\u5f62\u9a8c\u8bc1\u7801\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/blog.itsmygo.cn\/#website\",\"url\":\"https:\/\/blog.itsmygo.cn\/\",\"name\":\"It's MyGO\",\"description\":\"\u9690\u79d8\u7684\u89d2\u843d\uff01\",\"publisher\":{\"@id\":\"https:\/\/blog.itsmygo.cn\/#\/schema\/person\/d3135ff7ba5bf47c42c71491a95cc647\"},\"alternateName\":\"FunWorld\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/blog.itsmygo.cn\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"zh-Hans\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/blog.itsmygo.cn\/#\/schema\/person\/d3135ff7ba5bf47c42c71491a95cc647\",\"name\":\"MappyJ\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"zh-Hans\",\"@id\":\"https:\/\/blog.itsmygo.cn\/#\/schema\/person\/image\/\",\"url\":\"http:\/\/124.71.159.150\/wp-content\/uploads\/2023\/02\/cropped-illust_91523620_20220703_204209-e1676711718995.png\",\"contentUrl\":\"http:\/\/124.71.159.150\/wp-content\/uploads\/2023\/02\/cropped-illust_91523620_20220703_204209-e1676711718995.png\",\"width\":512,\"height\":512,\"caption\":\"MappyJ\"},\"logo\":{\"@id\":\"https:\/\/blog.itsmygo.cn\/#\/schema\/person\/image\/\"},\"description\":\"\u6478\u9c7c\uff01\u4e0d\u60dc\u4e00\u5207\u4ee3\u4ef7\u5730\u6478\u9c7c\uff01\",\"sameAs\":[\"http:\/\/124.71.159.150\"],\"url\":\"https:\/\/blog.itsmygo.cn\/?author=1\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Vue3\u4f7f\u7528\u7eaf\u524d\u7aef\u5b9e\u73b0\u56fe\u5f62\u9a8c\u8bc1\u7801 - It's MyGO","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/blog.itsmygo.cn\/?p=311","og_locale":"zh_CN","og_type":"article","og_title":"Vue3\u4f7f\u7528\u7eaf\u524d\u7aef\u5b9e\u73b0\u56fe\u5f62\u9a8c\u8bc1\u7801 - It's MyGO","og_description":"\u524d\u671f\u51c6\u5907 Canvas \u6559\u7a0b – Web API | MDN (mozilla.org) \u4e86\u89e3Ca […]","og_url":"https:\/\/blog.itsmygo.cn\/?p=311","og_site_name":"It's MyGO","article_published_time":"2024-06-28T11:25:07+00:00","article_modified_time":"2024-06-28T11:27:51+00:00","og_image":[{"url":"https:\/\/new.funworld.cc\/wp-content\/uploads\/2024\/06\/48ad8297f506022edb123529c42c0644.png"}],"author":"MappyJ","twitter_card":"summary_large_image","twitter_misc":{"\u4f5c\u8005":"MappyJ","\u9884\u8ba1\u9605\u8bfb\u65f6\u95f4":"1 \u5206"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/blog.itsmygo.cn\/?p=311#article","isPartOf":{"@id":"https:\/\/blog.itsmygo.cn\/?p=311"},"author":{"name":"MappyJ","@id":"https:\/\/blog.itsmygo.cn\/#\/schema\/person\/d3135ff7ba5bf47c42c71491a95cc647"},"headline":"Vue3\u4f7f\u7528\u7eaf\u524d\u7aef\u5b9e\u73b0\u56fe\u5f62\u9a8c\u8bc1\u7801","datePublished":"2024-06-28T11:25:07+00:00","dateModified":"2024-06-28T11:27:51+00:00","mainEntityOfPage":{"@id":"https:\/\/blog.itsmygo.cn\/?p=311"},"wordCount":42,"commentCount":0,"publisher":{"@id":"https:\/\/blog.itsmygo.cn\/#\/schema\/person\/d3135ff7ba5bf47c42c71491a95cc647"},"image":{"@id":"https:\/\/blog.itsmygo.cn\/?p=311#primaryimage"},"thumbnailUrl":"https:\/\/new.funworld.cc\/wp-content\/uploads\/2024\/06\/48ad8297f506022edb123529c42c0644.png","keywords":["Javascript","Vue","Web"],"articleSection":["Javascript","Vue"],"inLanguage":"zh-Hans","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/blog.itsmygo.cn\/?p=311#respond"]}]},{"@type":"WebPage","@id":"https:\/\/blog.itsmygo.cn\/?p=311","url":"https:\/\/blog.itsmygo.cn\/?p=311","name":"Vue3\u4f7f\u7528\u7eaf\u524d\u7aef\u5b9e\u73b0\u56fe\u5f62\u9a8c\u8bc1\u7801 - It's MyGO","isPartOf":{"@id":"https:\/\/blog.itsmygo.cn\/#website"},"primaryImageOfPage":{"@id":"https:\/\/blog.itsmygo.cn\/?p=311#primaryimage"},"image":{"@id":"https:\/\/blog.itsmygo.cn\/?p=311#primaryimage"},"thumbnailUrl":"https:\/\/new.funworld.cc\/wp-content\/uploads\/2024\/06\/48ad8297f506022edb123529c42c0644.png","datePublished":"2024-06-28T11:25:07+00:00","dateModified":"2024-06-28T11:27:51+00:00","breadcrumb":{"@id":"https:\/\/blog.itsmygo.cn\/?p=311#breadcrumb"},"inLanguage":"zh-Hans","potentialAction":[{"@type":"ReadAction","target":["https:\/\/blog.itsmygo.cn\/?p=311"]}]},{"@type":"ImageObject","inLanguage":"zh-Hans","@id":"https:\/\/blog.itsmygo.cn\/?p=311#primaryimage","url":"https:\/\/new.funworld.cc\/wp-content\/uploads\/2024\/06\/48ad8297f506022edb123529c42c0644.png","contentUrl":"https:\/\/new.funworld.cc\/wp-content\/uploads\/2024\/06\/48ad8297f506022edb123529c42c0644.png"},{"@type":"BreadcrumbList","@id":"https:\/\/blog.itsmygo.cn\/?p=311#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"\u9996\u9875","item":"https:\/\/blog.itsmygo.cn\/"},{"@type":"ListItem","position":2,"name":"Code","item":"https:\/\/blog.itsmygo.cn\/?cat=8"},{"@type":"ListItem","position":3,"name":"Javascript","item":"https:\/\/blog.itsmygo.cn\/?cat=17"},{"@type":"ListItem","position":4,"name":"Vue3\u4f7f\u7528\u7eaf\u524d\u7aef\u5b9e\u73b0\u56fe\u5f62\u9a8c\u8bc1\u7801"}]},{"@type":"WebSite","@id":"https:\/\/blog.itsmygo.cn\/#website","url":"https:\/\/blog.itsmygo.cn\/","name":"It's MyGO","description":"\u9690\u79d8\u7684\u89d2\u843d\uff01","publisher":{"@id":"https:\/\/blog.itsmygo.cn\/#\/schema\/person\/d3135ff7ba5bf47c42c71491a95cc647"},"alternateName":"FunWorld","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/blog.itsmygo.cn\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"zh-Hans"},{"@type":["Person","Organization"],"@id":"https:\/\/blog.itsmygo.cn\/#\/schema\/person\/d3135ff7ba5bf47c42c71491a95cc647","name":"MappyJ","image":{"@type":"ImageObject","inLanguage":"zh-Hans","@id":"https:\/\/blog.itsmygo.cn\/#\/schema\/person\/image\/","url":"http:\/\/124.71.159.150\/wp-content\/uploads\/2023\/02\/cropped-illust_91523620_20220703_204209-e1676711718995.png","contentUrl":"http:\/\/124.71.159.150\/wp-content\/uploads\/2023\/02\/cropped-illust_91523620_20220703_204209-e1676711718995.png","width":512,"height":512,"caption":"MappyJ"},"logo":{"@id":"https:\/\/blog.itsmygo.cn\/#\/schema\/person\/image\/"},"description":"\u6478\u9c7c\uff01\u4e0d\u60dc\u4e00\u5207\u4ee3\u4ef7\u5730\u6478\u9c7c\uff01","sameAs":["http:\/\/124.71.159.150"],"url":"https:\/\/blog.itsmygo.cn\/?author=1"}]}},"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","jetpack-related-posts":[],"jetpack_shortlink":"https:\/\/wp.me\/peKGUV-51","_links":{"self":[{"href":"https:\/\/blog.itsmygo.cn\/index.php?rest_route=\/wp\/v2\/posts\/311","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.itsmygo.cn\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.itsmygo.cn\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.itsmygo.cn\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.itsmygo.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=311"}],"version-history":[{"count":8,"href":"https:\/\/blog.itsmygo.cn\/index.php?rest_route=\/wp\/v2\/posts\/311\/revisions"}],"predecessor-version":[{"id":323,"href":"https:\/\/blog.itsmygo.cn\/index.php?rest_route=\/wp\/v2\/posts\/311\/revisions\/323"}],"wp:attachment":[{"href":"https:\/\/blog.itsmygo.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=311"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.itsmygo.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=311"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.itsmygo.cn\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=311"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}