{"id":8641,"date":"2021-11-26T09:04:37","date_gmt":"2021-11-26T01:04:37","guid":{"rendered":"https:\/\/sdeno.com\/?p=8641"},"modified":"2021-11-26T09:17:20","modified_gmt":"2021-11-26T01:17:20","slug":"canvas%e6%8f%92%e4%bb%b6fabric-js","status":"publish","type":"post","link":"https:\/\/sdeno.com\/?p=8641","title":{"rendered":"canvas\u63d2\u4ef6fabric.js"},"content":{"rendered":"

Fabric.js \u662f\u4e00\u4e2a\u5f3a\u5927\u800c\u7b80\u5355\u7684 Javascript HTML5 \u753b\u5e03\u5e93 Fabric \u5728\u753b\u5e03\u5143\u7d20\u4e4b\u4e0a\u63d0\u4f9b\u4ea4\u4e92\u5f0f\u5bf9\u8c61\u6a21\u578b Fabric \u8fd8\u5177\u6709 SVG-to-canvas\uff08\u548c canvas-to-SVG\uff09\u89e3\u6790\u5668<\/p>\n

<\/div>
<\/div><\/div><\/div>\"https:\/\/sdeno.com\/wp-content\/uploads\/2021\/11\/can17.png\"<\/figure>\n

 <\/p>\n

\u4e00\u3001\u5b89\u88c5<\/p>\n

yarn add fabric -S\r\n#or\r\nnpm i fabric -S<\/pre>\n
\u4e5f\u53ef\u4ee5\u5728 \u5b98\u7f51 \u4e0b\u8f7d\u6700\u65b0 js \u6587\u4ef6,\u901a\u8fc7 script \u6807\u7b7e\u5f15\u5165<\/p>\n
 <\/p>\n
\u4e8c\u3001\u4f7f\u7528<\/p>\n
<!-- html -->\r\n<canvas id=\"canvas\" width=\"500\" height=\"500\"><\/canvas><\/pre>\n
2.1 \u7ed8\u5236\u4e00\u4e2a\u7b80\u5355\u7684\u56fe\u5f62<\/p>\n
Fabric \u63d0\u4f9b\u4e86 7 \u79cd\u57fa\u7840\u5f62\u72b6\uff1a<\/p>\n
fabric.Circle (\u5706)<\/p>\n
fabric.Ellipse (\u692d\u5706)<\/p>\n
fabric.Line (\u7ebf)<\/p>\n
fabric.Polyline (\u591a\u6761\u7ebf\u7ed8\u5236\u6210\u56fe\u5f62)<\/p>\n
fabric.triangle (\u4e09\u89d2\u5f62)<\/p>\n
fabric.Rect (\u77e9\u5f62)<\/p>\n
fabric.Polygon (\u591a\u8fb9\u5f62)<\/p>\n
\u77e9\u5f62<\/p>\n
\/\/ js\r\n\r\n\/\/\u5f15\u5165fabric\r\nimport { fabric } from \"fabric\";\r\n\r\n\/\/ \u521b\u5efa\u4e00\u4e2afabric\u5b9e\u4f8b\r\nlet canvas = new fabric.Canvas(\"canvas\"); \/\/\u53ef\u4ee5\u901a\u8fc7\u9f20\u6807\u65b9\u6cd5\u7f29\u5c0f,\u65cb\u8f6c\r\n\/\/ or\r\n\/\/ let canvas = new fabric.StaticCanvas(\"canvas\");\/\/\u6ca1\u6709\u9f20\u6807\u4ea4\u4e92\u7684fabric\u5bf9\u8c61\r\n\r\n\/\/ \u521b\u5efa\u4e00\u4e2a\u77e9\u5f62\u5bf9\u8c61\r\nlet rect = new fabric.Rect({\r\n  left: 200, \/\/\u8ddd\u79bb\u5de6\u8fb9\u7684\u8ddd\u79bb\r\n  top: 200, \/\/\u8ddd\u79bb\u4e0a\u8fb9\u7684\u8ddd\u79bb\r\n  fill: \"green\", \/\/\u586b\u5145\u7684\u989c\u8272\r\n  width: 200, \/\/\u77e9\u5f62\u5bbd\u5ea6\r\n  height: 200, \/\/\u77e9\u5f62\u9ad8\u5ea6\r\n});\r\n\r\n\/\/ \u5c06\u77e9\u5f62\u6dfb\u52a0\u5230canvas\u753b\u5e03\u4e0a\r\ncanvas.add(rect);<\/pre>\n
\u53ef\u4ee5\u770b\u5230\u754c\u9762\u4e2d\u586b\u5145\u4e86\u4e00\u4e2a\u53ef\u4ee5\u901a\u8fc7\u9f20\u6807\u653e\u5927\u7f29\u5c0f\u4e14\u53ef\u4ee5\u65cb\u8f6c\u7684\u7eff\u8272\u77e9\u5f62
\n\u901a\u8fc7\u5bf9\u8c61\u7684\u5f62\u5f0f\u914d\u7f6e\u5143\u7d20\u6837\u5f0f,\u975e\u5e38\u7684\u65b9\u4fbf!<\/p>\n
<\/div>
<\/div><\/div><\/div>\"https:\/\/sdeno.com\/wp-content\/uploads\/2021\/11\/can1.jpg\"<\/figure>\n
\u5706\u5f62\u548c\u4e09\u89d2\u5f62<\/p>\n
\/\/ \u521b\u5efa\u4e00\u4e2a\u5706\u5f62\u5bf9\u8c61\r\nlet circle = new fabric.Circle({\r\n  left: 0, \/\/\u8ddd\u79bb\u5de6\u8fb9\u7684\u8ddd\u79bb\r\n  top: 0, \/\/\u8ddd\u79bb\u4e0a\u8fb9\u7684\u8ddd\u79bb\r\n  fill: \"red\", \/\/\u586b\u5145\u7684\u989c\u8272\r\n  radius: 50, \/\/\u5706\u7684\u534a\u5f84\r\n});\r\n\/\/ \u521b\u5efa\u4e00\u4e2a\u4e09\u89d2\u5f62\u5bf9\u8c61\r\nlet triangle = new fabric.Triangle({\r\n  left: 200, \/\/\u8ddd\u79bb\u5de6\u8fb9\u7684\u8ddd\u79bb\r\n  top: 0, \/\/\u8ddd\u79bb\u4e0a\u8fb9\u7684\u8ddd\u79bb\r\n  fill: \"blue\", \/\/\u586b\u5145\u7684\u989c\u8272\r\n  width: 100, \/\/\u5bbd\u5ea6\r\n  height: 100, \/\/\u9ad8\u5ea6\r\n});\r\n\/\/ \u5c06\u56fe\u5f62\u5f62\u6dfb\u52a0\u5230canvas\u753b\u5e03\u4e0a\r\ncanvas.add(circle, triangle);<\/pre>\n
<\/div>
<\/div><\/div><\/div>\"https:\/\/sdeno.com\/wp-content\/uploads\/2021\/11\/can2.gif\"<\/figure>\n
\u6211\u4eec\u53ef\u4ee5\u901a\u8fc7\u4ee5\u4e0b\u5c5e\u6027\u8bbe\u7f6e,\u51b3\u5b9a\u662f\u5426\u53ef\u4ee5\u5bf9\u76f8\u5173\u5143\u7d20\u8fdb\u884c\u4ea4\u4e92<\/p>\n
canvas.selection = false; \/\/ \u7981\u6b62\u6240\u6709\u9009\u4e2d\r\nrect.set(\"selectable\", false); \/\/ \u53ea\u662f\u7981\u6b62\u8fd9\u4e2a\u77e9\u5f62\u9009\u4e2d<\/pre>\n
 <\/p>\n
2.2 \u7ed8\u5236\u56fe\u7247<\/p>\n
\u4e3b\u8981\u6709\u901a\u8fc7 url \u548c img \u6807\u7b7e\u7ed8\u5236\u4e24\u79cd\u65b9\u5f0f<\/p>\n
\/\/\u901a\u8fc7url\u7ed8\u5236\u56fe\u7247\r\nfabric.Image.fromURL(\r\n  \/\/\u672c\u5730\u56fe\u7247\u9700\u8981\u901a\u8fc7require\u6765\u5f15\u5165,require(\".\/xxx.jpeg\")\r\n  \"https:\/\/gimg2.baidu.com\/image_search\/src=http%3A%2F%2Fimg.thaihot.com.cn%2Fuploadimg%2Fico%2F2021%2F0711%2F1625982535739193.jpg&refer=http%3A%2F%2Fimg.thaihot.com.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1630940858&t=e1d24ff0a7eaeea2ff89cedf656a9374\",\r\n  (img) => {\r\n    img.scale(0.5);\r\n    canvas.add(img);\r\n  }\r\n);\r\n\/\/\u4e5f\u53ef\u4ee5\u901a\u8fc7\u6807\u7b7e\u7ed8\u5236\r\nlet img = document.getElementById(\"img\");\r\nlet image = new fabric.Image(img, {\r\n  left: 100,\r\n  top: 100,\r\n  opacity: 0.8,\r\n});\r\ncanvas.add(image);<\/pre>\n
<\/div>
<\/div><\/div><\/div>\"https:\/\/sdeno.com\/wp-content\/uploads\/2021\/11\/can3.jpg\"<\/figure>\n
 <\/p>\n
2.3 \u901a\u8fc7\u81ea\u5b9a\u4e49\u7684\u8def\u5f84\u7ed8\u5236<\/p>\n
\u5728\u6b64\u4e4b\u524d\u6211\u4eec\u9700\u8981\u4e86\u89e3\u51e0\u4e2a\u53c2\u6570\u7684\u542b\u4e49<\/p>\n
    \n
  • \n
    M : \u201cmove\u201d\u79fb\u52a8\u5230\u67d0\u70b9<\/section>\n<\/li>\n
  • \n
    L : \u201cline\u201d\u753b\u7ebf x,y<\/section>\n<\/li>\n
  • \n
    C : \u201ccurve\u201d\u66f2\u7ebf<\/section>\n<\/li>\n
  • \n
    A : \u201carc\u201d\u5f27<\/section>\n<\/li>\n
  • \n
    z : \u95ed\u5408\u8def\u5f84(\u7c7b\u4f3c PS \u4e2d\u7684\u521b\u5efa\u9009\u533a)<\/section>\n<\/li>\n<\/ul>\n
    let customPath = new fabric.Path(\"M 0 0 L 300 100 L 170 100  z\");\r\ncustomPath.set({\r\n  left: 100,\r\n  top: 100,\r\n  fill: \"green\",\r\n});\r\ncanvas.add(customPath);<\/pre>\n
    <\/div>
    <\/div><\/div><\/div>\"https:\/\/sdeno.com\/wp-content\/uploads\/2021\/11\/can4.jpg\"<\/figure>\n
    let customPath = new fabric.Path(\r\n  \"M 0 0 L 300 100 L 170 100 L 70 300 L 20 200 C136.19,2.98,128.98,0,121.32,0 z\"\r\n);<\/pre>\n
    <\/div>
    <\/div><\/div><\/div>\"https:\/\/sdeno.com\/wp-content\/uploads\/2021\/11\/can5.jpg\"<\/figure>\n
    \u53ef\u4ee5\u770b\u5230\u901a\u8fc7\u8def\u5f84\u7ed8\u5236,\u6211\u4eec\u53ef\u4ee5\u5236\u4f5c\u975e\u5e38\u590d\u6742\u7684\u56fe\u5f62(\u4f46\u662f\u4e00\u822c\u7528\u4e0d\u5230,\u6211\u4eec\u4e00\u822c\u7528\u5b83\u6765\u89e3\u6790 SVG \u540e\u62ff\u5230 path \u590d\u539f\u56fe\u5f62)<\/p>\n
     <\/p>\n
    \u52a8\u753b<\/strong><\/span><\/p>\n
    \u7b2c\u4e00\u4e2a\u53c2\u6570\u662f\u52a8\u753b\u7684\u5c5e\u6027\uff0c\u7b2c\u4e8c\u4e2a\u53c2\u6570\u662f\u52a8\u753b\u7684\u6700\u7ec8\u4f4d\u7f6e\uff0c\u7b2c\u4e09\u4e2a\u53c2\u6570\u662f\u4e00\u4e2a\u53ef\u9009\u7684\u5bf9\u8c61\uff0c\u6307\u5b9a\u52a8\u753b\u7684\u7ec6\u8282\uff1a\u6301\u7eed\u65f6\u95f4\uff0c\u56de\u8c03\uff0c\u52a8\u6548\u7b49\u3002<\/p>\n
    \u7b2c\u4e09\u4e2a\u53c2\u6570\u4e3b\u8981\u6709<\/pre>\n
      \n
    • \n
      duration \u9ed8\u8ba4\u4e3a 500ms\u3002\u53ef\u4ee5\u7528\u6765\u6539\u53d8\u52a8\u753b\u7684\u6301\u7eed\u65f6\u95f4\u3002<\/section>\n<\/li>\n
    • \n
      from \u5141\u8bb8\u6307\u5b9a\u52a8\u753b\u5c5e\u6027\u7684\u8d77\u59cb\u503c\uff08\u5982\u679c\u6211\u4eec\u4e0d\u5e0c\u671b\u4f7f\u7528\u5f53\u524d\u503c\uff09\u3002<\/section>\n<\/li>\n
    • \n
      onComplete \u52a8\u753b\u7ed3\u675f\u4e4b\u540e\u7684\u56de\u8c03\u3002<\/section>\n<\/li>\n
    • \n
      easing \u52a8\u6548\u51fd\u6570\u3002<\/section>\n<\/li>\n<\/ul>\n
       <\/p>\n
      \u7edd\u5bf9\u52a8\u753b<\/p>\n
      let canvas = new fabric.Canvas(\"canvas\");\r\nlet rect = new fabric.Rect({\r\n  left: 400, \/\/\u8ddd\u79bb\u5de6\u8fb9\u7684\u8ddd\u79bb\r\n  top: 200, \/\/\u8ddd\u79bb\u4e0a\u8fb9\u7684\u8ddd\u79bb\r\n  fill: \"green\", \/\/\u586b\u5145\u7684\u989c\u8272\r\n  width: 200, \/\/\u5bbd\u5ea6\r\n  height: 200, \/\/\u9ad8\u5ea6\r\n});\r\nrect.animate(\"left\", 100, {\r\n  onChange: canvas.renderAll.bind(canvas),\r\n  duration: 1000,\r\n});\r\ncanvas.add(rect);<\/pre>\n
      <\/div>
      <\/div><\/div><\/div>\"https:\/\/sdeno.com\/wp-content\/uploads\/2021\/11\/can6.gif\"<\/figure>\n
      \u76f8\u5bf9\u52a8\u753b(\u7b2c\u4e8c\u4e2a\u53c2\u6570\u901a\u8fc7+=,-=\u7b49\u6765\u51b3\u5b9a\u52a8\u753b\u7684\u6700\u7ec8\u6548\u679c)<\/strong><\/h3>\n
      rect.animate(\"left\", \"+=100\", {\r\n  onChange: canvas.renderAll.bind(canvas),\r\n  duration: 1000,\r\n});<\/pre>\n
      <\/div>
      <\/div><\/div><\/div>\"https:\/\/sdeno.com\/wp-content\/uploads\/2021\/11\/can7.gif\"<\/figure>\n
      rect.set({ angle: 45 });\r\nrect.animate(\"angle\", \"-=90\", {\r\n  onChange: canvas.renderAll.bind(canvas),\r\n  duration: 2000,\r\n});<\/pre>\n
      <\/div>
      <\/div><\/div><\/div>\"https:\/\/sdeno.com\/wp-content\/uploads\/2021\/11\/can8.gif\"<\/figure>\n
       <\/p>\n
      \u5b9a\u4e49\u52a8\u753b\u7684\u52a8\u6548\u51fd\u6570<\/strong><\/h3>\n
      \u9ed8\u8ba4\u60c5\u51b5\u4e0b\uff0c\u52a8\u753b\u4f7f\u7528\u201ceaseInSine\u201d\u52a8\u6548\u6267\u884c\u3002\u5982\u679c\u8fd9\u4e0d\u662f\u4f60\u9700\u8981\u7684\uff0cfabric \u4e3a\u6211\u4eec\u63d0\u4f9b\u4e86\u5f88\u591a\u5185\u7f6e\u52a8\u753b\u6548\u679c, fabric.util.ease \u4e0b\u6709\u4e00\u5927\u5806\u52a8\u6548\u7684\u9009\u9879\u3002
      \n\u5e38\u7528\u7684\u6709easeOutBounce,easeInCubic\uff0ceaseOutCubic\uff0ceaseInElastic\uff0ceaseOutElastic\uff0ceaseInBounce \u548c easeOutExpo\u7b49<\/p>\n
      rect.animate(\"left\", 100, {\r\n  onChange: canvas.renderAll.bind(canvas),\r\n  duration: 1000,\r\n  easing: fabric.util.ease.easeOutBounce,\r\n});<\/pre>\n
      <\/div>
      <\/div><\/div><\/div>\"https:\/\/sdeno.com\/wp-content\/uploads\/2021\/11\/can9.gif\"<\/figure>\n
       <\/p>\n
      \u56fe\u50cf\u6ee4\u955c<\/strong><\/h3>\n
      \u76ee\u524d Fabric \u4e3a\u6211\u4eec\u63d0\u4f9b\u4e86\u4ee5\u4e0b\u5185\u7f6e\u6ee4\u955c<\/p>\n
        \n
      • \n
        BaseFilter \u57fa\u672c\u8fc7\u6ee4\u5668<\/section>\n<\/li>\n
      • \n
        Blur \u6a21\u7cca<\/section>\n<\/li>\n
      • \n
        Brightness \u4eae\u5ea6<\/section>\n<\/li>\n
      • \n
        ColorMatrix \u989c\u8272\u77e9\u9635<\/section>\n<\/li>\n
      • \n
        Contrast \u5bf9\u6bd4<\/section>\n<\/li>\n
      • \n
        Convolute \u5377\u79ef<\/section>\n<\/li>\n
      • \n
        Gamma \u4f3d\u739b<\/section>\n<\/li>\n
      • \n
        Grayscale \u7070\u5ea6<\/section>\n<\/li>\n
      • \n
        HueRotation \u8272\u8c03\u65cb\u8f6c<\/section>\n<\/li>\n
      • \n
        Invert \u5012\u7f6e<\/section>\n<\/li>\n
      • \n
        Noise \u566a\u97f3<\/section>\n<\/li>\n
      • \n
        Pixelate \u50cf\u7d20\u5316<\/section>\n<\/li>\n
      • \n
        RemoveColor \u79fb\u9664\u989c\u8272<\/section>\n<\/li>\n
      • \n
        Resize \u8c03\u6574\u5927\u5c0f<\/section>\n<\/li>\n
      • \n
        Saturation \u9971\u548c<\/section>\n<\/li>\n<\/ul>\n
         <\/p>\n
        \u5355\u4e2a\u6ee4\u955c<\/strong><\/h3>\n
        fabric.Image.fromURL(require(\".\/aaa.jpeg\"), (img) => {\r\n  img.scale(0.5);\r\n  canvas.add(img);\r\n});\r\nfabric.Image.fromURL(require(\".\/aaa.jpeg\"), (img) => {\r\n  img.scale(0.5);\r\n  \/\/ \u6dfb\u52a0\u6ee4\u955c\r\n  img.filters.push(new fabric.Image.filters.Grayscale());\r\n  \/\/ \u56fe\u7247\u52a0\u8f7d\u5b8c\u6210\u4e4b\u540e\uff0c\u5e94\u7528\u6ee4\u955c\u6548\u679c\r\n  img.applyFilters();\r\n  img.set({\r\n    left: 300,\r\n    top: 250,\r\n  });\r\n  canvas.add(img);\r\n});<\/pre>\n
        <\/div>
        <\/div><\/div><\/div>\"https:\/\/sdeno.com\/wp-content\/uploads\/2021\/11\/can9.jpg\"<\/figure>\n
         <\/p>\n
        \u53e0\u52a0\u6ee4\u955c<\/strong><\/h3>\n
        \u201cfilters\u201d\u5c5e\u6027\u662f\u4e00\u4e2a\u6570\u7ec4\uff0c\u6211\u4eec\u53ef\u4ee5\u7528\u6570\u7ec4\u65b9\u6cd5\u6267\u884c\u4efb\u4f55\u6240\u9700\u7684\u64cd\u4f5c\uff1a\u79fb\u9664\u6ee4\u955c\uff08pop\uff0csplice\uff0cshift\uff09\uff0c\u6dfb\u52a0\u6ee4\u955c\uff08push\uff0cunshift\uff0csplice\uff09\uff0c\u751a\u81f3\u53ef\u4ee5\u7ec4\u5408\u591a\u4e2a\u6ee4\u955c\u3002\u5f53\u6211\u4eec\u8c03\u7528 applyFilters \u65f6\uff0c\u201cfilters\u201d\u6570\u7ec4\u4e2d\u5b58\u5728\u7684\u4efb\u4f55\u6ee4\u955c\u5c06\u9010\u4e2a\u5e94\u7528\uff0c\u6240\u4ee5\u8ba9\u6211\u4eec\u5c1d\u8bd5\u521b\u5efa\u4e00\u4e2a\u65e2\u8272\u504f\u53c8\u660e\u4eae\uff08Brightness\uff09\u7684\u56fe\u50cf\u3002<\/p>\n
        fabric.Image.fromURL(require(\".\/aaa.jpeg\"), (img) => {\r\n  img.scale(0.5);\r\n  \/\/ \u6dfb\u52a0\u6ee4\u955c\r\n  img.filters.push(\r\n    new fabric.Image.filters.Grayscale(),\r\n    new fabric.Image.filters.Sepia(), \/\/\u8272\u504f\r\n    new fabric.Image.filters.Brightness({ brightness: 0.2 }) \/\/\u4eae\u5ea6\r\n  );\r\n  \/\/ \u56fe\u7247\u52a0\u8f7d\u5b8c\u6210\u4e4b\u540e\uff0c\u5e94\u7528\u6ee4\u955c\u6548\u679c\r\n  img.applyFilters();\r\n  img.set({\r\n    left: 300,\r\n    top: 250,\r\n  });\r\n  canvas.add(img);\r\n});<\/pre>\n
        <\/div>
        <\/div><\/div><\/div>\"https:\/\/sdeno.com\/wp-content\/uploads\/2021\/11\/can10.jpg\"<\/figure>\n
        \u53ef\u4ee5\u770b\u5230\u591a\u4e2a\u6ee4\u955c\u7684\u6548\u679c\u53e0\u52a0\u663e\u793a\u4e86,\u5f53\u7136 Fabric \u8fd8\u652f\u6301\u81ea\u5b9a\u4e49\u6ee4\u955c,\u5728\u672c\u7bc7\u6587\u7ae0\u70b9\u8d5e\u8fc7 500 \u540e\u6211\u5c06\u66f4\u65b0 fabric \u9ad8\u7ea7\u7bc7,\u611f\u8c22\u5927\u5bb6\u7684\u652f\u6301~<\/p>\n
         <\/p>\n
        \u989c\u8272<\/strong><\/h3>\n
        \u65e0\u8bba\u4f60\u662f\u4f7f\u7528\u5341\u516d\u8fdb\u5236\uff0cRGB \u6216 RGBA \u989c\u8272\uff0cFabric \u90fd\u80fd\u5904\u7406\u7684\u5f88\u597d<\/p>\n
         <\/p>\n
        \u5b9a\u4e49\u989c\u8272<\/strong><\/h3>\n
        new fabric.Color(\"#f55\");\r\nnew fabric.Color(\"#aa3123\");\r\nnew fabric.Color(\"356333\");\r\nnew fabric.Color(\"rgb(100,50,100)\");\r\nnew fabric.Color(\"rgba(100, 200, 30, 0.5)\");<\/pre>\n
         <\/p>\n
        \u989c\u8272\u8f6c\u6362<\/strong><\/h3>\n
        new fabric.Color('#f55').toRgb(); \/\/ \"rgb(255,85,85)\"\r\nnew fabric.Color('rgb(100,100,100)').toHex(); \/\/ \"646464\"\r\nnew fabric.Color('fff').toHex(); \/\/ \"FFFFFF\"<\/pre>\n
        \u6211\u4eec\u8fd8\u53ef\u4ee5\u7528\u53e6\u4e00\u79cd\u989c\u8272\u53e0\u52a0\uff0c\u6216\u5c06\u5176\u8f6c\u6362\u4e3a\u7070\u5ea6\u7248\u672c\u3002<\/p>\n
        let redish = new fabric.Color(\"#f55\");\r\nlet greenish = new fabric.Color(\"#5f5\");\r\nredish.overlayWith(greenish).toHex(); \/\/ \"AAAA55\"\r\nredish.toGrayscale().toHex(); \/\/ \"A1A1A1\"<\/pre>\n
         <\/p>\n
        \u6e10\u53d8<\/strong><\/h3>\n
        Fabric \u901a\u8fc7 setGradient \u65b9\u6cd5\u652f\u6301\u6e10\u53d8\uff0c\u5728\u6240\u6709\u5bf9\u8c61\u4e0a\u5b9a\u4e49\u3002\u8c03\u7528 setGradient(‘fill’, { … })\u5c31\u50cf\u8bbe\u7f6e\u4e00\u4e2a\u5bf9\u8c61\u7684\u201cfill\u201d\u503c\u4e00\u6837\u3002<\/p>\n
        let circle = new fabric.Circle({\r\n  left: 100,\r\n  top: 100,\r\n  radius: 50\r\n});\r\n\r\ncircle.setGradient(\"fill\", {\r\n  \/\/ \u6e10\u53d8\u5f00\u59cb\u7684\u4f4d\u7f6e\r\n  x1: 0,\r\n  y1: 0,\r\n  \/\/ \u6e10\u53d8\u7ed3\u675f\u7684\u4f4d\u7f6e\r\n  x2: circle.width,\r\n  y2: 0,\r\n  \/\/\u6e10\u53d8\u7684\u989c\u8272\r\n  colorStops: {\r\n    \/\/ \u6e10\u53d8\u7684\u8303\u56f4(0,0.1,0.3,0.5,0.75,1)0-1\u4e4b\u95f4\u90fd\u53ef\u4ee5\r\n    0: \"red\",\r\n    0.2: \"orange\",\r\n    0.4: \"yellow\",\r\n    0.6: \"green\",\r\n    0.8: \"blue\",\r\n    1: \"purple\"\r\n  },\r\n});<\/pre>\n
        <\/div>
        <\/div><\/div><\/div>\"https:\/\/sdeno.com\/wp-content\/uploads\/2021\/11\/can11.jpg\"<\/figure>\n
         <\/p>\n
        \u6587\u672c<\/strong><\/h3>\n
        fabric.Text \u5bf9\u8c61\u5bf9\u4e8e\u6587\u672c,\u63d0\u4f9b\u4e86\u6bd4 canvas \u66f4\u4e30\u5bcc\u7684\u529f\u80fd\uff0c\u5305\u62ec\uff1a<\/p>\n