{"id":185777,"date":"2023-08-14T22:46:09","date_gmt":"2023-08-14T14:46:09","guid":{"rendered":"http:\/\/www.idc.net\/help\/185777\/"},"modified":"2023-08-14T22:46:09","modified_gmt":"2023-08-14T14:46:09","slug":"%e5%90%8e%e6%b5%aa%e4%ba%91%e5%b0%8f%e7%a8%8b%e5%ba%8f%e6%95%99%e7%a8%8b%ef%bc%9a%e5%be%ae%e4%bf%a1%e5%b0%8f%e7%a8%8b%e5%ba%8f-%e7%94%bb%e5%b8%83","status":"publish","type":"post","link":"https:\/\/idc.net\/help\/185777\/","title":{"rendered":"\u540e\u6d6a\u4e91\u5c0f\u7a0b\u5e8f\u6559\u7a0b\uff1a\u5fae\u4fe1\u5c0f\u7a0b\u5e8f \u753b\u5e03"},"content":{"rendered":"

Canvas \u753b\u5e03<\/h2>\n

\u6240\u6709\u5728 canvas \u4e2d\u7684\u753b\u56fe\u5fc5\u987b\u7528 JavaScript \u5b8c\u6210\uff1a<\/p>\n

WXML\uff1a\uff08\u6211\u4eec\u5728\u63a5\u4e0b\u6765\u7684\u4f8b\u5b50\u4e2d\u5982\u65e0\u7279\u6b8a\u58f0\u660e\u90fd\u4f1a\u7528\u8fd9\u4e2a WXML \u4e3a\u6a21\u677f\uff0c\u4e0d\u518d\u91cd\u590d\uff09<\/p>\n

<canvas canvas-id=\"myCanvas\" style=\"border: 1px solid;\"\/>\n<\/code><\/pre>\n
JS\uff1a\uff08\u6211\u4eec\u5728\u63a5\u4e0b\u6765\u7684\u4f8b\u5b50\u4e2d\u4f1a\u5c06 JS \u653e\u5728 onReady \u4e2d\uff09<\/p>\n
const ctx = wx.createCanvasContext('myCanvas')\nctx.setFillStyle('red')\nctx.fillRect(10, 10, 150, 75)\nctx.draw()\n<\/code><\/pre>\n
\u7b2c\u4e00\u6b65\uff1a\u521b\u5efa\u4e00\u4e2a Canvas \u7ed8\u56fe\u4e0a\u4e0b\u6587<\/p>\n
\u9996\u5148\uff0c\u6211\u4eec\u9700\u8981\u521b\u5efa\u4e00\u4e2a Canvas \u7ed8\u56fe\u4e0a\u4e0b\u6587 CanvasContext\u3002<\/p>\n
CanvasContext \u662f\u5c0f\u7a0b\u5e8f\u5185\u5efa\u7684\u4e00\u4e2a\u5bf9\u8c61\uff0c\u6709\u4e00\u4e9b\u7ed8\u56fe\u7684\u65b9\u6cd5\uff1a<\/p>\n
const ctx = wx.createCanvasContext('myCanvas')\n<\/code><\/pre>\n
\u7b2c\u4e8c\u6b65\uff1a\u4f7f\u7528 Canvas \u7ed8\u56fe\u4e0a\u4e0b\u6587\u8fdb\u884c\u7ed8\u56fe\u63cf\u8ff0<\/p>\n
\u63a5\u7740\uff0c\u6211\u4eec\u6765\u63cf\u8ff0\u8981\u5728 Canvas \u4e2d\u7ed8\u5236\u4ec0\u4e48\u5185\u5bb9\u3002<\/p>\n
\u8bbe\u7f6e\u7ed8\u56fe\u4e0a\u4e0b\u6587\u7684\u586b\u5145\u8272\u4e3a\u7ea2\u8272\uff1a<\/p>\n
ctx.setFillStyle('red')\n<\/code><\/pre>\n
\u7528 fillRect(x, y, width, height) \u65b9\u6cd5\u753b\u4e00\u4e2a\u77e9\u5f62\uff0c\u586b\u5145\u4e3a\u521a\u521a\u8bbe\u7f6e\u7684\u7ea2\u8272\uff1a<\/p>\n
ctx.fillRect(10, 10, 150, 75)\n<\/code><\/pre>\n
\u7b2c\u4e09\u6b65\uff1a\u753b\u56fe<\/p>\n
\u544a\u8bc9 canvas \u7ec4\u4ef6\u4f60\u8981\u5c06\u521a\u521a\u7684\u63cf\u8ff0\u7ed8\u5236\u4e0a\u53bb\uff1a<\/p>\n
ctx.draw()\n<\/code><\/pre>\n
\u7ed3\u679c\uff1a<\/p>\n<\/p>\n
\u5750\u6807\u7cfb<\/h2>\n
canvas \u662f\u5728\u4e00\u4e2a\u4e8c\u7ef4\u7684\u7f51\u683c\u5f53\u4e2d\u3002\u5de6\u4e0a\u89d2\u7684\u5750\u6807\u4e3a(0, 0)\u3002<\/p>\n
\u5728\u4e0a\u4e00\u8282\uff0c\u6211\u4eec\u7528\u4e86\u8fd9\u4e2a\u65b9\u6cd5 fillRect(0, 0, 150, 75)\u3002<\/p>\n
\u5b83\u7684\u542b\u4e49\u4e3a\uff1a\u4ece\u5de6\u4e0a\u89d2(0, 0)\u5f00\u59cb\uff0c\u753b\u4e00\u4e2a150 x 75px \u7684\u77e9\u5f62\u3002<\/p>\n
\u4ee3\u7801\u793a\u4f8b<\/p>\n
\u6211\u4eec\u53ef\u4ee5\u5728 canvas \u4e2d\u52a0\u4e0a\u4e00\u4e9b\u4e8b\u4ef6\uff0c\u6765\u89c2\u6d4b\u5b83\u7684\u5750\u6807\u7cfb<\/p>\n
<canvas canvas-id=\"myCanvas\"\n  style=\"margin: 5px; border:1px solid #d3d3d3;\"\n  bindtouchstart=\"start\"\n  bindtouchmove=\"move\"\n  bindtouchend=\"end\"\/>\n\n<view hidden=\"{{hidden}}\">\n  Coordinates: ({{x}}, {{y}})\n<\/view>\n<\/code><\/pre>\n
Page({\n  data: {\n    x: 0,\n    y: 0,\n    hidden: true\n  },\n  start (e) {\n    this.setData({\n      hidden: false,\n      x: e.touches[0].x,\n      y: e.touches[0].y\n    })\n  },\n  move (e) {\n    this.setData({\n      x: e.touches[0].x,\n      y: e.touches[0].y\n    })\n  },\n  end (e) {\n    this.setData({\n      hidden: true\n    })\n  }\n})\n<\/code><\/pre>\n
\u5f53\u4f60\u628a\u624b\u6307\u653e\u5230 canvas \u4e2d\uff0c\u5c31\u4f1a\u5728\u4e0b\u8fb9\u663e\u793a\u51fa\u89e6\u78b0\u70b9\u7684\u5750\u6807\uff1a<\/p>\n<\/p>\n
\u6e10\u53d8<\/h2>\n
\u6e10\u53d8\u80fd\u7528\u4e8e\u586b\u5145\u4e00\u4e2a\u77e9\u5f62\uff0c\u5706\uff0c\u7ebf\uff0c\u6587\u5b57\u7b49\u3002\u586b\u5145\u8272\u53ef\u4ee5\u4e0d\u56fa\u5b9a\u4e3a\u56fa\u5b9a\u7684\u4e00\u79cd\u989c\u8272\u3002<\/p>\n
\u6211\u4eec\u63d0\u4f9b\u4e86\u4e24\u79cd\u989c\u8272\u6e10\u53d8\u7684\u65b9\u5f0f\uff1a<\/p>\n
    \n
  • createLinearGradient(x, y, x1, y1) \u521b\u5efa\u4e00\u4e2a\u7ebf\u6027\u7684\u6e10\u53d8<\/li>\n
  • createCircularGradient(x, y, r) \u521b\u5efa\u4e00\u4e2a\u4ece\u5706\u5fc3\u5f00\u59cb\u7684\u6e10\u53d8<\/li>\n<\/ul>\n
    \u4e00\u65e6\u6211\u4eec\u521b\u5efa\u4e86\u4e00\u4e2a\u6e10\u53d8\u5bf9\u8c61\uff0c\u6211\u4eec\u5fc5\u987b\u6dfb\u52a0\u4e24\u4e2a\u989c\u8272\u6e10\u53d8\u70b9\u3002<\/p>\n
    addColorStop(position, color) \u65b9\u6cd5\u7528\u4e8e\u6307\u5b9a\u989c\u8272\u6e10\u53d8\u70b9\u7684\u4f4d\u7f6e\u548c\u989c\u8272\uff0c\u4f4d\u7f6e\u5fc5\u987b\u4f4d\u4e8e0\u52301\u4e4b\u95f4\u3002<\/p>\n
    \u53ef\u4ee5\u7528setFillStyle \u548c setStrokeStyle \u65b9\u6cd5\u8bbe\u7f6e\u6e10\u53d8\uff0c\u7136\u540e\u8fdb\u884c\u753b\u56fe\u63cf\u8ff0\u3002<\/p>\n
    \u4f7f\u7528 createLinearGradient()<\/p>\n
    const ctx = wx.createCanvasContext('myCanvas')\n\n\/\/ Create linear gradient\nconst grd = ctx.createLinearGradient(0, 0, 200, 0)\ngrd.addColorStop(0, 'red')\ngrd.addColorStop(1, 'white')\n\n\/\/ Fill with gradient\nctx.setFillStyle(grd)\nctx.fillRect(10, 10, 150, 80)\nctx.draw()\n<\/code><\/pre>\n<\/p>\n
    \u4f7f\u7528 createCircularGradient()<\/p>\n
    const ctx = wx.createCanvasContext('myCanvas')\n\n\/\/ Create circular gradient\nconst grd = ctx.createCircularGradient(75, 50, 50)\ngrd.addColorStop(0, 'red')\ngrd.addColorStop(1, 'white')\n\n\/\/ Fill with gradient\nctx.setFillStyle(grd)\nctx.fillRect(10, 10, 150, 80)\nctx.draw()\n<\/code><\/pre>\n<\/p>\n
    <\/p>\n","protected":false},"excerpt":{"rendered":"
    Canvas \u753b\u5e03 \u6240\u6709\u5728 canvas \u4e2d\u7684\u753b\u56fe\u5fc5\u987b\u7528 JavaScript \u5b8c\u6210\uff1a W […]<\/p>\n","protected":false},"author":1,"featured_media":185778,"comment_status":"closed","ping_status":"","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[182398],"tags":[],"class_list":["post-185777","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-mini-program"],"_links":{"self":[{"href":"https:\/\/idc.net\/help\/wp-json\/wp\/v2\/posts\/185777","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/idc.net\/help\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/idc.net\/help\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/idc.net\/help\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/idc.net\/help\/wp-json\/wp\/v2\/comments?post=185777"}],"version-history":[{"count":0,"href":"https:\/\/idc.net\/help\/wp-json\/wp\/v2\/posts\/185777\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/idc.net\/help\/wp-json\/wp\/v2\/media\/185778"}],"wp:attachment":[{"href":"https:\/\/idc.net\/help\/wp-json\/wp\/v2\/media?parent=185777"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/idc.net\/help\/wp-json\/wp\/v2\/categories?post=185777"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/idc.net\/help\/wp-json\/wp\/v2\/tags?post=185777"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}