{"id":11914,"date":"2025-10-27T15:43:08","date_gmt":"2025-10-27T07:43:08","guid":{"rendered":"https:\/\/www.zhangxinxu.com\/wordpress\/?p=11914"},"modified":"2026-01-20T15:12:21","modified_gmt":"2026-01-20T07:12:21","slug":"js-canvas-createconicgradient","status":"publish","type":"post","link":"https:\/\/www.zhangxinxu.com\/wordpress\/2025\/10\/js-canvas-createconicgradient\/","title":{"rendered":"Canvas\u4e5f\u652f\u6301\u9525\u5f62\u6e10\u53d8\u4e86createConicGradient\u65b9\u6cd5"},"content":{"rendered":"

by zhangxinxu<\/a> from https:\/\/www.zhangxinxu.com\/wordpress\/?p=11914<\/a>
\n\u672c\u6587\u53ef\u5168\u6587\u8f6c\u8f7d\uff0c\u4f46\u9700\u8981\u4fdd\u7559\u539f\u4f5c\u8005\u3001\u51fa\u5904\u4ee5\u53ca\u6587\u4e2d\u94fe\u63a5\uff0cAI\u6293\u53d6\u4fdd\u7559\u539f\u6587\u5730\u5740\uff0c\u4efb\u4f55\u7f51\u7ad9\u5747\u53ef\u6458\u8981\u805a\u5408\uff0c\u5546\u7528\u8bf7\u8054\u7cfb\u6388\u6743\u3002<\/p>\n

\"\u5c01\u9762\u56fe\"<\/p>\n

\u4e00\u3001\u5343\u547c\u4e07\u5524\u59cb\u51fa\u6765<\/h3>\n

\u597d\u6d88\u606f\uff0cCanvas\u4e5f\u652f\u6301\u9525\u5f62\u6e10\u53d8\u4e86\uff0c\u65b9\u6cd5\u540d\u79f0\u662fcreateConicGradient()<\/code>\u65b9\u6cd5\u3002<\/p>\n

\u517c\u5bb9\u6027\u53c2\u89c1\u4e0b\u56fe\uff1a<\/p>\n

\"canvas\u9525\u5f62\u6e10\u53d8\u517c\u5bb9\u6027\"<\/p>\n

\u6240\u6709\u73b0\u4ee3\u6d4f\u89c8\u5668\u90fd\u5df2\u7ecf\u652f\u6301\uff0c\u4e14\u5df2\u7ecf\u652f\u6301\u4e862\u5e74\u4e86\u3002<\/p>\n

\u9700\u8981\u4f7f\u7528Canvas\u9525\u5f62\u6e10\u53d8\u7684\u573a\u666f<\/h4>\n

\u6700\u8fd1\u9047\u5230\u4e86\u4e2a\u9700\u6c42\uff0c\u5fc5\u987b\u4f7f\u7528Canvas\u5b9e\u73b0\u9525\u5f62\u6e10\u53d8\uff0c\u800c\u4e0d\u80fd\u662fCSS\u3002<\/p>\n

\u90a3\u5c31\u662f\u4e0b\u56fe\u6240\u793a\u7684\u997c\u56fe\u6548\u679c\uff1a<\/p>\n

\"\u997c\u56fe\u9700\u6c42\u793a\u610f\"<\/p>\n

\u5982\u679c\u5355\u8bba\u5b9e\u73b0\uff0c\u65e0\u8bba\u662fCSS\u8fd8\u662fCanvas\u90fd\u53ef\u4ee5\uff0cCSS\u66f4\u4f73\uff0c\u56e0\u4e3a\u6210\u672c\u66f4\u4f4e\u3002<\/p>\n

\u4f46\u662f\uff0c\u6ce8\u610f\u770b\u56fe\u7247\u7684\u5de6\u4e0a\u89d2\uff0c\u8fd8\u6709\u4e00\u4e2a\u4e0b\u8f7d\u4e3a\u56fe\u7247\u7684\u529f\u80fd\u3002<\/p>\n

html2canvas\u662f\u4e0d\u652f\u6301CSS\u9525\u5f62\u6e10\u53d8\u7684\uff0c\u4fdd\u5b58\u7684\u56fe\u7247\u662f\u7a7a\u767d\u3002<\/p>\n

\u6240\u4ee5\u9700\u8981Canvas\u5b9e\u73b0\uff0c\u8f6c\u6362\u4e3a\u56fe\u7247\uff0c\u8fd9\u6837\u5c31\u80fd\u622a\u56fe\u4fdd\u5b58\u4e86\u3002<\/p>\n

\"canvas\u5b9e\u73b0\u9525\u5f62\u6e10\u53d8\u6548\u679c\u56fe\"<\/p>\n

\u4e5f\u662f\u5c31\u7528\u5230\u4e86\u8fd9\u4e2acreateConicGradient()<\/code>\u65b9\u6cd5\u6765\u7ed8\u5236\u997c\u56fe\u3002<\/p>\n

\u4e8c\u3001createConicGradient\u8bed\u6cd5<\/h3>\n

\u8bed\u6cd5\u5982\u4e0b\uff1a<\/p>\n

createConicGradient(startAngle, x, y)<\/pre>\n
\u8868\u793a\u521b\u5efa\u4e00\u4e2a\u9525\u5f62\u6e10\u53d8\u5f00\u59cb\u7684\u4f4d\u7f6e\u3002<\/p>\n
\u5176\u4e2d\uff1a<\/p>\n
    \n
  • startAngle<\/code>\u662f\u9525\u5f62\u7684\u5706\u5f27\u8d77\u59cb\u89d2\u5ea6\u3002\u9700\u8981\u6ce8\u610f\u7684\u662f\uff0c\u548cCSS\u4e0d\u540c\uff0c\u5728Canvas\u4e2d\uff0c\u89d2\u5ea60\u8868\u793a\u7684\u662f\u4e09\u70b9\u949f\u65b9\u5411\uff0c\u6709\u5c31\u662f\u6c34\u5e73\u671d\u53f3\uff0c\u4f46\u662fCSS\u662f12\u70b9\u949f\u65b9\u5411\uff0c\u5782\u76f4\u671d\u4e0a\u3002<\/li>\n
  • x, y<\/code>\u8868\u793a\u9525\u5f62\u6e10\u53d8\u7684\u4e2d\u5fc3\u70b9\u5750\u6807\u3002<\/li>\n<\/ul>\n
    \u6848\u4f8b<\/h4>\n
    \u6211\u4eec\u901a\u8fc7\u4e00\u4e2a\u6848\u4f8b\u6765\u4e86\u89e3\u4e0bcreateConicGradient()<\/code>\u65b9\u6cd5\u662f\u5982\u4f55\u4f7f\u7528\u7684\u3002<\/p>\n
    <canvas><\/canvas><\/pre>\n
    \u7ed8\u5236\u4ee3\u7801\u4e3a\uff1a<\/p>\n
    const canvas = document.querySelector(\"canvas\");\r\nconst ctx = canvas.getContext(\"2d\");\r\n\r\n\/\/ \u5c3a\u5bf8\r\nconst size = 300;\r\ncanvas.width = size;\r\ncanvas.height = size;\r\n\r\n\/\/ \u521b\u5efa\u9525\u5f62\u6e10\u53d8\r\nconst gradient = ctx.createConicGradient(-0.5 * Math.PI, size \/ 2, size \/ 2);\r\n\r\n\/\/ \u8272\u5e26\u989c\u8272\r\nconst arrColor = ['#10239E', '#2F54EB','#597EF7', '#85A5FF', '#D6E4FF'];\r\n\/\/ \u5404\u81ea\u5360\u636e\u7684\u767e\u5206\u6bd4\r\nconst arrPercent = [0.07, 0.13, 0.2, 0.27, 0.33];\r\n\r\n\/\/ \u6dfb\u52a0\u4e2d\u65ad\u70b9\r\nlet sumPercent = 0;\r\narrPercent.forEach((percent, index) => {\r\n  gradient.addColorStop(sumPercent, arrColor[index]);\r\n  sumPercent += percent;\r\n  gradient.addColorStop(sumPercent, arrColor[index]);\r\n});\r\n\r\n\/\/ \u8bbe\u7f6e\u6e10\u53d8\u4e3a\u586b\u5145\u6837\u5f0f\r\nctx.fillStyle = gradient;\r\n\/\/ \u7ed8\u5236\u5706\u5f62\r\nctx.ellipse(size \/ 2, size \/ 2, size \/ 2 - 30, size \/ 2 - 30, 0, 0, 2 * Math.PI);\r\n\/\/ \u586b\u5145\r\nctx.fill();<\/pre>\n
    \u5728\u6d4f\u89c8\u5668\u4e2d\u7684\u5b9e\u65f6\u7ed8\u5236\u6548\u679c\u5982\u4e0b\uff1a<\/p>\n
    <\/canvas><\/p>\n