{"id":110060,"date":"2026-09-25T19:49:37","date_gmt":"2026-09-25T11:49:37","guid":{"rendered":"https:\/\/www.wsisp.com\/helps\/110060.html"},"modified":"2026-09-25T19:49:37","modified_gmt":"2026-09-25T11:49:37","slug":"web%e7%89%b9%e6%95%88022-web%e7%89%b9%e6%95%88%e7%9a%84%e5%ae%9a%e4%b9%89%e4%b8%8e%e8%be%b9%e7%95%8c%e4%b8%ba%e4%bb%80%e4%b9%88%e7%9c%8b%e7%9d%80%e8%bf%98%e5%be%88%e5%81%87%ef%bc%9a%e9%a2%9c","status":"publish","type":"post","link":"https:\/\/www.wsisp.com\/helps\/110060.html","title":{"rendered":"Web\u7279\u6548022\u2014Web\u7279\u6548\u7684\u5b9a\u4e49\u4e0e\u8fb9\u754c\u4e3a\u4ec0\u4e48\u770b\u7740\u8fd8\u5f88\u5047\uff1a\u989c\u8272\u3001\u6750\u8d28\u4e0e\u5c42\u6b21\u600e\u4e48\u8865"},"content":{"rendered":"

Web\u7279\u6548022\u2014Web\u7279\u6548\u7684\u5b9a\u4e49\u4e0e\u8fb9\u754c\u4e3a\u4ec0\u4e48\u770b\u7740\u8fd8\u5f88\u5047：\u989c\u8272\u3001\u6750\u8d28\u4e0e\u5c42\u6b21\u600e\u4e48\u8865<\/h2>\n

\u672c\u6587\u8ba8\u8bba\u4e3a\u4ec0\u4e48\u6709\u4e9b Web \u7279\u6548\u867d\u7136\u8fd0\u52a8\u6b63\u5e38，\u5374\u59cb\u7ec8\u663e\u5f97\u5355\u8584\u3001\u53d1\u5e73\u6216\u50cf\u5851\u6599\u3002\u6587\u7ae0\u5c06\u4ece\u989c\u8272\u7684\u660e\u6697\u4e0e\u9971\u548c\u5ea6\u3001\u6750\u8d28\u7684\u9ad8\u5149\u4e0e\u7c97\u7cd9\u5ea6\u3001\u524d\u540e\u5c42\u6b21\u7684\u906e\u6321\u4e0e\u900f\u660e\u5173\u7cfb\u5165\u624b，\u628a\u201c\u771f\u5b9e\u611f\u201d\u62c6\u6210\u53ef\u4ee5\u89c2\u5bdf\u548c\u8c03\u6574\u7684\u5177\u4f53\u53c2\u6570，\u518d\u7ed3\u5408 Canvas 2D\u3001\u6e10\u53d8\u3001\u9634\u5f71\u3001\u6df7\u5408\u548c\u7eb9\u7406\u4ee3\u7801，\u8bf4\u660e\u5982\u4f55\u7528\u8f83\u4f4e\u6210\u672c\u8865\u8db3\u753b\u9762\u7684\u4f53\u79ef\u3001\u8ddd\u79bb\u548c\u6750\u8d28\u5dee\u5f02\u3002\u91cd\u70b9\u4e0d\u662f\u8ffd\u6c42\u590d\u6742\u7684\u7269\u7406\u6e32\u67d3，\u800c\u662f\u5efa\u7acb\u4e00\u5957\u80fd\u670d\u52a1\u4e8e\u7f51\u9875\u4ea4\u4e92\u3001\u7c92\u5b50\u6548\u679c\u548c\u754c\u9762\u52a8\u6548\u7684\u89c6\u89c9\u5224\u65ad\u65b9\u6cd5\u3002<\/font><\/p>\n

\"\u8bf7\u6dfb\u52a0\u56fe\u7247\u63cf\u8ff0\"<\/p>\n

\u4e00\u3001\u5148\u627e\u51fa\u201c\u5047\u201d\u7684\u6765\u6e90：\u989c\u8272\u3001\u6750\u8d28\u548c\u5c42\u6b21\u5206\u522b\u7f3a\u4e86\u4ec0\u4e48<\/h3>\n

\u4e00\u4e2a Web \u7279\u6548\u770b\u8d77\u6765\u201c\u5047\u201d，\u901a\u5e38\u4e0d\u662f\u56e0\u4e3a\u5c11\u4e86\u67d0\u4e00\u4e2a\u9ad8\u7ea7 API，\u800c\u662f\u989c\u8272\u3001\u6750\u8d28\u548c\u5c42\u6b21\u4e2d\u7684\u67d0\u4e2a\u7ebf\u7d22\u4e0d\u4e00\u81f4\u3002\u989c\u8272\u8d1f\u8d23\u533a\u5206\u660e\u6697\u548c\u4f53\u79ef，\u6750\u8d28\u8d1f\u8d23\u8bf4\u660e\u8868\u9762\u5982\u4f55\u53cd\u5c04\u5149，\u5c42\u6b21\u8d1f\u8d23\u8bf4\u660e\u8c01\u5728\u524d\u3001\u8c01\u5728\u540e\u3002\u6392\u67e5\u65f6\u5e94\u5148\u628a\u4e09\u4e2a\u95ee\u9898\u62c6\u5f00，\u4e0d\u8981\u4e00\u4e0a\u6765\u540c\u65f6\u8c03\u6574\u989c\u8272\u3001\u9634\u5f71\u548c\u900f\u660e\u5ea6\u3002<\/p>\n

1. \u5148\u7528\u73b0\u8c61\u5224\u65ad\u7f3a\u5c11\u54ea\u7c7b\u7ebf\u7d22<\/h4>\n

\u53ef\u4ee5\u5148\u628a\u5e38\u89c1\u73b0\u8c61\u548c\u53ef\u80fd\u539f\u56e0\u5bf9\u5e94\u8d77\u6765：<\/p>\n

\u989c\u8272\u53d1\u5e73\u3001\u6ca1\u6709\u4f53\u79ef \u2192 \u660e\u6697\u5bf9\u6bd4\u4e0d\u8db3
\n\u6240\u6709\u7269\u4f53\u50cf\u540c\u4e00\u79cd\u5851\u6599 \u2192 \u9ad8\u5149\u548c\u7eb9\u7406\u6ca1\u6709\u533a\u522b
\n\u5143\u7d20\u4e92\u76f8\u7c98\u5728\u4e00\u8d77 \u2192 \u906e\u6321\u3001\u9634\u5f71\u6216\u900f\u660e\u5c42\u6b21\u4e0d\u8db3
\n\u8fb9\u7f18\u50cf\u8d34\u7eb8 \u2192 \u900f\u660e\u8fb9\u7f18\u3001\u9634\u5f71\u65b9\u5411\u6216\u989c\u8272\u8fc7\u6e21\u4e0d\u8fde\u7eed<\/p>\n

\u7528\u6570\u636e\u8868\u793a\u4e00\u4e2a\u6700\u5c0f\u89c6\u89c9\u5bf9\u8c61：<\/p>\n

const<\/span> visualObject =<\/span> {<\/span>
\n baseColor<\/span>:<\/span> {<\/span> r<\/span>:<\/span> 80<\/span>,<\/span> g<\/span>:<\/span> 170<\/span>,<\/span> b<\/span>:<\/span> 255<\/span> }<\/span>,<\/span>
\n brightness<\/span>:<\/span> 1<\/span>,<\/span>
\n roughness<\/span>:<\/span> 0.5<\/span>,<\/span>
\n alpha<\/span>:<\/span> 1<\/span>,<\/span>
\n depth<\/span>:<\/span> 0<\/span>,<\/span>
\n}<\/span>;<\/span><\/p>\n

console.<\/span>log<\/span>(<\/span>visualObject)<\/span>;<\/span><\/p>\n

baseColor \u4f7f\u7528 0～255 \u7684 RGB，brightness \u662f\u989c\u8272\u4eae\u5ea6\u7cfb\u6570，roughness \u8868\u793a\u8868\u9762\u7c97\u7cd9\u7a0b\u5ea6，alpha \u662f 0～1，depth \u662f\u7ed8\u5236\u5c42\u7ea7\u6216\u7a7a\u95f4\u6df1\u5ea6\u3002\u8fd9\u4e2a\u5bf9\u8c61\u8fd8\u6ca1\u6709\u4ea7\u751f\u771f\u5b9e\u5149\u7167，\u4f46\u5b83\u628a\u201c\u989c\u8272\u3001\u6750\u8d28\u3001\u5c42\u6b21\u201d\u53d8\u6210\u4e86\u53ef\u4ee5\u5355\u72ec\u68c0\u67e5\u7684\u5b57\u6bb5\u3002<\/p>\n

2. \u989c\u8272\u53d1\u5e73\u65f6，\u5148\u68c0\u67e5\u660e\u6697\u5bf9\u6bd4<\/h4>\n

\u5982\u679c\u524d\u666f\u548c\u80cc\u666f\u4eae\u5ea6\u63a5\u8fd1，\u8f6e\u5ed3\u5373\u4f7f\u5b58\u5728，\u773c\u775b\u4e5f\u5f88\u96be\u611f\u53d7\u5230\u4f53\u79ef\u3002\u53ef\u4ee5\u7528\u76f8\u5bf9\u4eae\u5ea6\u505a\u4e00\u4e2a\u7c97\u7565\u68c0\u67e5：<\/p>\n

function<\/span> luminance<\/span>(<\/span>color<\/span>)<\/span> {<\/span>
\n return<\/span> 0.2126<\/span> *<\/span> color.<\/span>r
\n +<\/span> 0.7152<\/span> *<\/span> color.<\/span>g
\n +<\/span> 0.0722<\/span> *<\/span> color.<\/span>b;<\/span>
\n}<\/span><\/p>\n

function<\/span> contrastRatio<\/span>(<\/span>colorA,<\/span> colorB<\/span>)<\/span> {<\/span>
\n const<\/span> light =<\/span> Math.<\/span>max<\/span>(<\/span>luminance<\/span>(<\/span>colorA)<\/span>,<\/span> luminance<\/span>(<\/span>colorB)<\/span>)<\/span>;<\/span>
\n const<\/span> dark =<\/span> Math.<\/span>min<\/span>(<\/span>luminance<\/span>(<\/span>colorA)<\/span>,<\/span> luminance<\/span>(<\/span>colorB)<\/span>)<\/span>;<\/span>
\n return<\/span> (<\/span>light +<\/span> 5<\/span>)<\/span> \/<\/span> (<\/span>dark +<\/span> 5<\/span>)<\/span>;<\/span>
\n}<\/span><\/p>\n

const<\/span> background =<\/span> {<\/span> r<\/span>:<\/span> 24<\/span>,<\/span> g<\/span>:<\/span> 32<\/span>,<\/span> b<\/span>:<\/span> 50<\/span> }<\/span>;<\/span>
\nconst<\/span> objectColor =<\/span> {<\/span> r<\/span>:<\/span> 40<\/span>,<\/span> g<\/span>:<\/span> 55<\/span>,<\/span> b<\/span>:<\/span> 70<\/span> }<\/span>;<\/span><\/p>\n

console.<\/span>log<\/span>(<\/span>contrastRatio<\/span>(<\/span>background,<\/span> objectColor)<\/span>)<\/span>;<\/span><\/p>\n

\u8fd9\u91cc\u4f7f\u7528\u7684\u662f\u7b80\u5316\u4eae\u5ea6，\u4e0d\u662f\u5b8c\u6574\u7684\u8272\u5f69\u7ba1\u7406\u6807\u51c6，\u4f46\u8db3\u4ee5\u7528\u4e8e\u7b2c\u4e00\u8f6e\u8bca\u65ad\u3002\u5bf9\u6bd4\u5ea6\u8d8a\u4f4e，\u7269\u4f53\u8fb9\u754c\u8d8a\u96be\u4ece\u80cc\u666f\u4e2d\u5206\u79bb；\u5982\u679c\u5bf9\u8c61\u989c\u8272\u548c\u80cc\u666f\u53ea\u5dee\u5c11\u91cf RGB，\u4f18\u5148\u8c03\u6574\u4eae\u5ea6\u6216\u8fb9\u7f18\u9ad8\u5149，\u800c\u4e0d\u662f\u76f4\u63a5\u589e\u52a0\u590d\u6742\u7eb9\u7406\u3002<\/p>\n

\u53ef\u4ee5\u628a\u4eae\u5ea6\u7cfb\u6570\u5e94\u7528\u5230\u989c\u8272：<\/p>\n

function<\/span> scaleBrightness<\/span>(<\/span>color,<\/span> factor<\/span>)<\/span> {<\/span>
\n return<\/span> {<\/span>
\n r<\/span>:<\/span> Math.<\/span>max<\/span>(<\/span>0<\/span>,<\/span> Math.<\/span>min<\/span>(<\/span>255<\/span>,<\/span> color.<\/span>r *<\/span> factor)<\/span>)<\/span>,<\/span>
\n g<\/span>:<\/span> Math.<\/span>max<\/span>(<\/span>0<\/span>,<\/span> Math.<\/span>min<\/span>(<\/span>255<\/span>,<\/span> color.<\/span>g *<\/span> factor)<\/span>)<\/span>,<\/span>
\n b<\/span>:<\/span> Math.<\/span>max<\/span>(<\/span>0<\/span>,<\/span> Math.<\/span>min<\/span>(<\/span>255<\/span>,<\/span> color.<\/span>b *<\/span> factor)<\/span>)<\/span>,<\/span>
\n }<\/span>;<\/span>
\n}<\/span><\/p>\n

const<\/span> shadowColor =<\/span> scaleBrightness<\/span>(<\/span>objectColor,<\/span> 0.65<\/span>)<\/span>;<\/span>
\nconst<\/span> highlightColor =<\/span> scaleBrightness<\/span>(<\/span>objectColor,<\/span> 1.35<\/span>)<\/span>;<\/span><\/p>\n

console.<\/span>log<\/span>(<\/span>{<\/span> shadowColor,<\/span> highlightColor }<\/span>)<\/span>;<\/span><\/p>\n

\u540c\u4e00\u57fa\u7840\u8272\u751f\u6210\u9634\u5f71\u8272\u548c\u9ad8\u5149\u8272，\u80fd\u5148\u9a8c\u8bc1\u4f53\u79ef\u662f\u5426\u51fa\u73b0\u3002factor \u4e0d\u662f\u7269\u7406\u5149\u7167\u7ed3\u679c，\u53ea\u662f\u89c6\u89c9\u8fd1\u4f3c\u53c2\u6570；\u9634\u5f71\u4e0e\u9ad8\u5149\u7684\u65b9\u5411\u3001\u5bbd\u5ea6\u548c\u900f\u660e\u5ea6\u4ecd\u9700\u8981\u7ed3\u5408\u7ed8\u5236\u4f4d\u7f6e\u5224\u65ad\u3002<\/p>\n

3. \u6240\u6709\u7269\u4f53\u90fd\u50cf\u5851\u6599\u65f6，\u68c0\u67e5\u6750\u8d28\u5dee\u5f02<\/h4>\n

\u6750\u8d28\u5dee\u5f02\u4e0d\u53ea\u9760\u6362\u989c\u8272\u3002\u5149\u6ed1\u8868\u9762\u901a\u5e38\u6709\u66f4\u96c6\u4e2d\u7684\u9ad8\u5149，\u7c97\u7cd9\u8868\u9762\u5219\u6709\u66f4\u5bbd\u3001\u66f4\u6de1\u7684\u9ad8\u5149\u3002\u53ef\u4ee5\u5148\u7528 roughness \u63a7\u5236\u9ad8\u5149\u8303\u56f4：<\/p>\n

function<\/span> highlightProfile<\/span>(<\/span>roughness,<\/span> baseAlpha =<\/span> 0.8<\/span><\/span>)<\/span> {<\/span>
\n const<\/span> safeRoughness =<\/span> Math.<\/span>max<\/span>(<\/span>0<\/span>,<\/span> Math.<\/span>min<\/span>(<\/span>1<\/span>,<\/span> roughness)<\/span>)<\/span>;<\/span>
\n return<\/span> {<\/span>
\n blur<\/span>:<\/span> 4<\/span> +<\/span> safeRoughness *<\/span> 24<\/span>,<\/span>
\n alpha<\/span>:<\/span> baseAlpha *<\/span> (<\/span>1<\/span> –<\/span> safeRoughness *<\/span> 0.65<\/span>)<\/span>,<\/span>
\n }<\/span>;<\/span>
\n}<\/span><\/p>\n

console.<\/span>log<\/span>(<\/span>highlightProfile<\/span>(<\/span>0.1<\/span>)<\/span>)<\/span>;<\/span> \/\/ \u96c6\u4e2d\u4e14\u660e\u663e<\/span>
\nconsole.<\/span>log<\/span>(<\/span>highlightProfile<\/span>(<\/span>0.8<\/span>)<\/span>)<\/span>;<\/span> \/\/ \u5bbd\u4e14\u67d4\u548c<\/span><\/p>\n

roughness \u53d6 0～1，\u8d8a\u5c0f\u8868\u793a\u8d8a\u5149\u6ed1；blur \u4f7f\u7528 Canvas \u50cf\u7d20，alpha \u4f7f\u7528 0～1\u3002\u8fd9\u4e2a\u51fd\u6570\u4e0d\u662f\u5b8c\u6574 BRDF，\u800c\u662f\u628a\u6750\u8d28\u5dee\u5f02\u8f6c\u6362\u6210\u4e24\u4e2a\u53ef\u89c1\u53c2\u6570：\u9ad8\u5149\u5bbd\u5ea6\u548c\u9ad8\u5149\u900f\u660e\u5ea6\u3002\u73bb\u7483\u3001\u91d1\u5c5e\u3001\u96fe\u6c14\u548c\u7eb8\u5f20\u4e0d\u5e94\u8be5\u5171\u7528\u5b8c\u5168\u76f8\u540c\u7684\u9ad8\u5149\u914d\u7f6e\u3002<\/p>\n

\u7eb9\u7406\u4e5f\u53ef\u4ee5\u4f5c\u4e3a\u6750\u8d28\u7ebf\u7d22，\u4f46\u8981\u5148\u63a7\u5236\u5f3a\u5ea6：<\/p>\n

function<\/span> mixTexture<\/span>(<\/span>baseColor,<\/span> textureColor,<\/span> amount<\/span>)<\/span> {<\/span>
\n const<\/span> t =<\/span> Math.<\/span>max<\/span>(<\/span>0<\/span>,<\/span> Math.<\/span>min<\/span>(<\/span>1<\/span>,<\/span> amount)<\/span>)<\/span>;<\/span>
\n return<\/span> {<\/span>
\n r<\/span>:<\/span> baseColor.<\/span>r *<\/span> (<\/span>1<\/span> –<\/span> t)<\/span> +<\/span> textureColor.<\/span>r *<\/span> t,<\/span>
\n g<\/span>:<\/span> baseColor.<\/span>g *<\/span> (<\/span>1<\/span> –<\/span> t)<\/span> +<\/span> textureColor.<\/span>g *<\/span> t,<\/span>
\n b<\/span>:<\/span> baseColor.<\/span>b *<\/span> (<\/span>1<\/span> –<\/span> t)<\/span> +<\/span> textureColor.<\/span>b *<\/span> t,<\/span>
\n }<\/span>;<\/span>
\n}<\/span><\/p>\n

const<\/span> base =<\/span> {<\/span> r<\/span>:<\/span> 160<\/span>,<\/span> g<\/span>:<\/span> 120<\/span>,<\/span> b<\/span>:<\/span> 80<\/span> }<\/span>;<\/span>
\nconst<\/span> texture =<\/span> {<\/span> r<\/span>:<\/span> 110<\/span>,<\/span> g<\/span>:<\/span> 85<\/span>,<\/span> b<\/span>:<\/span> 55<\/span> }<\/span>;<\/span>
\nconsole.<\/span>log<\/span>(<\/span>mixTexture<\/span>(<\/span>base,<\/span> texture,<\/span> 0.25<\/span>)<\/span>)<\/span>;<\/span><\/p>\n

amount \u4e3a 0 \u65f6\u5b8c\u5168\u4f7f\u7528\u57fa\u7840\u8272，\u4e3a 1 \u65f6\u5b8c\u5168\u4f7f\u7528\u7eb9\u7406\u8272\u3002\u7eb9\u7406\u53ea\u9700\u8981\u6253\u7834\u5747\u5300\u8868\u9762，\u4e0d\u5e94\u8be5\u76d6\u4f4f\u6574\u4f53\u660e\u6697\u7ed3\u6784；\u5982\u679c amount \u8fc7\u5927，\u753b\u9762\u53ef\u80fd\u4ece\u201c\u6ca1\u6709\u6750\u8d28\u201d\u53d8\u6210\u201c\u566a\u70b9\u592a\u591a\u201d\u3002<\/p>\n

4. \u5143\u7d20\u4e92\u76f8\u7c98\u8fde\u65f6，\u68c0\u67e5\u5c42\u6b21\u7ebf\u7d22<\/h4>\n

\u5c42\u6b21\u901a\u5e38\u7531\u7ed8\u5236\u987a\u5e8f\u3001\u900f\u660e\u5ea6\u3001\u9634\u5f71\u504f\u79fb\u548c\u5927\u5c0f\u53d8\u5316\u5171\u540c\u5efa\u7acb\u3002\u5148\u7528\u7b80\u5355\u7684 z \u503c\u6392\u5e8f\u786e\u5b9a\u8c01\u5728\u524d：<\/p>\n

function<\/span> sortByDepth<\/span>(<\/span>objects<\/span>)<\/span> {<\/span>
\n return<\/span> [<\/span>…<\/span>objects]<\/span>.<\/span>sort<\/span>(<\/span>(<\/span>a,<\/span> b<\/span>)<\/span> =><\/span> a.<\/span>depth –<\/span> b.<\/span>depth)<\/span>;<\/span>
\n}<\/span><\/p>\n

const<\/span> objects =<\/span> [<\/span>
\n {<\/span> name<\/span>:<\/span> 'front'<\/span>,<\/span> depth<\/span>:<\/span> 2<\/span>,<\/span> alpha<\/span>:<\/span> 0.9<\/span> }<\/span>,<\/span>
\n {<\/span> name<\/span>:<\/span> 'back'<\/span>,<\/span> depth<\/span>:<\/span> 0<\/span>,<\/span> alpha<\/span>:<\/span> 1<\/span> }<\/span>,<\/span>
\n {<\/span> name<\/span>:<\/span> 'middle'<\/span>,<\/span> depth<\/span>:<\/span> 1<\/span>,<\/span> alpha<\/span>:<\/span> 0.8<\/span> }<\/span>,<\/span>
\n]<\/span>;<\/span><\/p>\n

console.<\/span>log<\/span>(<\/span>sortByDepth<\/span>(<\/span>objects)<\/span>.<\/span>map<\/span>(<\/span>(<\/span>object<\/span>)<\/span> =><\/span> object.<\/span>name)<\/span>)<\/span>;<\/span>
\n\/\/ ['back', 'middle', 'front']<\/span><\/p>\n

depth \u53ea\u662f\u6392\u5e8f\u4f9d\u636e，\u4e0d\u4e00\u5b9a\u7b49\u4e8e\u771f\u5b9e\u4e09\u7ef4 z \u5750\u6807\u3002\u5148\u7ed8\u5236\u540e\u9762\u7684\u5bf9\u8c61，\u518d\u7ed8\u5236\u524d\u9762\u7684\u5bf9\u8c61，\u900f\u660e\u5408\u6210\u548c\u906e\u6321\u5173\u7cfb\u624d\u6709\u673a\u4f1a\u6b63\u786e\u51fa\u73b0\u3002\u82e5\u7ed8\u5236\u987a\u5e8f\u53cd\u4e86，\u5373\u4f7f\u989c\u8272\u548c\u9634\u5f71\u90fd\u6b63\u786e，\u753b\u9762\u4ecd\u4f1a\u663e\u5f97\u7a7a\u95f4\u5173\u7cfb\u6df7\u4e71\u3002<\/p>\n

\u53ef\u4ee5\u8ba9\u8fdc\u5904\u5bf9\u8c61\u7a0d\u5fae\u53d8\u5c0f\u3001\u53d8\u6de1：<\/p>\n

function<\/span> depthStyle<\/span>(<\/span>depth,<\/span> maxDepth<\/span>)<\/span> {<\/span>
\n const<\/span> normalized =<\/span> Math.<\/span>max<\/span>(<\/span>0<\/span>,<\/span> Math.<\/span>min<\/span>(<\/span>1<\/span>,<\/span> depth \/<\/span> maxDepth)<\/span>)<\/span>;<\/span>
\n return<\/span> {<\/span>
\n scale<\/span>:<\/span> 1<\/span> –<\/span> normalized *<\/span> 0.25<\/span>,<\/span>
\n alpha<\/span>:<\/span> 1<\/span> –<\/span> normalized *<\/span> 0.4<\/span>,<\/span>
\n blur<\/span>:<\/span> normalized *<\/span> 3<\/span>,<\/span>
\n }<\/span>;<\/span>
\n}<\/span><\/p>\n

console.<\/span>log<\/span>(<\/span>depthStyle<\/span>(<\/span>6<\/span>,<\/span> 10<\/span>)<\/span>)<\/span>;<\/span><\/p>\n

normalized \u662f 0～1 \u7684\u6df1\u5ea6\u6bd4\u4f8b，scale \u662f\u5c3a\u5bf8\u7cfb\u6570，alpha \u662f\u900f\u660e\u5ea6，blur \u662f\u50cf\u7d20\u6a21\u7cca\u91cf\u3002\u5b83\u4eec\u4e0d\u662f\u73b0\u5b9e\u4e16\u754c\u7684\u5fc5\u7136\u89c4\u5f8b，\u800c\u662f\u628a\u201c\u66f4\u8fdc\u201d\u8f6c\u6362\u6210\u53ef\u89c1\u5dee\u5f02\u7684\u8fd1\u4f3c\u65b9\u6cd5\u3002<\/p>\n

5. \u7528\u9694\u79bb\u5b9e\u9a8c\u786e\u5b9a\u771f\u6b63\u7f3a\u5931\u7684\u7ebf\u7d22<\/h4>\n

\u6700\u6709\u6548\u7684\u6392\u67e5\u65b9\u5f0f\u662f\u4e00\u6b21\u53ea\u4fdd\u7559\u4e00\u4e2a\u53d8\u91cf\u3002\u53ef\u4ee5\u4e3a\u5bf9\u8c61\u63d0\u4f9b\u5f00\u5173：<\/p>\n

function<\/span> renderDiagnostic<\/span>(<\/span>ctx,<\/span> object,<\/span> options<\/span>)<\/span> {<\/span>
\n const<\/span> {<\/span>
\n showBase =<\/span> true<\/span>,<\/span>
\n showHighlight =<\/span> false<\/span>,<\/span>
\n showShadow =<\/span> false<\/span>,<\/span>
\n }<\/span> =<\/span> options;<\/span><\/p>\n

ctx.<\/span>save<\/span>(<\/span>)<\/span>;<\/span><\/p>\n

if<\/span> (<\/span>showShadow)<\/span> {<\/span>
\n ctx.<\/span>shadowColor =<\/span> 'rgba(0, 0, 0, 0.35)'<\/span>;<\/span>
\n ctx.<\/span>shadowBlur =<\/span> 12<\/span>;<\/span>
\n ctx.<\/span>shadowOffsetY =<\/span> 8<\/span>;<\/span>
\n }<\/span><\/p>\n

if<\/span> (<\/span>showBase)<\/span> {<\/span>
\n ctx.<\/span>fillStyle =<\/span> object.<\/span>baseColor;<\/span>
\n ctx.<\/span>globalAlpha =<\/span> object.<\/span>alpha;<\/span>
\n ctx.<\/span>beginPath<\/span>(<\/span>)<\/span>;<\/span>
\n ctx.<\/span>arc<\/span>(<\/span>object.<\/span>x,<\/span> object.<\/span>y,<\/span> object.<\/span>radius,<\/span> 0<\/span>,<\/span> Math.<\/span>PI<\/span> *<\/span> 2<\/span>)<\/span>;<\/span>
\n ctx.<\/span>fill<\/span>(<\/span>)<\/span>;<\/span>
\n }<\/span><\/p>\n

if<\/span> (<\/span>showHighlight)<\/span> {<\/span>
\n ctx.<\/span>shadowColor =<\/span> 'transparent'<\/span>;<\/span>
\n ctx.<\/span>globalAlpha =<\/span> 0.45<\/span>;<\/span>
\n ctx.<\/span>fillStyle =<\/span> '#ffffff'<\/span>;<\/span>
\n ctx.<\/span>beginPath<\/span>(<\/span>)<\/span>;<\/span>
\n ctx.<\/span>arc<\/span>(<\/span>
\n object.<\/span>x –<\/span> object.<\/span>radius *<\/span> 0.25<\/span>,<\/span>
\n object.<\/span>y –<\/span> object.<\/span>radius *<\/span> 0.25<\/span>,<\/span>
\n object.<\/span>radius *<\/span> 0.3<\/span>,<\/span>
\n 0<\/span>,<\/span>
\n Math.<\/span>PI<\/span> *<\/span> 2<\/span>,<\/span>
\n )<\/span>;<\/span>
\n ctx.<\/span>fill<\/span>(<\/span>)<\/span>;<\/span>
\n }<\/span><\/p>\n

ctx.<\/span>restore<\/span>(<\/span>)<\/span>;<\/span>
\n}<\/span><\/p>\n

\u5148\u53ea\u6253\u5f00 showBase，\u786e\u8ba4\u57fa\u7840\u8f6e\u5ed3；\u518d\u6253\u5f00 showShadow，\u89c2\u5bdf\u4f53\u79ef\u662f\u5426\u6539\u5584；\u6700\u540e\u6253\u5f00 showHighlight，\u68c0\u67e5\u9ad8\u5149\u662f\u5426\u5e2e\u52a9\u533a\u5206\u6750\u8d28\u3002\u5982\u679c\u53ea\u6253\u5f00\u9ad8\u5149\u5c31\u53d8\u5f97\u523a\u773c，\u95ee\u9898\u4e0d\u662f\u201c\u9ad8\u5149\u4e0d\u591f\u201d，\u800c\u662f\u9ad8\u5149\u8303\u56f4\u6216\u900f\u660e\u5ea6\u8fc7\u5927\u3002<\/p>\n

\u56e0\u6b64，\u770b\u5230\u201c\u5047\u201d\u65f6\u53ef\u4ee5\u6309\u987a\u5e8f\u6392\u67e5：\u5148\u770b\u524d\u666f\u548c\u80cc\u666f\u7684\u4eae\u5ea6\u5dee，\u518d\u770b\u4e0d\u540c\u6750\u8d28\u662f\u5426\u62e5\u6709\u4e0d\u540c\u7684\u9ad8\u5149\u4e0e\u7eb9\u7406，\u6700\u540e\u68c0\u67e5\u7ed8\u5236\u987a\u5e8f\u3001\u900f\u660e\u5ea6\u548c\u9634\u5f71\u662f\u5426\u5efa\u7acb\u4e86\u524d\u540e\u5173\u7cfb\u3002\u628a\u73b0\u8c61\u62c6\u6210\u8fd9\u4e9b\u53ef\u89c2\u5bdf\u53c2\u6570\u540e，\u89c6\u89c9\u5224\u65ad\u5c31\u80fd\u8f6c\u6210\u53ef\u91cd\u590d\u7684\u5de5\u7a0b\u8c03\u8bd5\u6d41\u7a0b\u3002\u4e0b\u4e00\u8282\u5c06\u8fdb\u4e00\u6b65\u8bf4\u660e\u989c\u8272\u672c\u8eab\u5982\u4f55\u901a\u8fc7\u660e\u6697\u3001\u9971\u548c\u5ea6\u548c\u5bf9\u6bd4\u5236\u9020\u4f53\u79ef\u3002<\/p>\n

\u4e8c\u3001\u989c\u8272\u4e0d\u53ea\u662f\u6362\u8272：\u660e\u6697\u3001\u9971\u548c\u5ea6\u4e0e\u5bf9\u6bd4\u600e\u6837\u5236\u9020\u4f53\u79ef<\/h3>\n

\u989c\u8272\u5728 Web \u7279\u6548\u4e2d\u4e0d\u53ea\u662f\u7ed9\u5bf9\u8c61\u6362\u4e00\u4ef6\u5916\u8863\u3002\u660e\u6697\u5dee\u51b3\u5b9a\u8f6e\u5ed3\u548c\u4f53\u79ef，\u9971\u548c\u5ea6\u5f71\u54cd\u989c\u8272\u7684\u8ddd\u79bb\u611f\u548c\u6ce8\u610f\u529b，\u5bf9\u6bd4\u5ea6\u51b3\u5b9a\u5bf9\u8c61\u80fd\u5426\u4ece\u80cc\u666f\u4e2d\u5206\u79bb\u51fa\u6765\u3002\u628a\u8fd9\u4e09\u4e2a\u56e0\u7d20\u62c6\u5f00\u540e，\u5c31\u80fd\u7528\u53c2\u6570\u89e3\u91ca\u201c\u4e3a\u4ec0\u4e48\u53d1\u5e73\u201d，\u800c\u4e0d\u662f\u4e0d\u65ad\u8bd5\u4e0d\u540c\u7684\u5341\u516d\u8fdb\u5236\u989c\u8272\u3002<\/p>\n

1. \u660e\u6697\u5dee\u5148\u51b3\u5b9a\u5bf9\u8c61\u6709\u6ca1\u6709\u4f53\u79ef<\/h4>\n

\u540c\u4e00\u79cd\u8272\u76f8\u5982\u679c\u4eae\u5ea6\u5b8c\u5168\u4e00\u81f4，\u5706\u5f62\u3001\u9762\u677f\u548c\u7c92\u5b50\u4f1a\u5f88\u5bb9\u6613\u53d8\u6210\u4e00\u5757\u5e73\u9762\u3002\u53ef\u4ee5\u5148\u7528\u76f8\u5bf9\u4eae\u5ea6\u8fd1\u4f3c\u68c0\u67e5\u4e24\u4e2a\u989c\u8272：<\/p>\n

function<\/span> luminance<\/span>(<\/span>color<\/span>)<\/span> {<\/span>
\n return<\/span> 0.2126<\/span> *<\/span> color.<\/span>r
\n +<\/span> 0.7152<\/span> *<\/span> color.<\/span>g
\n +<\/span> 0.0722<\/span> *<\/span> color.<\/span>b;<\/span>
\n}<\/span><\/p>\n

function<\/span> luminanceGap<\/span>(<\/span>foreground,<\/span> background<\/span>)<\/span> {<\/span>
\n return<\/span> Math.<\/span>abs<\/span>(<\/span>
\n luminance<\/span>(<\/span>foreground)<\/span> –<\/span> luminance<\/span>(<\/span>background)<\/span>,<\/span>
\n )<\/span>;<\/span>
\n}<\/span><\/p>\n

const<\/span> background =<\/span> {<\/span> r<\/span>:<\/span> 24<\/span>,<\/span> g<\/span>:<\/span> 32<\/span>,<\/span> b<\/span>:<\/span> 50<\/span> }<\/span>;<\/span>
\nconst<\/span> foreground =<\/span> {<\/span> r<\/span>:<\/span> 80<\/span>,<\/span> g<\/span>:<\/span> 120<\/span>,<\/span> b<\/span>:<\/span> 180<\/span> }<\/span>;<\/span><\/p>\n

console.<\/span>log<\/span>(<\/span>luminanceGap<\/span>(<\/span>foreground,<\/span> background)<\/span>)<\/span>;<\/span><\/p>\n

RGB \u901a\u9053\u4f7f\u7528 0～255，\u8fd4\u56de\u503c\u662f\u7b80\u5316\u7684\u4eae\u5ea6\u5dee\u3002\u5dee\u503c\u8d8a\u5c0f，\u8f6e\u5ed3\u8d8a\u5bb9\u6613\u878d\u5165\u80cc\u666f；\u5dee\u503c\u589e\u5927\u540e，\u8fb9\u754c\u66f4\u6e05\u6670，\u4f46\u8fc7\u5927\u4e5f\u53ef\u80fd\u663e\u5f97\u751f\u786c\u3002\u8fd9\u4e2a\u8ba1\u7b97\u4e0d\u662f\u5b8c\u6574\u7684\u8272\u5f69\u7ba1\u7406\u6807\u51c6，\u800c\u662f\u4e00\u4e2a\u5feb\u901f\u5224\u65ad\u201c\u989c\u8272\u662f\u5426\u6709\u8db3\u591f\u660e\u6697\u5206\u79bb\u201d\u7684\u5de5\u5177\u3002<\/p>\n

\u53ef\u4ee5\u7528\u4eae\u5ea6\u7cfb\u6570\u751f\u6210\u540c\u4e00\u7269\u4f53\u7684\u9634\u5f71\u8272\u548c\u9ad8\u5149\u8272：<\/p>\n

function<\/span> adjustBrightness<\/span>(<\/span>color,<\/span> factor<\/span>)<\/span> {<\/span>
\n return<\/span> {<\/span>
\n r<\/span>:<\/span> Math.<\/span>max<\/span>(<\/span>0<\/span>,<\/span> Math.<\/span>min<\/span>(<\/span>255<\/span>,<\/span> color.<\/span>r *<\/span> factor)<\/span>)<\/span>,<\/span>
\n g<\/span>:<\/span> Math.<\/span>max<\/span>(<\/span>0<\/span>,<\/span> Math.<\/span>min<\/span>(<\/span>255<\/span>,<\/span> color.<\/span>g *<\/span> factor)<\/span>)<\/span>,<\/span>
\n b<\/span>:<\/span> Math.<\/span>max<\/span>(<\/span>0<\/span>,<\/span> Math.<\/span>min<\/span>(<\/span>255<\/span>,<\/span> color.<\/span>b *<\/span> factor)<\/span>)<\/span>,<\/span>
\n }<\/span>;<\/span>
\n}<\/span><\/p>\n

const<\/span> baseColor =<\/span> {<\/span> r<\/span>:<\/span> 70<\/span>,<\/span> g<\/span>:<\/span> 150<\/span>,<\/span> b<\/span>:<\/span> 240<\/span> }<\/span>;<\/span>
\nconst<\/span> shadowColor =<\/span> adjustBrightness<\/span>(<\/span>baseColor,<\/span> 0.6<\/span>)<\/span>;<\/span>
\nconst<\/span> highlightColor =<\/span> adjustBrightness<\/span>(<\/span>baseColor,<\/span> 1.35<\/span>)<\/span>;<\/span><\/p>\n

console.<\/span>log<\/span>(<\/span>{<\/span> shadowColor,<\/span> highlightColor }<\/span>)<\/span>;<\/span><\/p>\n

factor \u5c0f\u4e8e 1 \u4f1a\u538b\u4f4e\u660e\u6697，\u5927\u4e8e 1 \u4f1a\u63d0\u9ad8\u660e\u6697，\u7ed3\u679c\u6700\u7ec8\u9650\u5236\u5728 0～255\u3002\u9634\u5f71\u8272\u548c\u9ad8\u5149\u8272\u4fdd\u7559\u540c\u4e00\u8272\u76f8，\u6bd4\u968f\u610f\u6362\u6210\u7eaf\u9ed1\u548c\u7eaf\u767d\u66f4\u5bb9\u6613\u4fdd\u6301\u7edf\u4e00\u7684\u6750\u8d28\u611f\u89c9\u3002<\/p>\n

2. \u9971\u548c\u5ea6\u51b3\u5b9a\u989c\u8272\u662f\u9192\u76ee\u8fd8\u662f\u9000\u540e<\/h4>\n

\u9971\u548c\u5ea6\u9ad8\u7684\u989c\u8272\u66f4\u9c9c\u8273，\u5bb9\u6613\u6210\u4e3a\u89c6\u89c9\u7126\u70b9；\u964d\u4f4e\u9971\u548c\u5ea6\u540e，\u989c\u8272\u66f4\u63a5\u8fd1\u7070\u8272，\u9002\u5408\u80cc\u666f\u3001\u8fdc\u666f\u6216\u6b21\u8981\u5bf9\u8c61\u3002\u53ef\u4ee5\u7528 RGB \u5e73\u5747\u503c\u505a\u4e00\u4e2a\u7b80\u5355\u7684\u53bb\u9971\u548c\u5904\u7406：<\/p>\n

function<\/span> desaturate<\/span>(<\/span>color,<\/span> amount<\/span>)<\/span> {<\/span>
\n const<\/span> t =<\/span> Math.<\/span>max<\/span>(<\/span>0<\/span>,<\/span> Math.<\/span>min<\/span>(<\/span>1<\/span>,<\/span> amount)<\/span>)<\/span>;<\/span>
\n const<\/span> gray =<\/span> 0.299<\/span> *<\/span> color.<\/span>r
\n +<\/span> 0.587<\/span> *<\/span> color.<\/span>g
\n +<\/span> 0.114<\/span> *<\/span> color.<\/span>b;<\/span><\/p>\n

return<\/span> {<\/span>
\n r<\/span>:<\/span> color.<\/span>r *<\/span> (<\/span>1<\/span> –<\/span> t)<\/span> +<\/span> gray *<\/span> t,<\/span>
\n g<\/span>:<\/span> color.<\/span>g *<\/span> (<\/span>1<\/span> –<\/span> t)<\/span> +<\/span> gray *<\/span> t,<\/span>
\n b<\/span>:<\/span> color.<\/span>b *<\/span> (<\/span>1<\/span> –<\/span> t)<\/span> +<\/span> gray *<\/span> t,<\/span>
\n }<\/span>;<\/span>
\n}<\/span><\/p>\n

const<\/span> vivid =<\/span> {<\/span> r<\/span>:<\/span> 40<\/span>,<\/span> g<\/span>:<\/span> 180<\/span>,<\/span> b<\/span>:<\/span> 255<\/span> }<\/span>;<\/span>
\nconsole.<\/span>log<\/span>(<\/span>desaturate<\/span>(<\/span>vivid,<\/span> 0.35<\/span>)<\/span>)<\/span>;<\/span><\/p>\n

amount \u4e3a 0 \u65f6\u4fdd\u7559\u539f\u8272，\u4e3a 1 \u65f6\u63a5\u8fd1\u7070\u5ea6\u3002\u8fdc\u5904\u5bf9\u8c61\u53ef\u4ee5\u9002\u5f53\u964d\u4f4e\u9971\u548c\u5ea6，\u524d\u666f\u4ea4\u4e92\u5bf9\u8c61\u4fdd\u7559\u8f83\u9ad8\u9971\u548c\u5ea6，\u8fd9\u662f\u4e00\u79cd\u4f4e\u6210\u672c\u7684\u666f\u6df1\u8fd1\u4f3c\u3002\u5b83\u4e0d\u662f\u6539\u53d8\u5bf9\u8c61\u7684\u771f\u5b9e\u6750\u8d28，\u800c\u662f\u901a\u8fc7\u989c\u8272\u6ce8\u610f\u529b\u5efa\u7acb\u7a7a\u95f4\u548c\u4e3b\u6b21\u5173\u7cfb\u3002<\/p>\n

3. \u5bf9\u6bd4\u5ea6\u8981\u540c\u65f6\u770b\u5bf9\u8c61\u3001\u80cc\u666f\u548c\u8fb9\u7f18<\/h4>\n

\u4e00\u4e2a\u5bf9\u8c61\u7684\u989c\u8272\u5373\u4f7f\u5f88\u4eae，\u5982\u679c\u5b83\u548c\u80cc\u666f\u540c\u6837\u660e\u4eae，\u4ecd\u53ef\u80fd\u6ca1\u6709\u8f6e\u5ed3\u3002\u53ef\u4ee5\u7528\u5bf9\u6bd4\u5ea6\u6bd4\u4f8b\u505a\u66f4\u660e\u786e\u7684\u68c0\u67e5：<\/p>\n

function<\/span> contrastRatio<\/span>(<\/span>colorA,<\/span> colorB<\/span>)<\/span> {<\/span>
\n const<\/span> a =<\/span> luminance<\/span>(<\/span>colorA)<\/span>;<\/span>
\n const<\/span> b =<\/span> luminance<\/span>(<\/span>colorB)<\/span>;<\/span>
\n const<\/span> light =<\/span> Math.<\/span>max<\/span>(<\/span>a,<\/span> b)<\/span>;<\/span>
\n const<\/span> dark =<\/span> Math.<\/span>min<\/span>(<\/span>a,<\/span> b)<\/span>;<\/span>
\n return<\/span> (<\/span>light +<\/span> 5<\/span>)<\/span> \/<\/span> (<\/span>dark +<\/span> 5<\/span>)<\/span>;<\/span>
\n}<\/span><\/p>\n

const<\/span> panel =<\/span> {<\/span> r<\/span>:<\/span> 40<\/span>,<\/span> g<\/span>:<\/span> 52<\/span>,<\/span> b<\/span>:<\/span> 75<\/span> }<\/span>;<\/span>
\nconst<\/span> panelBackground =<\/span> {<\/span> r<\/span>:<\/span> 24<\/span>,<\/span> g<\/span>:<\/span> 32<\/span>,<\/span> b<\/span>:<\/span> 50<\/span> }<\/span>;<\/span><\/p>\n

console.<\/span>log<\/span>(<\/span>contrastRatio<\/span>(<\/span>panel,<\/span> panelBackground)<\/span>)<\/span>;<\/span><\/p>\n

\u8fd4\u56de\u503c\u8d8a\u63a5\u8fd1 1，\u4e24\u4e2a\u989c\u8272\u8d8a\u96be\u533a\u5206；\u503c\u589e\u5927\u540e，\u8fb9\u754c\u66f4\u660e\u663e\u3002\u5b9e\u9645\u8bbe\u8ba1\u4e2d\u4e0d\u80fd\u53ea\u63d0\u9ad8\u6574\u4e2a\u5bf9\u8c61\u7684\u4eae\u5ea6，\u5426\u5219\u4f1a\u7834\u574f\u6750\u8d28\u5c42\u6b21\u3002\u66f4\u597d\u7684\u529e\u6cd5\u662f\u7ed9\u8f6e\u5ed3\u3001\u9ad8\u5149\u6216\u9634\u5f71\u589e\u52a0\u5c40\u90e8\u5bf9\u6bd4：<\/p>\n

function<\/span> drawContrastTest<\/span>(<\/span>ctx,<\/span> x,<\/span> y,<\/span> color<\/span>)<\/span> {<\/span>
\n ctx.<\/span>save<\/span>(<\/span>)<\/span>;<\/span><\/p>\n

ctx.<\/span>fillStyle =<\/span> color;<\/span>
\n ctx.<\/span>fillRect<\/span>(<\/span>x,<\/span> y,<\/span> 80<\/span>,<\/span> 80<\/span>)<\/span>;<\/span><\/p>\n

ctx.<\/span>strokeStyle =<\/span> 'rgba(255, 255, 255, 0.55)'<\/span>;<\/span>
\n ctx.<\/span>lineWidth =<\/span> 2<\/span>;<\/span>
\n ctx.<\/span>strokeRect<\/span>(<\/span>x +<\/span> 1<\/span>,<\/span> y +<\/span> 1<\/span>,<\/span> 78<\/span>,<\/span> 78<\/span>)<\/span>;<\/span><\/p>\n

ctx.<\/span>restore<\/span>(<\/span>)<\/span>;<\/span>
\n}<\/span><\/p>\n

const<\/span> canvas =<\/span> document.<\/span>querySelector<\/span>(<\/span>'#contrast-stage'<\/span>)<\/span>;<\/span>
\nconst<\/span> ctx =<\/span> canvas.<\/span>getContext<\/span>(<\/span>'2d'<\/span>)<\/span>;<\/span>
\ndrawContrastTest<\/span>(<\/span>ctx,<\/span> 20<\/span>,<\/span> 20<\/span>,<\/span> '#28344b'<\/span>)<\/span>;<\/span><\/p>\n

\u8fb9\u6846\u53ea\u589e\u52a0\u5c40\u90e8\u5bf9\u6bd4，\u4e0d\u4f1a\u628a\u6574\u4e2a\u8272\u5757\u53d8\u6210\u7eaf\u767d\u3002\u5bf9\u4e8e\u6309\u94ae\u3001\u73bb\u7483\u9762\u677f\u548c\u7c92\u5b50\u53d1\u5149\u6838\u5fc3，\u5c40\u90e8\u8fb9\u7f18\u5bf9\u6bd4\u901a\u5e38\u6bd4\u7b80\u5355\u63d0\u9ad8 baseColor \u66f4\u81ea\u7136\u3002<\/p>\n

4. \u6e10\u53d8\u628a\u660e\u6697\u5dee\u53d8\u6210\u8fde\u7eed\u4f53\u79ef<\/h4>\n

\u5e73\u9762\u8272\u5757\u6ca1\u6709\u65b9\u5411\u4fe1\u606f；\u6e10\u53d8\u53ef\u4ee5\u8ba9\u989c\u8272\u6cbf\u7740\u7a7a\u95f4\u4f4d\u7f6e\u53d8\u5316，\u4ece\u800c\u6697\u793a\u5149\u7ebf\u65b9\u5411：<\/p>\n

function<\/span> drawLightGradient<\/span>(<\/span>ctx,<\/span> x,<\/span> y,<\/span> width,<\/span> height<\/span>)<\/span> {<\/span>
\n const<\/span> gradient =<\/span> ctx.<\/span>createLinearGradient<\/span>(<\/span>x,<\/span> y,<\/span> x,<\/span> y +<\/span> height)<\/span>;<\/span>
\n gradient.<\/span>addColorStop<\/span>(<\/span>0<\/span>,<\/span> 'rgba(255, 255, 255, 0.55)'<\/span>)<\/span>;<\/span>
\n gradient.<\/span>addColorStop<\/span>(<\/span>0.45<\/span>,<\/span> 'rgba(80, 170, 255, 0.9)'<\/span>)<\/span>;<\/span>
\n gradient.<\/span>addColorStop<\/span>(<\/span>1<\/span>,<\/span> 'rgba(20, 60, 130, 0.95)'<\/span>)<\/span>;<\/span><\/p>\n

ctx.<\/span>save<\/span>(<\/span>)<\/span>;<\/span>
\n ctx.<\/span>fillStyle =<\/span> gradient;<\/span>
\n ctx.<\/span>fillRect<\/span>(<\/span>x,<\/span> y,<\/span> width,<\/span> height)<\/span>;<\/span>
\n ctx.<\/span>restore<\/span>(<\/span>)<\/span>;<\/span>
\n}<\/span><\/p>\n

drawLightGradient<\/span>(<\/span>ctx,<\/span> 130<\/span>,<\/span> 20<\/span>,<\/span> 120<\/span>,<\/span> 160<\/span>)<\/span>;<\/span><\/p>\n

\u6e10\u53d8\u505c\u6b62\u70b9\u7684\u4f4d\u7f6e\u662f 0～1 \u7684\u76f8\u5bf9\u8fdb\u5ea6，\u989c\u8272\u4e2d\u7684 Alpha \u662f 0～1\u3002\u9876\u90e8\u9ad8\u5149\u3001\u4e2d\u90e8\u57fa\u7840\u8272\u548c\u5e95\u90e8\u6697\u90e8\u5171\u540c\u6784\u6210\u660e\u6697\u65b9\u5411\u3002\u505c\u6b62\u70b9\u8fc7\u5c11\u4f1a\u663e\u5f97\u673a\u68b0，\u989c\u8272\u8de8\u5ea6\u8fc7\u5927\u53c8\u53ef\u80fd\u51fa\u73b0\u7a81\u5140\u8272\u5e26，\u56e0\u6b64\u5e94\u5148\u786e\u5b9a\u5149\u6e90\u65b9\u5411，\u518d\u8c03\u6574\u8272\u9636\u3002<\/p>\n

\u5706\u5f62\u7c92\u5b50\u4e5f\u53ef\u4ee5\u7528\u5f84\u5411\u6e10\u53d8\u5236\u9020\u4e2d\u5fc3\u53d1\u5149\u548c\u8fb9\u7f18\u8870\u51cf：<\/p>\n

function<\/span> drawGlow<\/span>(<\/span>ctx,<\/span> x,<\/span> y,<\/span> radius,<\/span> color<\/span>)<\/span> {<\/span>
\n const<\/span> gradient =<\/span> ctx.<\/span>createRadialGradient<\/span>(<\/span>
\n x –<\/span> radius *<\/span> 0.25<\/span>,<\/span>
\n y –<\/span> radius *<\/span> 0.25<\/span>,<\/span>
\n radius *<\/span> 0.05<\/span>,<\/span>
\n x,<\/span>
\n y,<\/span>
\n radius,<\/span>
\n )<\/span>;<\/span><\/p>\n

gradient.<\/span>addColorStop<\/span>(<\/span>0<\/span>,<\/span> color)<\/span>;<\/span>
\n gradient.<\/span>addColorStop<\/span>(<\/span>1<\/span>,<\/span> 'rgba(0, 0, 0, 0)'<\/span>)<\/span>;<\/span><\/p>\n

ctx.<\/span>save<\/span>(<\/span>)<\/span>;<\/span>
\n ctx.<\/span>fillStyle =<\/span> gradient;<\/span>
\n ctx.<\/span>beginPath<\/span>(<\/span>)<\/span>;<\/span>
\n ctx.<\/span>arc<\/span>(<\/span>x,<\/span> y,<\/span> radius,<\/span> 0<\/span>,<\/span> Math.<\/span>PI<\/span> *<\/span> 2<\/span>)<\/span>;<\/span>
\n ctx.<\/span>fill<\/span>(<\/span>)<\/span>;<\/span>
\n ctx.<\/span>restore<\/span>(<\/span>)<\/span>;<\/span>
\n}<\/span><\/p>\n

\u5f84\u5411\u6e10\u53d8\u7684\u4e2d\u5fc3\u504f\u79fb\u5230\u5de6\u4e0a\u65b9，\u6697\u793a\u5149\u7ebf\u6765\u81ea\u5de6\u4e0a；\u672b\u7aef\u900f\u660e\u5ea6\u4e3a 0，\u4f7f\u5149\u6655\u81ea\u7136\u878d\u5165\u80cc\u666f\u3002\u82e5\u4e2d\u5fc3\u548c\u8fb9\u7f18\u90fd\u4f7f\u7528\u76f8\u540c\u4eae\u5ea6，\u7c92\u5b50\u4f1a\u5931\u53bb\u53d1\u5149\u65b9\u5411，\u53ea\u5269\u4e00\u4e2a\u6a21\u7cca\u8272\u5757\u3002<\/p>\n

5. \u628a\u989c\u8272\u53c2\u6570\u7ec4\u7ec7\u6210\u53ef\u8c03\u7684\u89c6\u89c9\u914d\u7f6e<\/h4>\n

\u5f53\u989c\u8272\u3001\u660e\u6697\u548c\u5bf9\u6bd4\u53c2\u6570\u6563\u843d\u5728\u7ed8\u5236\u4ee3\u7801\u4e2d，\u540e\u7eed\u5f88\u96be\u7edf\u4e00\u8c03\u6574\u3002\u53ef\u4ee5\u96c6\u4e2d\u6210\u89c6\u89c9\u914d\u7f6e：<\/p>\n

const<\/span> visualTheme =<\/span> {<\/span>
\n background<\/span>:<\/span> '#182033'<\/span>,<\/span>
\n base<\/span>:<\/span> {<\/span> r<\/span>:<\/span> 70<\/span>,<\/span> g<\/span>:<\/span> 150<\/span>,<\/span> b<\/span>:<\/span> 240<\/span> }<\/span>,<\/span>
\n shadowFactor<\/span>:<\/span> 0.6<\/span>,<\/span>
\n highlightFactor<\/span>:<\/span> 1.35<\/span>,<\/span>
\n edgeAlpha<\/span>:<\/span> 0.55<\/span>,<\/span>
\n saturation<\/span>:<\/span> 0.85<\/span>,<\/span>
\n}<\/span>;<\/span><\/p>\n

function<\/span> createThemeColors<\/span>(<\/span>theme<\/span>)<\/span> {<\/span>
\n const<\/span> base =<\/span> desaturate<\/span>(<\/span>theme.<\/span>base,<\/span> 1<\/span> –<\/span> theme.<\/span>saturation)<\/span>;<\/span><\/p>\n

return<\/span> {<\/span>
\n base,<\/span>
\n shadow<\/span>:<\/span> adjustBrightness<\/span>(<\/span>base,<\/span> theme.<\/span>shadowFactor)<\/span>,<\/span>
\n highlight<\/span>:<\/span> adjustBrightness<\/span>(<\/span>base,<\/span> theme.<\/span>highlightFactor)<\/span>,<\/span>
\n }<\/span>;<\/span>
\n}<\/span><\/p>\n

console.<\/span>log<\/span>(<\/span>createThemeColors<\/span>(<\/span>visualTheme)<\/span>)<\/span>;<\/span><\/p>\n

shadowFactor \u548c highlightFactor \u63a7\u5236\u660e\u6697\u8303\u56f4，saturation \u63a7\u5236\u989c\u8272\u9000\u7070\u7a0b\u5ea6，edgeAlpha \u63a7\u5236\u8f6e\u5ed3\u5f3a\u5ea6\u3002\u628a\u8fd9\u4e9b\u503c\u653e\u5728\u4e00\u4e2a\u914d\u7f6e\u5bf9\u8c61\u4e2d，\u8c03\u8bd5\u65f6\u53ef\u4ee5\u4e00\u6b21\u4fee\u6539\u4e00\u7ec4\u76f8\u5173\u53c2\u6570，\u4e5f\u65b9\u4fbf\u4e3a\u524d\u666f\u3001\u80cc\u666f\u548c\u4ea4\u4e92\u72b6\u6001\u5efa\u7acb\u4e0d\u540c\u4e3b\u9898\u3002<\/p>\n

\u989c\u8272\u5236\u9020\u4f53\u79ef\u7684\u987a\u5e8f\u901a\u5e38\u662f：\u5148\u786e\u4fdd\u5bf9\u8c61\u548c\u80cc\u666f\u6709\u57fa\u672c\u660e\u6697\u5dee，\u518d\u7528\u9971\u548c\u5ea6\u5efa\u7acb\u524d\u540e\u4e3b\u6b21，\u6700\u540e\u7528\u6e10\u53d8\u548c\u5c40\u90e8\u8fb9\u7f18\u5bf9\u6bd4\u8865\u5145\u5149\u7ebf\u65b9\u5411\u3002\u989c\u8272\u53c2\u6570\u53ea\u6709\u7ed1\u5b9a\u5230\u80cc\u666f\u3001\u5750\u6807\u548c\u7ed8\u5236\u8303\u56f4，\u624d\u4f1a\u4ece\u201c\u6362\u8272\u201d\u53d8\u6210\u53ef\u89e3\u91ca\u7684\u89c6\u89c9\u7ed3\u6784\u3002\u4e0b\u4e00\u8282\u5c06\u7ee7\u7eed\u5904\u7406\u9ad8\u5149\u3001\u7c97\u7cd9\u5ea6\u548c\u7eb9\u7406，\u8bf4\u660e\u4e0d\u540c\u6750\u8d28\u4e3a\u4ec0\u4e48\u4e0d\u80fd\u5171\u7528\u540c\u4e00\u5957\u989c\u8272\u8868\u73b0\u3002<\/p>\n

\u4e09\u3001\u6750\u8d28\u4e3a\u4ec0\u4e48\u770b\u8d77\u6765\u4e00\u6837：\u9ad8\u5149\u3001\u7c97\u7cd9\u5ea6\u4e0e\u7eb9\u7406\u5982\u4f55\u533a\u5206\u8868\u9762<\/h3>\n

\u4e24\u4e2a\u5bf9\u8c61\u5373\u4f7f\u989c\u8272\u4e0d\u540c，\u5982\u679c\u9ad8\u5149\u5f62\u72b6\u3001\u8fb9\u7f18\u5904\u7406\u548c\u7eb9\u7406\u5f3a\u5ea6\u5b8c\u5168\u4e00\u81f4，\u773c\u775b\u4ecd\u4f1a\u628a\u5b83\u4eec\u5224\u65ad\u6210\u540c\u4e00\u79cd\u6750\u8d28\u3002\u6750\u8d28\u4e0d\u9700\u8981\u4e00\u5f00\u59cb\u5c31\u505a\u5b8c\u6574\u7684\u7269\u7406\u6a21\u62df，\u53ef\u4ee5\u5148\u628a\u8868\u9762\u5dee\u5f02\u62c6\u6210\u4e09\u4e2a\u53ef\u63a7\u53c2\u6570：\u9ad8\u5149\u6709\u591a\u96c6\u4e2d，\u8868\u9762\u660e\u6697\u53d8\u5316\u6709\u591a\u5feb，\u7eb9\u7406\u5bf9\u57fa\u7840\u8272\u7684\u5f71\u54cd\u6709\u591a\u5f3a\u3002<\/p>\n

1. \u9ad8\u5149\u7684\u5927\u5c0f\u548c\u900f\u660e\u5ea6\u5148\u533a\u5206\u8868\u9762<\/h4>\n

\u5149\u6ed1\u8868\u9762\u7684\u9ad8\u5149\u901a\u5e38\u66f4\u96c6\u4e2d\u3001\u66f4\u4eae；\u7c97\u7cd9\u8868\u9762\u7684\u9ad8\u5149\u66f4\u5bbd\u3001\u66f4\u6de1\u3002\u53ef\u4ee5\u628a roughness \u6620\u5c04\u6210 Canvas \u9634\u5f71\u6216\u9ad8\u5149\u53c2\u6570：<\/p>\n

function<\/span> getHighlightStyle<\/span>(<\/span>roughness<\/span>)<\/span> {<\/span>
\n const<\/span> r =<\/span> Math.<\/span>max<\/span>(<\/span>0<\/span>,<\/span> Math.<\/span>min<\/span>(<\/span>1<\/span>,<\/span> roughness)<\/span>)<\/span>;<\/span><\/p>\n

return<\/span> {<\/span>
\n radius<\/span>:<\/span> 6<\/span> +<\/span> r *<\/span> 20<\/span>,<\/span>
\n alpha<\/span>:<\/span> 0.75<\/span> –<\/span> r *<\/span> 0.45<\/span>,<\/span>
\n offsetX<\/span>:<\/span> –<\/span>8<\/span> +<\/span> r *<\/span> 6<\/span>,<\/span>
\n offsetY<\/span>:<\/span> –<\/span>10<\/span> +<\/span> r *<\/span> 8<\/span>,<\/span>
\n }<\/span>;<\/span>
\n}<\/span><\/p>\n

console.<\/span>log<\/span>(<\/span>getHighlightStyle<\/span>(<\/span>0.1<\/span>)<\/span>)<\/span>;<\/span>
\nconsole.<\/span>log<\/span>(<\/span>getHighlightStyle<\/span>(<\/span>0.85<\/span>)<\/span>)<\/span>;<\/span><\/p>\n

roughness \u7684\u8303\u56f4\u662f 0～1，radius \u548c\u504f\u79fb\u91cf\u7684\u5355\u4f4d\u662f px，alpha \u7684\u8303\u56f4\u662f 0～1\u3002roughness \u8d8a\u5c0f，\u9ad8\u5149\u534a\u5f84\u8d8a\u5c0f\u3001\u900f\u660e\u5ea6\u8d8a\u9ad8，\u9002\u5408\u73bb\u7483\u6216\u629b\u5149\u91d1\u5c5e；roughness \u8d8a\u5927，\u9ad8\u5149\u66f4\u5bbd\u66f4\u5f31，\u9002\u5408\u7eb8\u5f20\u3001\u77f3\u6750\u6216\u96fe\u9762\u5851\u6599\u3002\u8fd9\u4e0d\u662f\u7269\u7406 BRDF，\u800c\u662f\u628a\u6750\u8d28\u5dee\u5f02\u8f6c\u6362\u6210\u53ef\u89c2\u5bdf\u7684\u53c2\u6570\u3002<\/p>\n

2. \u7528\u5c40\u90e8\u9ad8\u5149\u800c\u4e0d\u662f\u6574\u5757\u53d8\u767d<\/h4>\n

\u6750\u8d28\u9ad8\u5149\u5e94\u8be5\u53ea\u5f71\u54cd\u8868\u9762\u7684\u4e00\u90e8\u5206，\u4e0d\u80fd\u628a\u6574\u4e2a\u5bf9\u8c61\u7684\u989c\u8272\u4e00\u8d77\u62ac\u9ad8：<\/p>\n

function<\/span> drawMaterialCircle<\/span>(<\/span>ctx,<\/span> material<\/span>)<\/span> {<\/span>
\n ctx.<\/span>save<\/span>(<\/span>)<\/span>;<\/span><\/p>\n

ctx.<\/span>fillStyle =<\/span> material.<\/span>baseColor;<\/span>
\n ctx.<\/span>globalAlpha =<\/span> material.<\/span>alpha;<\/span>
\n ctx.<\/span>beginPath<\/span>(<\/span>)<\/span>;<\/span>
\n ctx.<\/span>arc<\/span>(<\/span>material.<\/span>x,<\/span> material.<\/span>y,<\/span> material.<\/span>radius,<\/span> 0<\/span>,<\/span> Math.<\/span>PI<\/span> *<\/span> 2<\/span>)<\/span>;<\/span>
\n ctx.<\/span>fill<\/span>(<\/span>)<\/span>;<\/span><\/p>\n

const<\/span> style =<\/span> getHighlightStyle<\/span>(<\/span>material.<\/span>roughness)<\/span>;<\/span>
\n const<\/span> gradient =<\/span> ctx.<\/span>createRadialGradient<\/span>(<\/span>
\n material.<\/span>x +<\/span> style.<\/span>offsetX,<\/span>
\n material.<\/span>y +<\/span> style.<\/span>offsetY,<\/span>
\n 1<\/span>,<\/span>
\n material.<\/span>x +<\/span> style.<\/span>offsetX,<\/span>
\n material.<\/span>y +<\/span> style.<\/span>offsetY,<\/span>
\n style.<\/span>radius,<\/span>
\n )<\/span>;<\/span><\/p>\n

gradient.<\/span>addColorStop<\/span>(<\/span>0<\/span>,<\/span> 'rgba(255, 255, 255, '<\/span> +<\/span> style.<\/span>alpha +<\/span> ')'<\/span>)<\/span>;<\/span>
\n gradient.<\/span>addColorStop<\/span>(<\/span>1<\/span>,<\/span> 'rgba(255, 255, 255, 0)'<\/span>)<\/span>;<\/span><\/p>\n

ctx.<\/span>globalAlpha =<\/span> 1<\/span>;<\/span>
\n ctx.<\/span>fillStyle =<\/span> gradient;<\/span>
\n ctx.<\/span>beginPath<\/span>(<\/span>)<\/span>;<\/span>
\n ctx.<\/span>arc<\/span>(<\/span>material.<\/span>x,<\/span> material.<\/span>y,<\/span> material.<\/span>radius,<\/span> 0<\/span>,<\/span> Math.<\/span>PI<\/span> *<\/span> 2<\/span>)<\/span>;<\/span>
\n ctx.<\/span>fill<\/span>(<\/span>)<\/span>;<\/span><\/p>\n

ctx.<\/span>restore<\/span>(<\/span>)<\/span>;<\/span>
\n}<\/span><\/p>\n

const<\/span> material =<\/span> {<\/span>
\n x<\/span>:<\/span> 140<\/span>,<\/span>
\n y<\/span>:<\/span> 100<\/span>,<\/span>
\n radius<\/span>:<\/span> 42<\/span>,<\/span>
\n baseColor<\/span>:<\/span> '#3478c4'<\/span>,<\/span>
\n roughness<\/span>:<\/span> 0.25<\/span>,<\/span>
\n alpha<\/span>:<\/span> 1<\/span>,<\/span>
\n}<\/span>;<\/span><\/p>\n

drawMaterialCircle<\/span>(<\/span>ctx,<\/span> material)<\/span>;<\/span><\/p>\n

\u57fa\u7840\u8272\u8d1f\u8d23\u7269\u4f53\u672c\u8eab，\u9ad8\u5149\u6e10\u53d8\u8d1f\u8d23\u5c40\u90e8\u53cd\u5c04，\u4e8c\u8005\u4f7f\u7528\u4e0d\u540c\u7684\u7ed8\u5236\u9636\u6bb5\u3002\u9ad8\u5149\u4e2d\u5fc3\u504f\u5411\u5de6\u4e0a，\u8868\u793a\u5149\u6e90\u4ece\u5de6\u4e0a\u7167\u6765；\u5982\u679c\u628a\u9ad8\u5149\u653e\u5728\u6b63\u4e2d\u592e，\u7269\u4f53\u4f1a\u66f4\u50cf\u53d1\u5149\u8d34\u7eb8，\u800c\u4e0d\u662f\u6709\u8868\u9762\u7684\u5b9e\u4f53\u3002<\/p>\n

3. \u7eb9\u7406\u8981\u6539\u53d8\u8868\u9762，\u4f46\u4e0d\u80fd\u76d6\u4f4f\u5f62\u4f53<\/h4>\n

\u7eb9\u7406\u7684\u4f5c\u7528\u662f\u589e\u52a0\u5fae\u5c0f\u53d8\u5316，\u4e0d\u662f\u66ff\u4ee3\u660e\u6697\u7ed3\u6784\u3002\u53ef\u4ee5\u5148\u8ba1\u7b97\u7eb9\u7406\u989c\u8272\u548c\u57fa\u7840\u8272\u7684\u6df7\u5408：<\/p>\n

function<\/span> mixColor<\/span>(<\/span>base,<\/span> texture,<\/span> amount<\/span>)<\/span> {<\/span>
\n const<\/span> t =<\/span> Math.<\/span>max<\/span>(<\/span>0<\/span>,<\/span> Math.<\/span>min<\/span>(<\/span>1<\/span>,<\/span> amount)<\/span>)<\/span>;<\/span><\/p>\n

return<\/span> {<\/span>
\n r<\/span>:<\/span> base.<\/span>r *<\/span> (<\/span>1<\/span> –<\/span> t)<\/span> +<\/span> texture.<\/span>r *<\/span> t,<\/span>
\n g<\/span>:<\/span> base.<\/span>g *<\/span> (<\/span>1<\/span> –<\/span> t)<\/span> +<\/span> texture.<\/span>g *<\/span> t,<\/span>
\n b<\/span>:<\/span> base.<\/span>b *<\/span> (<\/span>1<\/span> –<\/span> t)<\/span> +<\/span> texture.<\/span>b *<\/span> t,<\/span>
\n }<\/span>;<\/span>
\n}<\/span><\/p>\n

const<\/span> base =<\/span> {<\/span> r<\/span>:<\/span> 160<\/span>,<\/span> g<\/span>:<\/span> 120<\/span>,<\/span> b<\/span>:<\/span> 80<\/span> }<\/span>;<\/span>
\nconst<\/span> texture =<\/span> {<\/span> r<\/span>:<\/span> 100<\/span>,<\/span> g<\/span>:<\/span> 75<\/span>,<\/span> b<\/span>:<\/span> 45<\/span> }<\/span>;<\/span><\/p>\n

console.<\/span>log<\/span>(<\/span>mixColor<\/span>(<\/span>base,<\/span> texture,<\/span> 0.2<\/span>)<\/span>)<\/span>;<\/span><\/p>\n

amount \u4e3a 0 \u65f6\u5b8c\u5168\u4f7f\u7528\u57fa\u7840\u8272，\u4e3a 1 \u65f6\u5b8c\u5168\u4f7f\u7528\u7eb9\u7406\u8272\u3002\u7eb8\u5f20\u3001\u77f3\u6750\u7b49\u7c97\u7cd9\u8868\u9762\u53ef\u4ee5\u4f7f\u7528\u8f83\u9ad8\u7684\u7eb9\u7406\u53d8\u5316；\u73bb\u7483\u6216\u7eaf\u8272 UI \u9762\u677f\u901a\u5e38\u53ea\u9700\u8981\u5f88\u4f4e\u7684\u7eb9\u7406\u5f3a\u5ea6，\u5426\u5219\u4f1a\u7834\u574f\u6e05\u6670\u5ea6\u3002<\/p>\n

\u5728 Canvas \u4e2d，\u7eb9\u7406\u53ef\u4ee5\u901a\u8fc7\u79bb\u5c4f\u753b\u5e03\u5148\u751f\u6210，\u518d\u4ee5\u900f\u660e\u5ea6\u53e0\u52a0：<\/p>\n

function<\/span> createNoiseLayer<\/span>(<\/span>width,<\/span> height,<\/span> random =<\/span> Math.<\/span>random<\/span>)<\/span> {<\/span>
\n const<\/span> canvas =<\/span> document.<\/span>createElement<\/span>(<\/span>'canvas'<\/span>)<\/span>;<\/span>
\n canvas.<\/span>width =<\/span> width;<\/span>
\n canvas.<\/span>height =<\/span> height;<\/span><\/p>\n

const<\/span> ctx =<\/span> canvas.<\/span>getContext<\/span>(<\/span>'2d'<\/span>)<\/span>;<\/span>
\n const<\/span> image =<\/span> ctx.<\/span>createImageData<\/span>(<\/span>width,<\/span> height)<\/span>;<\/span><\/p>\n

for<\/span> (<\/span>let<\/span> i =<\/span> 0<\/span>;<\/span> i <<\/span> image.<\/span>data.<\/span>length;<\/span> i +=<\/span> 4<\/span>)<\/span> {<\/span>
\n const<\/span> value =<\/span> Math.<\/span>floor<\/span>(<\/span>random<\/span>(<\/span>)<\/span> *<\/span> 256<\/span>)<\/span>;<\/span>
\n image.<\/span>data[<\/span>i]<\/span> =<\/span> value;<\/span>
\n image.<\/span>data[<\/span>i +<\/span> 1<\/span>]<\/span> =<\/span> value;<\/span>
\n image.<\/span>data[<\/span>i +<\/span> 2<\/span>]<\/span> =<\/span> value;<\/span>
\n image.<\/span>data[<\/span>i +<\/span> 3<\/span>]<\/span> =<\/span> 24<\/span>;<\/span>
\n }<\/span><\/p>\n

ctx.<\/span>putImageData<\/span>(<\/span>image,<\/span> 0<\/span>,<\/span> 0<\/span>)<\/span>;<\/span>
\n return<\/span> canvas;<\/span>
\n}<\/span><\/p>\n

const<\/span> noiseLayer =<\/span> createNoiseLayer<\/span>(<\/span>128<\/span>,<\/span> 128<\/span>)<\/span>;<\/span><\/p>\n

\u6bcf\u4e2a\u901a\u9053\u4f7f\u7528 0～255，Alpha 24 \u7ea6\u7b49\u4e8e 0.094\u3002\u4f4e Alpha \u8ba9\u7eb9\u7406\u53ea\u4ea7\u751f\u8f7b\u5fae\u53d8\u5316，\u4e0d\u4f1a\u8986\u76d6\u4e3b\u4f53\u3002random \u53c2\u6570\u53ef\u4ee5\u66ff\u6362\u4e3a\u56fa\u5b9a\u51fd\u6570，\u8ba9\u6d4b\u8bd5\u65f6\u7684\u7eb9\u7406\u53ef\u590d\u73b0\u3002<\/p>\n

4. \u7eb9\u7406\u91c7\u6837\u65b9\u5f0f\u4e5f\u4f1a\u6539\u53d8\u6750\u8d28\u89c2\u611f<\/h4>\n

\u540c\u4e00\u5f20\u7eb9\u7406\u5728\u4e0d\u540c\u7f29\u653e\u65b9\u5f0f\u4e0b\u53ef\u80fd\u8868\u73b0\u4e3a\u6e05\u6670\u9897\u7c92\u3001\u6a21\u7cca\u6591\u5757\u6216\u95ea\u70c1\u566a\u58f0\u3002Canvas 2D \u53ef\u4ee5\u63a7\u5236\u56fe\u50cf\u5e73\u6ed1：<\/p>\n

function<\/span> drawTextureSample<\/span>(<\/span>ctx,<\/span> image,<\/span> x,<\/span> y,<\/span> width,<\/span> height,<\/span> smoothing<\/span>)<\/span> {<\/span>
\n ctx.<\/span>save<\/span>(<\/span>)<\/span>;<\/span>
\n ctx.<\/span>imageSmoothingEnabled =<\/span> smoothing;<\/span>
\n ctx.<\/span>globalAlpha =<\/span> 0.35<\/span>;<\/span>
\n ctx.<\/span>drawImage<\/span>(<\/span>image,<\/span> x,<\/span> y,<\/span> width,<\/span> height)<\/span>;<\/span>
\n ctx.<\/span>restore<\/span>(<\/span>)<\/span>;<\/span>
\n}<\/span><\/p>\n

drawTextureSample<\/span>(<\/span>ctx,<\/span> image,<\/span> 20<\/span>,<\/span> 20<\/span>,<\/span> 96<\/span>,<\/span> 96<\/span>,<\/span> true<\/span>)<\/span>;<\/span>
\ndrawTextureSample<\/span>(<\/span>ctx,<\/span> image,<\/span> 140<\/span>,<\/span> 20<\/span>,<\/span> 96<\/span>,<\/span> 96<\/span>,<\/span> false<\/span>)<\/span>;<\/span><\/p>\n

imageSmoothingEnabled \u4e3a true \u65f6，\u7f29\u653e\u540e\u7684\u8fb9\u7f18\u66f4\u5e73\u6ed1；\u4e3a false \u65f6，\u50cf\u7d20\u8fb9\u754c\u66f4\u6e05\u6670，\u9002\u5408\u50cf\u7d20\u98ce\u7eb9\u7406\u3002\u7eb9\u7406\u5c3a\u5bf8\u3001\u5bf9\u8c61\u5c3a\u5bf8\u548c\u7f29\u653e\u6bd4\u4f8b\u5fc5\u987b\u4e00\u8d77\u8003\u8651：\u4e00\u5f20\u8fc7\u5927\u7684\u566a\u58f0\u56fe\u7f29\u5c0f\u540e\u53ef\u80fd\u53d8\u6210\u810f\u7070\u5757，\u4e00\u5f20\u8fc7\u5c0f\u7684\u56fe\u653e\u5927\u540e\u53ef\u80fd\u51fa\u73b0\u660e\u663e\u91cd\u590d\u3002<\/p>\n

\u5bf9\u4e8e WebGL \u7eb9\u7406，\u8fd8\u8981\u533a\u5206\u8fc7\u6ee4\u548c\u56fe\u96c6\u8fb9\u7f18：<\/p>\n

function<\/span> configureMaterialTexture<\/span>(<\/span>gl,<\/span> texture,<\/span> linear<\/span>)<\/span> {<\/span>
\n gl.<\/span>bindTexture<\/span>(<\/span>gl.<\/span>TEXTURE_2D<\/span>,<\/span> texture)<\/span>;<\/span><\/p>\n

const<\/span> filter =<\/span> linear ?<\/span> gl.<\/span>LINEAR<\/span> :<\/span> gl.<\/span>NEAREST<\/span>;<\/span>
\n gl.<\/span>texParameteri<\/span>(<\/span>gl.<\/span>TEXTURE_2D<\/span>,<\/span> gl.<\/span>TEXTURE_MIN_FILTER<\/span>,<\/span> filter)<\/span>;<\/span>
\n gl.<\/span>texParameteri<\/span>(<\/span>gl.<\/span>TEXTURE_2D<\/span>,<\/span> gl.<\/span>TEXTURE_MAG_FILTER<\/span>,<\/span> filter)<\/span>;<\/span>
\n gl.<\/span>texParameteri<\/span>(<\/span>gl.<\/span>TEXTURE_2D<\/span>,<\/span> gl.<\/span>TEXTURE_WRAP_S<\/span>,<\/span> gl.<\/span>CLAMP_TO_EDGE<\/span>)<\/span>;<\/span>
\n gl.<\/span>texParameteri<\/span>(<\/span>gl.<\/span>TEXTURE_2D<\/span>,<\/span> gl.<\/span>TEXTURE_WRAP_T<\/span>,<\/span> gl.<\/span>CLAMP_TO_EDGE<\/span>)<\/span>;<\/span><\/p>\n

gl.<\/span>bindTexture<\/span>(<\/span>gl.<\/span>TEXTURE_2D<\/span>,<\/span> null<\/span>)<\/span>;<\/span>
\n}<\/span><\/p>\n

LINEAR \u9002\u5408\u8fde\u7eed\u6750\u8d28\u548c\u7f29\u653e\u56fe\u50cf，NEAREST \u9002\u5408\u9700\u8981\u4fdd\u6301\u50cf\u7d20\u8fb9\u754c\u7684\u7eb9\u7406\u3002CLAMP_TO_EDGE \u53ef\u4ee5\u51cf\u5c11\u5355\u5f20\u7eb9\u7406\u91c7\u6837\u5230\u5916\u90e8\u989c\u8272\u7684\u673a\u4f1a，\u4f46\u56fe\u96c6\u4ecd\u7136\u9700\u8981\u4e3a\u6bcf\u4e2a\u5b50\u56fe\u9884\u7559\u8fb9\u8ddd\u3002<\/p>\n

5. \u7528\u6750\u8d28\u914d\u7f6e\u628a\u5dee\u5f02\u96c6\u4e2d\u8d77\u6765<\/h4>\n

\u5f53\u4e0d\u540c\u5bf9\u8c61\u62e5\u6709\u4e0d\u540c\u6750\u8d28\u65f6，\u5e94\u628a\u5dee\u5f02\u653e\u5165\u914d\u7f6e，\u800c\u4e0d\u662f\u5728\u7ed8\u5236\u51fd\u6570\u4e2d\u5199\u4e00\u5806\u5bf9\u8c61\u540d\u79f0\u5224\u65ad：<\/p>\n

const<\/span> materials =<\/span> {<\/span>
\n glass<\/span>:<\/span> {<\/span>
\n baseColor<\/span>:<\/span> '#65b9e8'<\/span>,<\/span>
\n roughness<\/span>:<\/span> 0.08<\/span>,<\/span>
\n textureAmount<\/span>:<\/span> 0.02<\/span>,<\/span>
\n highlightAlpha<\/span>:<\/span> 0.8<\/span>,<\/span>
\n }<\/span>,<\/span>
\n paper<\/span>:<\/span> {<\/span>
\n baseColor<\/span>:<\/span> '#d6b98c'<\/span>,<\/span>
\n roughness<\/span>:<\/span> 0.82<\/span>,<\/span>
\n textureAmount<\/span>:<\/span> 0.22<\/span>,<\/span>
\n highlightAlpha<\/span>:<\/span> 0.25<\/span>,<\/span>
\n }<\/span>,<\/span>
\n metal<\/span>:<\/span> {<\/span>
\n baseColor<\/span>:<\/span> '#77818d'<\/span>,<\/span>
\n roughness<\/span>:<\/span> 0.28<\/span>,<\/span>
\n textureAmount<\/span>:<\/span> 0.08<\/span>,<\/span>
\n highlightAlpha<\/span>:<\/span> 0.9<\/span>,<\/span>
\n }<\/span>,<\/span>
\n}<\/span>;<\/span><\/p>\n

function<\/span> describeMaterial<\/span>(<\/span>material<\/span>)<\/span> {<\/span>
\n return<\/span> {<\/span>
\n highlight<\/span>:<\/span> getHighlightStyle<\/span>(<\/span>material.<\/span>roughness)<\/span>,<\/span>
\n textureAmount<\/span>:<\/span> material.<\/span>textureAmount,<\/span>
\n highlightAlpha<\/span>:<\/span> material.<\/span>highlightAlpha,<\/span>
\n }<\/span>;<\/span>
\n}<\/span><\/p>\n

console.<\/span>log<\/span>(<\/span>describeMaterial<\/span>(<\/span>materials.<\/span>glass)<\/span>)<\/span>;<\/span>
\nconsole.<\/span>log<\/span>(<\/span>describeMaterial<\/span>(<\/span>materials.<\/span>paper)<\/span>)<\/span>;<\/span><\/p>\n

glass\u3001paper \u548c metal \u7684\u989c\u8272\u4e0d\u540c，\u4f46\u771f\u6b63\u533a\u5206\u5b83\u4eec\u7684\u662f roughness\u3001textureAmount \u548c highlightAlpha \u7684\u7ec4\u5408\u3002\u914d\u7f6e\u5bf9\u8c61\u8fd8\u65b9\u4fbf\u5728\u540c\u4e00\u573a\u666f\u4e2d\u4fdd\u6301\u4e00\u81f4：\u540c\u7c7b\u5bf9\u8c61\u4f7f\u7528\u540c\u4e00\u5957\u6750\u8d28\u53c2\u6570，\u6539\u53d8\u4e3b\u9898\u65f6\u53ea\u6539\u914d\u7f6e，\u4e0d\u6539\u7b97\u6cd5\u3002<\/p>\n

\u6750\u8d28\u533a\u5206\u7684\u57fa\u672c\u987a\u5e8f\u662f：\u5148\u7528\u9ad8\u5149\u96c6\u4e2d\u7a0b\u5ea6\u533a\u5206\u8868\u9762，\u518d\u7528\u7eb9\u7406\u5f3a\u5ea6\u8865\u5145\u5fae\u5c0f\u53d8\u5316，\u6700\u540e\u6839\u636e\u7f29\u653e\u6bd4\u4f8b\u9009\u62e9\u5408\u9002\u7684\u8fc7\u6ee4\u65b9\u5f0f\u3002\u53ea\u8981\u8fd9\u4e9b\u53c2\u6570\u548c\u5149\u6e90\u65b9\u5411\u3001\u5bf9\u8c61\u5c3a\u5bf8\u4fdd\u6301\u4e00\u81f4，Canvas 2D \u4e5f\u80fd\u7528\u8f83\u4f4e\u6210\u672c\u5236\u9020\u73bb\u7483\u3001\u7eb8\u5f20\u3001\u91d1\u5c5e\u7b49\u4e0d\u540c\u7684\u8868\u9762\u6697\u793a\u3002\u4e0b\u4e00\u8282\u5c06\u7ee7\u7eed\u5904\u7406\u906e\u6321\u3001\u900f\u660e\u5ea6\u548c\u9634\u5f71，\u8bf4\u660e\u4e0d\u540c\u5bf9\u8c61\u5982\u4f55\u5f62\u6210\u524d\u540e\u5c42\u6b21\u3002<\/p>\n

\u989c\u8272\u5728 Web \u7279\u6548\u4e2d\u4e0d\u53ea\u662f\u7ed9\u5bf9\u8c61\u6362\u4e00\u4ef6\u5916\u8863\u3002\u660e\u6697\u5dee\u51b3\u5b9a\u8f6e\u5ed3\u548c\u4f53\u79ef，\u9971\u548c\u5ea6\u5f71\u54cd\u989c\u8272\u7684\u8ddd\u79bb\u611f\u548c\u6ce8\u610f\u529b，\u5bf9\u6bd4\u5ea6\u51b3\u5b9a\u5bf9\u8c61\u80fd\u5426\u4ece\u80cc\u666f\u4e2d\u5206\u79bb\u51fa\u6765\u3002\u628a\u8fd9\u4e09\u4e2a\u56e0\u7d20\u62c6\u5f00\u540e，\u5c31\u80fd\u7528\u53c2\u6570\u89e3\u91ca\u201c\u4e3a\u4ec0\u4e48\u53d1\u5e73\u201d，\u800c\u4e0d\u662f\u4e0d\u65ad\u8bd5\u4e0d\u540c\u7684\u5341\u516d\u8fdb\u5236\u989c\u8272\u3002<\/p>\n

\u56db\u3001\u524d\u540e\u5173\u7cfb\u5982\u4f55\u88ab\u770b\u89c1：\u906e\u6321\u3001\u900f\u660e\u5ea6\u4e0e\u9634\u5f71\u600e\u6837\u5efa\u7acb\u5c42\u6b21<\/h3>\n

\u753b\u9762\u4e2d\u7684\u524d\u540e\u5173\u7cfb\u4e0d\u662f\u81ea\u52a8\u51fa\u73b0\u7684\u3002\u6d4f\u89c8\u5668\u53ea\u4f1a\u6309\u7167\u7ed8\u5236\u547d\u4ee4\u3001\u50cf\u7d20 Alpha \u548c\u9634\u5f71\u53c2\u6570\u5408\u6210\u7ed3\u679c，\u5f00\u53d1\u8005\u9700\u8981\u628a\u201c\u8c01\u5728\u524d\u3001\u8c01\u5728\u540e\u3001\u8ddd\u79bb\u6709\u591a\u8fdc\u201d\u8f6c\u6362\u6210\u987a\u5e8f\u3001\u900f\u660e\u5ea6\u3001\u5c3a\u5bf8\u548c\u504f\u79fb\u3002\u53ea\u8981\u8fd9\u4e9b\u7ebf\u7d22\u4e92\u76f8\u77db\u76fe，\u5143\u7d20\u5c31\u4f1a\u7c98\u5728\u4e00\u8d77，\u6216\u8005\u770b\u8d77\u6765\u50cf\u6f02\u6d6e\u5728\u540c\u4e00\u5e73\u9762\u3002<\/p>\n

1. \u7ed8\u5236\u987a\u5e8f\u51b3\u5b9a\u8c01\u8986\u76d6\u8c01<\/h4>\n

\u5728 Canvas 2D \u4e2d，\u540e\u7ed8\u5236\u7684\u5bf9\u8c61\u4f1a\u6210\u4e3a\u65b0\u7684\u6e90，\u6309\u7167\u5f53\u524d\u6df7\u5408\u6a21\u5f0f\u5f71\u54cd\u5df2\u7ecf\u5b58\u5728\u7684\u76ee\u6807\u50cf\u7d20\u3002\u53ef\u4ee5\u5148\u7528 depth \u6392\u5e8f：<\/p>\n

function<\/span> sortByDepth<\/span>(<\/span>objects<\/span>)<\/span> {<\/span>
\n return<\/span> [<\/span>…<\/span>objects]<\/span>.<\/span>sort<\/span>(<\/span>(<\/span>a,<\/span> b<\/span>)<\/span> =><\/span> a.<\/span>depth –<\/span> b.<\/span>depth)<\/span>;<\/span>
\n}<\/span><\/p>\n

const<\/span> objects =<\/span> [<\/span>
\n {<\/span> name<\/span>:<\/span> 'front'<\/span>,<\/span> depth<\/span>:<\/span> 2<\/span>,<\/span> color<\/span>:<\/span> '#ff8066'<\/span> }<\/span>,<\/span>
\n {<\/span> name<\/span>:<\/span> 'back'<\/span>,<\/span> depth<\/span>:<\/span> 0<\/span>,<\/span> color<\/span>:<\/span> '#5080c0'<\/span> }<\/span>,<\/span>
\n {<\/span> name<\/span>:<\/span> 'middle'<\/span>,<\/span> depth<\/span>:<\/span> 1<\/span>,<\/span> color<\/span>:<\/span> '#80c080'<\/span> }<\/span>,<\/span>
\n]<\/span>;<\/span><\/p>\n

console.<\/span>log<\/span>(<\/span>sortByDepth<\/span>(<\/span>objects)<\/span>.<\/span>map<\/span>(<\/span>(<\/span>object<\/span>)<\/span> =><\/span> object.<\/span>name)<\/span>)<\/span>;<\/span>
\n\/\/ ['back', 'middle', 'front']<\/span><\/p>\n

depth \u53ea\u662f\u5f53\u524d\u573a\u666f\u7684\u6392\u5e8f\u503c，\u6570\u503c\u8d8a\u5927\u8868\u793a\u8d8a\u9760\u524d\u3002\u5148\u7ed8\u5236\u540e\u9762\u7684\u5bf9\u8c61，\u518d\u7ed8\u5236\u524d\u9762\u7684\u5bf9\u8c61，\u906e\u6321\u5173\u7cfb\u624d\u7b26\u5408\u9884\u671f\u3002\u82e5\u987a\u5e8f\u53cd\u4e86，\u5373\u4f7f\u989c\u8272\u548c\u900f\u660e\u5ea6\u6b63\u786e，\u7a7a\u95f4\u5173\u7cfb\u4e5f\u4f1a\u6df7\u4e71\u3002<\/p>\n

\u53ef\u4ee5\u628a\u6392\u5e8f\u76f4\u63a5\u63a5\u5165\u7ed8\u5236：<\/p>\n

function<\/span> renderDepthOrdered<\/span>(<\/span>ctx,<\/span> objects,<\/span> drawObject<\/span>)<\/span> {<\/span>
\n const<\/span> ordered =<\/span> sortByDepth<\/span>(<\/span>objects)<\/span>;<\/span><\/p>\n

for<\/span> (<\/span>const<\/span> object of<\/span> ordered)<\/span> {<\/span>
\n drawObject<\/span>(<\/span>ctx,<\/span> object)<\/span>;<\/span>
\n }<\/span>
\n}<\/span><\/p>\n

function<\/span> drawRect<\/span>(<\/span>ctx,<\/span> object<\/span>)<\/span> {<\/span>
\n ctx.<\/span>save<\/span>(<\/span>)<\/span>;<\/span>
\n ctx.<\/span>fillStyle =<\/span> object.<\/span>color;<\/span>
\n ctx.<\/span>globalAlpha =<\/span> object.<\/span>alpha ??<\/span> 1<\/span>;<\/span>
\n ctx.<\/span>fillRect<\/span>(<\/span>object.<\/span>x,<\/span> object.<\/span>y,<\/span> object.<\/span>width,<\/span> object.<\/span>height)<\/span>;<\/span>
\n ctx.<\/span>restore<\/span>(<\/span>)<\/span>;<\/span>
\n}<\/span><\/p>\n

renderDepthOrdered<\/span>(<\/span>ctx,<\/span> objects,<\/span> drawRect)<\/span>;<\/span><\/p>\n

renderDepthOrdered \u8d1f\u8d23\u987a\u5e8f，drawRect \u8d1f\u8d23\u8868\u73b0\u3002\u8fd9\u6837\u66ff\u6362\u56fe\u5f62\u7c7b\u578b\u65f6，\u4e0d\u9700\u8981\u91cd\u65b0\u5b9e\u73b0\u6df1\u5ea6\u6392\u5e8f\u3002<\/p>\n

2. \u900f\u660e\u5ea6\u51b3\u5b9a\u906e\u6321\u662f\u6e05\u695a\u8fd8\u662f\u67d4\u548c<\/h4>\n

\u5b8c\u5168\u4e0d\u900f\u660e\u7684\u5bf9\u8c61\u4f1a\u76f4\u63a5\u8986\u76d6\u540e\u9762\u7684\u5bf9\u8c61，\u534a\u900f\u660e\u5bf9\u8c61\u5219\u4f1a\u4fdd\u7559\u4e00\u90e8\u5206\u76ee\u6807\u989c\u8272\u3002\u53ef\u4ee5\u7528 Alpha \u5408\u6210\u8ba1\u7b97\u4e24\u5c42\u8986\u76d6\u540e\u7684\u7ed3\u679c：<\/p>\n

function<\/span> compositeAlpha<\/span>(<\/span>sourceAlpha,<\/span> destinationAlpha<\/span>)<\/span> {<\/span>
\n return<\/span> sourceAlpha +<\/span> destinationAlpha *<\/span> (<\/span>1<\/span> –<\/span> sourceAlpha)<\/span>;<\/span>
\n}<\/span><\/p>\n

console.<\/span>log<\/span>(<\/span>compositeAlpha<\/span>(<\/span>0.5<\/span>,<\/span> 1<\/span>)<\/span>)<\/span>;<\/span> \/\/ 1<\/span>
\nconsole.<\/span>log<\/span>(<\/span>compositeAlpha<\/span>(<\/span>0.5<\/span>,<\/span> 0.5<\/span>)<\/span>)<\/span>;<\/span> \/\/ 0.75<\/span><\/p>\n

\u4e24\u4e2a Alpha \u90fd\u4e3a 0.5 \u65f6，\u7ed3\u679c\u4e0d\u662f\u7b80\u5355\u76f8\u52a0\u4e3a 1，\u800c\u662f 0.5 + 0.5 \u00d7 0.5 = 0.75\u3002\u900f\u660e\u5bf9\u8c61\u8d8a\u591a，\u91cd\u53e0\u533a\u57df\u8d8a\u5bb9\u6613\u53d8\u6697\u6216\u53d8\u4eae，\u56e0\u6b64\u73bb\u7483\u3001\u70df\u96fe\u548c\u5149\u6655\u4e0d\u80fd\u65e0\u9650\u53e0\u52a0\u3002<\/p>\n

\u7ed8\u5236\u900f\u660e\u5c42\u65f6，\u5e94\u660e\u786e\u4fdd\u5b58\u548c\u6062\u590d\u72b6\u6001：<\/p>\n

function<\/span> drawTransparentLayer<\/span>(<\/span>ctx,<\/span> object<\/span>)<\/span> {<\/span>
\n ctx.<\/span>save<\/span>(<\/span>)<\/span>;<\/span>
\n ctx.<\/span>globalCompositeOperation =<\/span> 'source-over'<\/span>;<\/span>
\n ctx.<\/span>globalAlpha =<\/span> object.<\/span>alpha;<\/span>
\n ctx.<\/span>fillStyle =<\/span> object.<\/span>color;<\/span>
\n ctx.<\/span>fillRect<\/span>(<\/span>object.<\/span>x,<\/span> object.<\/span>y,<\/span> object.<\/span>width,<\/span> object.<\/span>height)<\/span>;<\/span>
\n ctx.<\/span>restore<\/span>(<\/span>)<\/span>;<\/span>
\n}<\/span><\/p>\n

drawTransparentLayer<\/span>(<\/span>ctx,<\/span> {<\/span>
\n x<\/span>:<\/span> 80<\/span>,<\/span>
\n y<\/span>:<\/span> 60<\/span>,<\/span>
\n width<\/span>:<\/span> 160<\/span>,<\/span>
\n height<\/span>:<\/span> 80<\/span>,<\/span>
\n color<\/span>:<\/span> '#70b8ff'<\/span>,<\/span>
\n alpha<\/span>:<\/span> 0.35<\/span>,<\/span>
\n}<\/span>)<\/span>;<\/span><\/p>\n

globalAlpha \u662f\u5f53\u524d\u6e90\u56fe\u5f62\u7684\u6574\u4f53\u900f\u660e\u5ea6，\u8303\u56f4\u4e3a 0～1；source-over \u662f\u666e\u901a\u6e90\u8986\u76d6\u6a21\u5f0f\u3002save \u548c restore \u9632\u6b62\u900f\u660e\u5ea6\u3001\u7ec4\u5408\u6a21\u5f0f\u548c\u989c\u8272\u5f71\u54cd\u540e\u9762\u7684\u5bf9\u8c61\u3002<\/p>\n

3. \u9634\u5f71\u8981\u670d\u52a1\u4e8e\u63a5\u89e6\u5173\u7cfb，\u800c\u4e0d\u662f\u53ea\u505a\u88c5\u9970<\/h4>\n

\u9634\u5f71\u6700\u91cd\u8981\u7684\u4f5c\u7528\u662f\u8bf4\u660e\u5bf9\u8c61\u4e0e\u80cc\u666f\u6216\u5176\u4ed6\u8868\u9762\u4e4b\u95f4\u7684\u8ddd\u79bb\u3002\u9634\u5f71\u504f\u79fb\u8d8a\u5927，\u901a\u5e38\u8868\u793a\u5bf9\u8c61\u79bb\u627f\u8f7d\u9762\u8d8a\u8fdc；\u504f\u79fb\u8d8a\u5c0f，\u8d8a\u50cf\u8d34\u5728\u8868\u9762\u4e0a：<\/p>\n

function<\/span> shadowForHeight<\/span>(<\/span>height<\/span>)<\/span> {<\/span>
\n return<\/span> {<\/span>
\n offsetX<\/span>:<\/span> height *<\/span> 0.25<\/span>,<\/span>
\n offsetY<\/span>:<\/span> height *<\/span> 0.5<\/span>,<\/span>
\n blur<\/span>:<\/span> 4<\/span> +<\/span> height *<\/span> 0.8<\/span>,<\/span>
\n alpha<\/span>:<\/span> Math.<\/span>max<\/span>(<\/span>0.12<\/span>,<\/span> 0.42<\/span> –<\/span> height *<\/span> 0.02<\/span>)<\/span>,<\/span>
\n }<\/span>;<\/span>
\n}<\/span><\/p>\n

console.<\/span>log<\/span>(<\/span>shadowForHeight<\/span>(<\/span>4<\/span>)<\/span>)<\/span>;<\/span>
\nconsole.<\/span>log<\/span>(<\/span>shadowForHeight<\/span>(<\/span>18<\/span>)<\/span>)<\/span>;<\/span><\/p>\n

height \u7684\u5355\u4f4d\u662f px，offsetX\u3001offsetY \u548c blur \u4e5f\u662f px，alpha \u4f7f\u7528 0～1\u3002\u8fd9\u91cc\u7684\u6620\u5c04\u662f\u89c6\u89c9\u8fd1\u4f3c：\u9ad8\u5ea6\u589e\u52a0\u65f6\u9634\u5f71\u504f\u79fb\u548c\u6a21\u7cca\u589e\u5927，\u4f46\u9634\u5f71\u900f\u660e\u5ea6\u964d\u4f4e\u3002\u82e5\u9634\u5f71\u65b9\u5411\u4e0e\u5149\u6e90\u65b9\u5411\u77db\u76fe，\u7269\u4f53\u4f1a\u540c\u65f6\u4ea7\u751f\u4e24\u4e2a\u4e0d\u4e00\u81f4\u7684\u7a7a\u95f4\u7ebf\u7d22\u3002<\/p>\n

\u53ef\u4ee5\u628a\u9634\u5f71\u53c2\u6570\u5e94\u7528\u5230 Canvas：<\/p>\n

function<\/span> drawLiftedCard<\/span>(<\/span>ctx,<\/span> card<\/span>)<\/span> {<\/span>
\n const<\/span> shadow =<\/span> shadowForHeight<\/span>(<\/span>card.<\/span>height)<\/span>;<\/span><\/p>\n

ctx.<\/span>save<\/span>(<\/span>)<\/span>;<\/span>
\n ctx.<\/span>shadowColor =<\/span> 'rgba(0, 0, 0, '<\/span> +<\/span> shadow.<\/span>alpha +<\/span> ')'<\/span>;<\/span>
\n ctx.<\/span>shadowBlur =<\/span> shadow.<\/span>blur;<\/span>
\n ctx.<\/span>shadowOffsetX =<\/span> shadow.<\/span>offsetX;<\/span>
\n ctx.<\/span>shadowOffsetY =<\/span> shadow.<\/span>offsetY;<\/span>
\n ctx.<\/span>fillStyle =<\/span> card.<\/span>color;<\/span>
\n ctx.<\/span>fillRect<\/span>(<\/span>card.<\/span>x,<\/span> card.<\/span>y,<\/span> card.<\/span>width,<\/span> card.<\/span>height)<\/span>;<\/span>
\n ctx.<\/span>restore<\/span>(<\/span>)<\/span>;<\/span>
\n}<\/span><\/p>\n

drawLiftedCard<\/span>(<\/span>ctx,<\/span> {<\/span>
\n x<\/span>:<\/span> 80<\/span>,<\/span>
\n y<\/span>:<\/span> 180<\/span>,<\/span>
\n width<\/span>:<\/span> 180<\/span>,<\/span>
\n height<\/span>:<\/span> 70<\/span>,<\/span>
\n color<\/span>:<\/span> '#f0f5ff'<\/span>,<\/span>
\n height<\/span>:<\/span> 10<\/span>,<\/span>
\n}<\/span>)<\/span>;<\/span><\/p>\n

\u9634\u5f71\u5e94\u8be5\u4e0e\u5bf9\u8c61\u4e00\u8d77\u79fb\u52a8，\u4f46\u4e0d\u80fd\u628a shadowOffsetY \u8bef\u5f53\u6210\u5bf9\u8c61\u672c\u8eab\u7684 y \u5750\u6807\u3002\u5148\u786e\u5b9a\u5149\u6e90\u65b9\u5411，\u518d\u7edf\u4e00\u6240\u6709\u5bf9\u8c61\u7684\u9634\u5f71\u504f\u79fb，\u753b\u9762\u624d\u4e0d\u4f1a\u51fa\u73b0\u6bcf\u4e2a\u7269\u4f53\u5404\u81ea\u62e5\u6709\u4e00\u76cf\u706f\u7684\u60c5\u51b5\u3002<\/p>\n

4. \u8fdc\u8fd1\u8fd8\u53ef\u4ee5\u901a\u8fc7\u5c3a\u5bf8\u3001\u900f\u660e\u5ea6\u548c\u6a21\u7cca\u8868\u73b0<\/h4>\n

\u5f53\u5bf9\u8c61\u6ca1\u6709\u771f\u6b63\u7684\u4e09\u7ef4\u5750\u6807\u65f6，\u53ef\u4ee5\u628a\u6df1\u5ea6\u503c\u6620\u5c04\u6210\u51e0\u4e2a\u4e8c\u7ef4\u89c6\u89c9\u53c2\u6570：<\/p>\n

function<\/span> projectDepth<\/span>(<\/span>object,<\/span> camera<\/span>)<\/span> {<\/span>
\n const<\/span> distance =<\/span> Math.<\/span>max<\/span>(<\/span>0<\/span>,<\/span> object.<\/span>z –<\/span> camera.<\/span>near)<\/span>;<\/span>
\n const<\/span> normalized =<\/span> Math.<\/span>min<\/span>(<\/span>1<\/span>,<\/span> distance \/<\/span> camera.<\/span>range)<\/span>;<\/span><\/p>\n

return<\/span> {<\/span>
\n x<\/span>:<\/span> object.<\/span>x,<\/span>
\n y<\/span>:<\/span> object.<\/span>y,<\/span>
\n scale<\/span>:<\/span> 1<\/span> –<\/span> normalized *<\/span> 0.35<\/span>,<\/span>
\n alpha<\/span>:<\/span> 1<\/span> –<\/span> normalized *<\/span> 0.45<\/span>,<\/span>
\n blur<\/span>:<\/span> normalized *<\/span> 3<\/span>,<\/span>
\n }<\/span>;<\/span>
\n}<\/span><\/p>\n

const<\/span> projected =<\/span> projectDepth<\/span>(<\/span>
\n {<\/span> x<\/span>:<\/span> 200<\/span>,<\/span> y<\/span>:<\/span> 120<\/span>,<\/span> z<\/span>:<\/span> 60<\/span> }<\/span>,<\/span>
\n {<\/span> near<\/span>:<\/span> 0<\/span>,<\/span> range<\/span>:<\/span> 120<\/span> }<\/span>,<\/span>
\n)<\/span>;<\/span><\/p>\n

console.<\/span>log<\/span>(<\/span>projected)<\/span>;<\/span><\/p>\n

z\u3001near \u548c range \u4f7f\u7528\u540c\u4e00\u5957\u6df1\u5ea6\u5355\u4f4d，scale \u662f\u65e0\u91cf\u7eb2\u6bd4\u4f8b，alpha \u662f 0～1，blur \u662f px\u3002\u8fdc\u5904\u5bf9\u8c61\u7f29\u5c0f\u3001\u53d8\u6de1\u5e76\u7a0d\u5fae\u6a21\u7cca，\u80fd\u5e2e\u52a9\u773c\u775b\u5224\u65ad\u5c42\u6b21；\u4f46\u8fd9\u4e9b\u53d8\u5316\u5fc5\u987b\u4fdd\u6301\u65b9\u5411\u4e00\u81f4，\u4e0d\u80fd\u8ba9\u8fdc\u5904\u5bf9\u8c61\u53cd\u800c\u66f4\u5927\u3001\u66f4\u6e05\u6670\u3001\u66f4\u9971\u548c\u3002<\/p>\n

\u53ef\u4ee5\u628a scale \u5e94\u7528\u4e8e\u7ed8\u5236\u5c3a\u5bf8：<\/p>\n

function<\/span> drawProjectedCircle<\/span>(<\/span>ctx,<\/span> object,<\/span> projection<\/span>)<\/span> {<\/span>
\n ctx.<\/span>save<\/span>(<\/span>)<\/span>;<\/span>
\n ctx.<\/span>globalAlpha =<\/span> projection.<\/span>alpha;<\/span>
\n ctx.<\/span>fillStyle =<\/span> object.<\/span>color;<\/span>
\n ctx.<\/span>beginPath<\/span>(<\/span>)<\/span>;<\/span>
\n ctx.<\/span>arc<\/span>(<\/span>
\n projection.<\/span>x,<\/span>
\n projection.<\/span>y,<\/span>
\n object.<\/span>radius *<\/span> projection.<\/span>scale,<\/span>
\n 0<\/span>,<\/span>
\n Math.<\/span>PI<\/span> *<\/span> 2<\/span>,<\/span>
\n )<\/span>;<\/span>
\n ctx.<\/span>fill<\/span>(<\/span>)<\/span>;<\/span>
\n ctx.<\/span>restore<\/span>(<\/span>)<\/span>;<\/span>
\n}<\/span><\/p>\n

drawProjectedCircle<\/span>(<\/span>
\n ctx,<\/span>
\n {<\/span> color<\/span>:<\/span> '#ffb347'<\/span>,<\/span> radius<\/span>:<\/span> 24<\/span> }<\/span>,<\/span>
\n projected,<\/span>
\n)<\/span>;<\/span><\/p>\n

\u8fd9\u662f\u4e8c\u7ef4\u753b\u5e03\u4e2d\u7684\u666f\u6df1\u8fd1\u4f3c，\u4e0d\u662f\u5b8c\u6574\u900f\u89c6\u6295\u5f71\u3002\u5b83\u9002\u5408\u80cc\u666f\u7c92\u5b50\u3001\u8fdc\u666f\u5149\u70b9\u548c\u5c42\u53e0 UI，\u4f46\u4e0d\u9002\u5408\u66ff\u4ee3\u9700\u8981\u7cbe\u786e\u4e09\u7ef4\u906e\u6321\u7684 WebGL \u573a\u666f\u3002<\/p>\n

5. \u7528\u8c03\u8bd5\u5c42\u68c0\u67e5\u5c42\u6b21\u7ebf\u7d22\u662f\u5426\u4e92\u76f8\u77db\u76fe<\/h4>\n

\u5982\u679c\u753b\u9762\u4ecd\u7136\u50cf\u4e00\u5f20\u5e73\u9762，\u53ef\u4ee5\u628a depth\u3001Alpha \u548c\u9634\u5f71\u65b9\u5411\u76f4\u63a5\u753b\u51fa\u6765：<\/p>\n

function<\/span> drawLayerDebug<\/span>(<\/span>ctx,<\/span> object<\/span>)<\/span> {<\/span>
\n ctx.<\/span>save<\/span>(<\/span>)<\/span>;<\/span>
\n ctx.<\/span>strokeStyle =<\/span> '#ffb347'<\/span>;<\/span>
\n ctx.<\/span>lineWidth =<\/span> 1<\/span>;<\/span>
\n ctx.<\/span>strokeRect<\/span>(<\/span>object.<\/span>x,<\/span> object.<\/span>y,<\/span> object.<\/span>width,<\/span> object.<\/span>height)<\/span>;<\/span><\/p>\n

ctx.<\/span>fillStyle =<\/span> '#ffffff'<\/span>;<\/span>
\n ctx.<\/span>font =<\/span> '12px sans-serif'<\/span>;<\/span>
\n ctx.<\/span>fillText<\/span>(<\/span>
\n 'depth='<\/span> +<\/span> object.<\/span>depth +<\/span> ' alpha='<\/span> +<\/span> object.<\/span>alpha,<\/span>
\n object.<\/span>x,<\/span>
\n object.<\/span>y –<\/span> 6<\/span>,<\/span>
\n )<\/span>;<\/span><\/p>\n

ctx.<\/span>beginPath<\/span>(<\/span>)<\/span>;<\/span>
\n ctx.<\/span>moveTo<\/span>(<\/span>object.<\/span>x +<\/span> object.<\/span>width \/<\/span> 2<\/span>,<\/span> object.<\/span>y +<\/span> object.<\/span>height \/<\/span> 2<\/span>)<\/span>;<\/span>
\n ctx.<\/span>lineTo<\/span>(<\/span>
\n object.<\/span>x +<\/span> object.<\/span>width \/<\/span> 2<\/span> +<\/span> object.<\/span>shadowOffsetX,<\/span>
\n object.<\/span>y +<\/span> object.<\/span>height \/<\/span> 2<\/span> +<\/span> object.<\/span>shadowOffsetY,<\/span>
\n )<\/span>;<\/span>
\n ctx.<\/span>stroke<\/span>(<\/span>)<\/span>;<\/span>
\n ctx.<\/span>restore<\/span>(<\/span>)<\/span>;<\/span>
\n}<\/span><\/p>\n

drawLayerDebug<\/span>(<\/span>ctx,<\/span> {<\/span>
\n x<\/span>:<\/span> 40<\/span>,<\/span>
\n y<\/span>:<\/span> 40<\/span>,<\/span>
\n width<\/span>:<\/span> 120<\/span>,<\/span>
\n height<\/span>:<\/span> 60<\/span>,<\/span>
\n depth<\/span>:<\/span> 2<\/span>,<\/span>
\n alpha<\/span>:<\/span> 0.8<\/span>,<\/span>
\n shadowOffsetX<\/span>:<\/span> 6<\/span>,<\/span>
\n shadowOffsetY<\/span>:<\/span> 10<\/span>,<\/span>
\n}<\/span>)<\/span>;<\/span><\/p>\n

\u8c03\u8bd5\u6846\u663e\u793a\u5bf9\u8c61\u8303\u56f4，\u6587\u5b57\u663e\u793a depth \u548c alpha，\u7ebf\u6bb5\u663e\u793a\u9634\u5f71\u504f\u79fb\u65b9\u5411\u3002\u82e5 depth \u987a\u5e8f\u8868\u793a\u201c\u8d8a\u5927\u8d8a\u9760\u524d\u201d，\u4f46\u7ed8\u5236\u987a\u5e8f\u76f8\u53cd，\u5c31\u4f1a\u9a6c\u4e0a\u66b4\u9732；\u82e5\u5bf9\u8c61\u900f\u660e\u5ea6\u5f88\u4f4e\u5374\u6ca1\u6709\u4efb\u4f55\u540e\u666f\u900f\u51fa，\u5219\u5e94\u68c0\u67e5\u662f\u5426\u91cd\u590d\u8bbe\u7f6e\u4e86 Alpha \u6216\u4f7f\u7528\u4e86\u9519\u8bef\u7684\u6df7\u5408\u6a21\u5f0f\u3002<\/p>\n

\u5efa\u7acb\u5c42\u6b21\u65f6，\u53ef\u4ee5\u6309\u201c\u6392\u5e8f \u2192 \u906e\u6321 \u2192 \u900f\u660e \u2192 \u9634\u5f71 \u2192 \u666f\u6df1\u53c2\u6570\u201d\u7684\u987a\u5e8f\u5904\u7406\u3002\u6bcf\u589e\u52a0\u4e00\u79cd\u7ebf\u7d22，\u90fd\u8981\u786e\u8ba4\u5b83\u548c\u524d\u9762\u7684\u7ebf\u7d22\u65b9\u5411\u4e00\u81f4：\u524d\u666f\u66f4\u6e05\u695a\u3001\u540e\u666f\u66f4\u6de1，\u9760\u8fd1\u627f\u8f7d\u9762\u9634\u5f71\u66f4\u7d27，\u79bb\u5f00\u627f\u8f7d\u9762\u9634\u5f71\u66f4\u6563\u3002\u8fd9\u6837\u524d\u540e\u5173\u7cfb\u624d\u4e0d\u662f\u4f9d\u9760\u5355\u4e2a\u7279\u6548\u786c\u6491，\u800c\u662f\u7531\u591a\u79cd\u53ef\u63a7\u53c2\u6570\u5171\u540c\u8bf4\u660e\u3002\u4e0b\u4e00\u8282\u5c06\u628a\u8fd9\u4e9b\u4f4e\u6210\u672c\u8fd1\u4f3c\u7ec4\u5408\u8d77\u6765，\u5f62\u6210 Canvas 2D \u4e2d\u53ef\u590d\u7528\u7684\u771f\u5b9e\u611f\u65b9\u6848\u3002<\/p>\n

\u4e94\u3001\u4f4e\u6210\u672c\u89c6\u89c9\u8fd1\u4f3c：Canvas 2D \u5982\u4f55\u8865\u51fa\u771f\u5b9e\u611f<\/h3>\n

Canvas 2D \u4e0d\u63d0\u4f9b\u5b8c\u6574\u7684\u7269\u7406\u6750\u8d28\u7cfb\u7edf，\u4f46\u5b83\u62e5\u6709\u6e10\u53d8\u3001\u9634\u5f71\u3001\u900f\u660e\u5408\u6210\u3001\u7eb9\u7406\u548c\u79bb\u5c4f\u753b\u5e03\u7b49\u8db3\u591f\u5b9e\u7528\u7684\u5de5\u5177\u3002\u771f\u5b9e\u611f\u7684\u5173\u952e\u4e0d\u662f\u628a\u6240\u6709\u6548\u679c\u90fd\u6253\u5f00，\u800c\u662f\u8ba9\u6bcf\u4e00\u79cd\u6548\u679c\u627f\u62c5\u660e\u786e\u4efb\u52a1：\u6e10\u53d8\u8bf4\u660e\u5149\u7ebf\u65b9\u5411，\u9634\u5f71\u8bf4\u660e\u63a5\u89e6\u548c\u9ad8\u5ea6，\u900f\u660e\u5ea6\u8bf4\u660e\u53e0\u52a0\u5173\u7cfb，\u7eb9\u7406\u8bf4\u660e\u8868\u9762\u5dee\u5f02\u3002<\/p>\n

1. \u7528\u6e10\u53d8\u5148\u5efa\u7acb\u5149\u7ebf\u65b9\u5411<\/h4>\n

\u5e73\u9762\u989c\u8272\u7f3a\u5c11\u7a7a\u95f4\u65b9\u5411，\u7ebf\u6027\u6e10\u53d8\u53ef\u4ee5\u7528\u8f83\u4f4e\u6210\u672c\u6697\u793a\u4e0a\u4eae\u4e0b\u6697\u3001\u5de6\u4eae\u53f3\u6697\u7b49\u5149\u7167\u5173\u7cfb：<\/p>\n

function<\/span> drawLightPanel<\/span>(<\/span>ctx,<\/span> x,<\/span> y,<\/span> width,<\/span> height<\/span>)<\/span> {<\/span>
\n const<\/span> gradient =<\/span> ctx.<\/span>createLinearGradient<\/span>(<\/span>x,<\/span> y,<\/span> x,<\/span> y +<\/span> height)<\/span>;<\/span>
\n gradient.<\/span>addColorStop<\/span>(<\/span>0<\/span>,<\/span> '#d9f2ff'<\/span>)<\/span>;<\/span>
\n gradient.<\/span>addColorStop<\/span>(<\/span>0.45<\/span>,<\/span> '#62b6e8'<\/span>)<\/span>;<\/span>
\n gradient.<\/span>addColorStop<\/span>(<\/span>1<\/span>,<\/span> '#1e5b9c'<\/span>)<\/span>;<\/span><\/p>\n

ctx.<\/span>save<\/span>(<\/span>)<\/span>;<\/span>
\n ctx.<\/span>fillStyle =<\/span> gradient;<\/span>
\n ctx.<\/span>fillRect<\/span>(<\/span>x,<\/span> y,<\/span> width,<\/span> height)<\/span>;<\/span>
\n ctx.<\/span>restore<\/span>(<\/span>)<\/span>;<\/span>
\n}<\/span><\/p>\n

drawLightPanel<\/span>(<\/span>ctx,<\/span> 40<\/span>,<\/span> 40<\/span>,<\/span> 220<\/span>,<\/span> 140<\/span>)<\/span>;<\/span><\/p>\n

\u6e10\u53d8\u505c\u6b62\u70b9\u7684\u4f4d\u7f6e\u662f 0～1 \u7684\u76f8\u5bf9\u8fdb\u5ea6，x\u3001y\u3001width\u3001height \u4f7f\u7528 Canvas \u50cf\u7d20\u3002\u9876\u90e8\u4eae\u8272\u3001\u4e2d\u90e8\u57fa\u7840\u8272\u548c\u5e95\u90e8\u6697\u8272\u5171\u540c\u8bf4\u660e\u5149\u7ebf\u4ece\u4e0a\u65b9\u7167\u6765\u3002\u5148\u786e\u5b9a\u5149\u6e90\u65b9\u5411，\u518d\u9009\u62e9\u6e10\u53d8\u65b9\u5411，\u4e0d\u80fd\u8ba9\u540c\u4e00\u573a\u666f\u4e2d\u7684\u5bf9\u8c61\u5404\u81ea\u4f7f\u7528\u76f8\u53cd\u5149\u7ebf\u3002<\/p>\n

\u5706\u5f62\u5bf9\u8c61\u53ef\u4ee5\u4f7f\u7528\u5f84\u5411\u6e10\u53d8：<\/p>\n

function<\/span> drawVolumeCircle<\/span>(<\/span>ctx,<\/span> x,<\/span> y,<\/span> radius,<\/span> color<\/span>)<\/span> {<\/span>
\n const<\/span> gradient =<\/span> ctx.<\/span>createRadialGradient<\/span>(<\/span>
\n x –<\/span> radius *<\/span> 0.3<\/span>,<\/span>
\n y –<\/span> radius *<\/span> 0.3<\/span>,<\/span>
\n radius *<\/span> 0.05<\/span>,<\/span>
\n x,<\/span>
\n y,<\/span>
\n radius,<\/span>
\n )<\/span>;<\/span><\/p>\n

gradient.<\/span>addColorStop<\/span>(<\/span>0<\/span>,<\/span> 'rgba(255, 255, 255, 0.75)'<\/span>)<\/span>;<\/span>
\n gradient.<\/span>addColorStop<\/span>(<\/span>0.28<\/span>,<\/span> color)<\/span>;<\/span>
\n gradient.<\/span>addColorStop<\/span>(<\/span>1<\/span>,<\/span> 'rgba(0, 20, 60, 0.9)'<\/span>)<\/span>;<\/span><\/p>\n

ctx.<\/span>save<\/span>(<\/span>)<\/span>;<\/span>
\n ctx.<\/span>fillStyle =<\/span> gradient;<\/span>
\n ctx.<\/span>beginPath<\/span>(<\/span>)<\/span>;<\/span>
\n ctx.<\/span>arc<\/span>(<\/span>x,<\/span> y,<\/span> radius,<\/span> 0<\/span>,<\/span> Math.<\/span>PI<\/span> *<\/span> 2<\/span>)<\/span>;<\/span>
\n ctx.<\/span>fill<\/span>(<\/span>)<\/span>;<\/span>
\n ctx.<\/span>restore<\/span>(<\/span>)<\/span>;<\/span>
\n}<\/span><\/p>\n

drawVolumeCircle<\/span>(<\/span>ctx,<\/span> 360<\/span>,<\/span> 110<\/span>,<\/span> 52<\/span>,<\/span> 'rgba(60, 150, 240, 0.9)'<\/span>)<\/span>;<\/span><\/p>\n

\u9ad8\u5149\u4e2d\u5fc3\u504f\u5411\u5de6\u4e0a，\u8fb9\u7f18\u53d8\u6697，\u80fd\u8ba9\u5706\u5f62\u4ece\u8272\u5757\u53d8\u6210\u6709\u4f53\u79ef\u7684\u5bf9\u8c61\u3002\u6e10\u53d8\u4e0d\u662f\u8d8a\u5f3a\u8d8a\u771f\u5b9e：\u4e2d\u5fc3\u7eaf\u767d\u3001\u8fb9\u7f18\u7eaf\u9ed1\u4f1a\u4ea7\u751f\u5361\u901a\u6216\u91d1\u5c5e\u611f，\u5e94\u6839\u636e\u5bf9\u8c61\u6750\u8d28\u964d\u4f4e\u8272\u5dee\u3002<\/p>\n

2. \u7528\u9634\u5f71\u8bf4\u660e\u5bf9\u8c61\u4e0e\u80cc\u666f\u7684\u8ddd\u79bb<\/h4>\n

\u9634\u5f71\u7684\u6838\u5fc3\u4e0d\u662f\u88c5\u9970，\u800c\u662f\u63a5\u89e6\u7ebf\u7d22\u3002\u53ef\u4ee5\u8ba9\u9634\u5f71\u53c2\u6570\u7531\u5bf9\u8c61\u9ad8\u5ea6\u8fd1\u4f3c\u5f97\u5230：<\/p>\n

function<\/span> shadowStyle<\/span>(<\/span>height<\/span>)<\/span> {<\/span>
\n const<\/span> h =<\/span> Math.<\/span>max<\/span>(<\/span>0<\/span>,<\/span> height)<\/span>;<\/span><\/p>\n

return<\/span> {<\/span>
\n offsetX<\/span>:<\/span> h *<\/span> 0.25<\/span>,<\/span>
\n offsetY<\/span>:<\/span> h *<\/span> 0.5<\/span>,<\/span>
\n blur<\/span>:<\/span> 4<\/span> +<\/span> h *<\/span> 0.8<\/span>,<\/span>
\n alpha<\/span>:<\/span> Math.<\/span>max<\/span>(<\/span>0.12<\/span>,<\/span> 0.42<\/span> –<\/span> h *<\/span> 0.018<\/span>)<\/span>,<\/span>
\n }<\/span>;<\/span>
\n}<\/span><\/p>\n

function<\/span> drawLiftedPanel<\/span>(<\/span>ctx,<\/span> panel<\/span>)<\/span> {<\/span>
\n const<\/span> shadow =<\/span> shadowStyle<\/span>(<\/span>panel.<\/span>height)<\/span>;<\/span><\/p>\n

ctx.<\/span>save<\/span>(<\/span>)<\/span>;<\/span>
\n ctx.<\/span>shadowColor =<\/span> 'rgba(0, 0, 0, '<\/span> +<\/span> shadow.<\/span>alpha +<\/span> ')'<\/span>;<\/span>
\n ctx.<\/span>shadowBlur =<\/span> shadow.<\/span>blur;<\/span>
\n ctx.<\/span>shadowOffsetX =<\/span> shadow.<\/span>offsetX;<\/span>
\n ctx.<\/span>shadowOffsetY =<\/span> shadow.<\/span>offsetY;<\/span>
\n ctx.<\/span>fillStyle =<\/span> panel.<\/span>color;<\/span>
\n ctx.<\/span>fillRect<\/span>(<\/span>panel.<\/span>x,<\/span> panel.<\/span>y,<\/span> panel.<\/span>width,<\/span> panel.<\/span>height)<\/span>;<\/span>
\n ctx.<\/span>restore<\/span>(<\/span>)<\/span>;<\/span>
\n}<\/span><\/p>\n

height\u3001offsetX\u3001offsetY \u548c blur \u7684\u5355\u4f4d\u662f px，alpha \u662f 0～1\u3002\u9ad8\u5ea6\u589e\u52a0\u65f6，\u9634\u5f71\u504f\u79fb\u548c\u6a21\u7cca\u589e\u5927，\u900f\u660e\u5ea6\u964d\u4f4e，\u6697\u793a\u5bf9\u8c61\u79bb\u5f00\u80cc\u666f\u8868\u9762\u3002\u5149\u6e90\u65b9\u5411\u5fc5\u987b\u7edf\u4e00，\u5426\u5219\u5bf9\u8c61\u4f1a\u51fa\u73b0\u4e92\u76f8\u77db\u76fe\u7684\u9634\u5f71\u3002<\/p>\n

\u5982\u679c\u5bf9\u8c61\u5f88\u591a，\u9634\u5f71\u4f1a\u663e\u8457\u589e\u52a0\u7ed8\u5236\u6210\u672c\u3002\u53ef\u4ee5\u628a\u9634\u5f71\u548c\u4e3b\u4f53\u5206\u6210\u4e24\u4e2a\u5f00\u5173，\u5148\u786e\u8ba4\u662f\u5426\u771f\u7684\u9700\u8981：<\/p>\n

function<\/span> drawCard<\/span>(<\/span>ctx,<\/span> card,<\/span> options =<\/span> {<\/span>}<\/span><\/span>)<\/span> {<\/span>
\n const<\/span> {<\/span> shadow =<\/span> true<\/span> }<\/span> =<\/span> options;<\/span><\/p>\n

ctx.<\/span>save<\/span>(<\/span>)<\/span>;<\/span>
\n if<\/span> (<\/span>shadow)<\/span> {<\/span>
\n ctx.<\/span>shadowColor =<\/span> 'rgba(0, 0, 0, 0.28)'<\/span>;<\/span>
\n ctx.<\/span>shadowBlur =<\/span> 10<\/span>;<\/span>
\n ctx.<\/span>shadowOffsetY =<\/span> 6<\/span>;<\/span>
\n }<\/span><\/p>\n

ctx.<\/span>fillStyle =<\/span> card.<\/span>color;<\/span>
\n ctx.<\/span>fillRect<\/span>(<\/span>card.<\/span>x,<\/span> card.<\/span>y,<\/span> card.<\/span>width,<\/span> card.<\/span>height)<\/span>;<\/span>
\n ctx.<\/span>restore<\/span>(<\/span>)<\/span>;<\/span>
\n}<\/span><\/p>\n

drawCard<\/span>(<\/span>ctx,<\/span> {<\/span>
\n x<\/span>:<\/span> 60<\/span>,<\/span>
\n y<\/span>:<\/span> 220<\/span>,<\/span>
\n width<\/span>:<\/span> 180<\/span>,<\/span>
\n height<\/span>:<\/span> 70<\/span>,<\/span>
\n color<\/span>:<\/span> '#e9f4ff'<\/span>,<\/span>
\n}<\/span>,<\/span> {<\/span> shadow<\/span>:<\/span> true<\/span> }<\/span>)<\/span>;<\/span><\/p>\n

\u8c03\u8bd5\u65f6\u5148\u5173\u95ed shadow，\u786e\u8ba4\u4e3b\u4f53\u989c\u8272\u548c\u4f4d\u7f6e；\u518d\u6253\u5f00 shadow，\u89c2\u5bdf\u771f\u5b9e\u611f\u662f\u5426\u6539\u5584\u3002\u5982\u679c\u5173\u95ed\u9634\u5f71\u540e\u753b\u9762\u51e0\u4e4e\u6ca1\u6709\u53d8\u5316，\u5c31\u4e0d\u503c\u5f97\u4e3a\u5b83\u627f\u62c5\u5927\u91cf\u6a21\u7cca\u5f00\u9500\u3002<\/p>\n

3. \u7528\u900f\u660e\u5408\u6210\u53e0\u52a0\u9ad8\u5149\u548c\u5149\u6655<\/h4>\n

\u9ad8\u5149\u4e0d\u5e94\u8be5\u76f4\u63a5\u8986\u76d6\u6210\u767d\u8272，\u800c\u5e94\u4f7f\u7528\u4f4e Alpha \u53e0\u52a0：<\/p>\n

function<\/span> drawHighlight<\/span>(<\/span>ctx,<\/span> x,<\/span> y,<\/span> radius<\/span>)<\/span> {<\/span>
\n const<\/span> gradient =<\/span> ctx.<\/span>createRadialGradient<\/span>(<\/span>
\n x –<\/span> radius *<\/span> 0.25<\/span>,<\/span>
\n y –<\/span> radius *<\/span> 0.25<\/span>,<\/span>
\n 1<\/span>,<\/span>
\n x,<\/span>
\n y,<\/span>
\n radius,<\/span>
\n )<\/span>;<\/span><\/p>\n

gradient.<\/span>addColorStop<\/span>(<\/span>0<\/span>,<\/span> 'rgba(255, 255, 255, 0.5)'<\/span>)<\/span>;<\/span>
\n gradient.<\/span>addColorStop<\/span>(<\/span>1<\/span>,<\/span> 'rgba(255, 255, 255, 0)'<\/span>)<\/span>;<\/span><\/p>\n

ctx.<\/span>save<\/span>(<\/span>)<\/span>;<\/span>
\n ctx.<\/span>globalCompositeOperation =<\/span> 'screen'<\/span>;<\/span>
\n ctx.<\/span>fillStyle =<\/span> gradient;<\/span>
\n ctx.<\/span>beginPath<\/span>(<\/span>)<\/span>;<\/span>
\n ctx.<\/span>arc<\/span>(<\/span>x,<\/span> y,<\/span> radius,<\/span> 0<\/span>,<\/span> Math.<\/span>PI<\/span> *<\/span> 2<\/span>)<\/span>;<\/span>
\n ctx.<\/span>fill<\/span>(<\/span>)<\/span>;<\/span>
\n ctx.<\/span>restore<\/span>(<\/span>)<\/span>;<\/span>
\n}<\/span><\/p>\n

drawHighlight<\/span>(<\/span>ctx,<\/span> 145<\/span>,<\/span> 105<\/span>,<\/span> 38<\/span>)<\/span>;<\/span><\/p>\n

screen \u9002\u5408\u63d0\u4eae\u5149\u6548，\u4f46\u4e0d\u9002\u5408\u666e\u901a\u5b9e\u4f53\u8986\u76d6；\u5982\u679c\u9700\u8981\u66f4\u7a33\u5b9a\u7684\u666e\u901a\u900f\u660e\u5c42，\u53ef\u4ee5\u4f7f\u7528 source-over\u3002globalCompositeOperation \u662f\u6301\u4e45\u72b6\u6001，\u5fc5\u987b\u7528 save \u548c restore \u9650\u5236\u4f5c\u7528\u8303\u56f4\u3002<\/p>\n

\u7c92\u5b50\u5149\u6655\u8fd8\u53ef\u4ee5\u62c6\u6210\u6838\u5fc3\u548c\u5916\u5708，\u907f\u514d\u5355\u4e2a\u6e10\u53d8\u627f\u62c5\u6240\u6709\u4eae\u5ea6：<\/p>\n

function<\/span> drawGlowParticle<\/span>(<\/span>ctx,<\/span> particle<\/span>)<\/span> {<\/span>
\n ctx.<\/span>save<\/span>(<\/span>)<\/span>;<\/span><\/p>\n

ctx.<\/span>globalCompositeOperation =<\/span> 'lighter'<\/span>;<\/span>
\n ctx.<\/span>globalAlpha =<\/span> particle.<\/span>glowAlpha;<\/span>
\n ctx.<\/span>fillStyle =<\/span> particle.<\/span>color;<\/span>
\n ctx.<\/span>beginPath<\/span>(<\/span>)<\/span>;<\/span>
\n ctx.<\/span>arc<\/span>(<\/span>particle.<\/span>x,<\/span> particle.<\/span>y,<\/span> particle.<\/span>radius *<\/span> 3<\/span>,<\/span> 0<\/span>,<\/span> Math.<\/span>PI<\/span> *<\/span> 2<\/span>)<\/span>;<\/span>
\n ctx.<\/span>fill<\/span>(<\/span>)<\/span>;<\/span><\/p>\n

ctx.<\/span>globalCompositeOperation =<\/span> 'source-over'<\/span>;<\/span>
\n ctx.<\/span>globalAlpha =<\/span> particle.<\/span>alpha;<\/span>
\n ctx.<\/span>fillStyle =<\/span> '#ffffff'<\/span>;<\/span>
\n ctx.<\/span>beginPath<\/span>(<\/span>)<\/span>;<\/span>
\n ctx.<\/span>arc<\/span>(<\/span>particle.<\/span>x,<\/span> particle.<\/span>y,<\/span> particle.<\/span>radius,<\/span> 0<\/span>,<\/span> Math.<\/span>PI<\/span> *<\/span> 2<\/span>)<\/span>;<\/span>
\n ctx.<\/span>fill<\/span>(<\/span>)<\/span>;<\/span><\/p>\n

ctx.<\/span>restore<\/span>(<\/span>)<\/span>;<\/span>
\n}<\/span><\/p>\n

drawGlowParticle<\/span>(<\/span>ctx,<\/span> {<\/span>
\n x<\/span>:<\/span> 300<\/span>,<\/span>
\n y<\/span>:<\/span> 180<\/span>,<\/span>
\n radius<\/span>:<\/span> 6<\/span>,<\/span>
\n color<\/span>:<\/span> '#4db8ff'<\/span>,<\/span>
\n glowAlpha<\/span>:<\/span> 0.12<\/span>,<\/span>
\n alpha<\/span>:<\/span> 0.9<\/span>,<\/span>
\n}<\/span>)<\/span>;<\/span><\/p>\n

\u5916\u5708\u4f7f\u7528 lighter \u7d2f\u79ef\u5149\u80fd，\u6838\u5fc3\u4f7f\u7528 source-over \u4fdd\u6301\u6e05\u6670\u3002glowAlpha \u5e94\u8f83\u4f4e，\u5426\u5219\u591a\u4e2a\u7c92\u5b50\u91cd\u53e0\u540e\u4f1a\u5feb\u901f\u8fc7\u66dd\u3002<\/p>\n

4. \u7528\u7eb9\u7406\u548c\u79bb\u5c4f\u753b\u5e03\u589e\u52a0\u8868\u9762\u53d8\u5316<\/h4>\n

\u91cd\u590d\u751f\u6210\u566a\u58f0\u6216\u7eb9\u7406\u4f1a\u6d6a\u8d39\u6bcf\u5e27\u65f6\u95f4，\u9002\u5408\u5148\u7ed8\u5236\u5230\u79bb\u5c4f Canvas，\u518d\u91cd\u590d\u4f7f\u7528：<\/p>\n

function<\/span> createNoiseTexture<\/span>(<\/span>size,<\/span> random =<\/span> Math.<\/span>random<\/span>)<\/span> {<\/span>
\n const<\/span> offscreen =<\/span> document.<\/span>createElement<\/span>(<\/span>'canvas'<\/span>)<\/span>;<\/span>
\n offscreen.<\/span>width =<\/span> size;<\/span>
\n offscreen.<\/span>height =<\/span> size;<\/span><\/p>\n

const<\/span> ctx =<\/span> offscreen.<\/span>getContext<\/span>(<\/span>'2d'<\/span>)<\/span>;<\/span>
\n const<\/span> image =<\/span> ctx.<\/span>createImageData<\/span>(<\/span>size,<\/span> size)<\/span>;<\/span><\/p>\n

for<\/span> (<\/span>let<\/span> i =<\/span> 0<\/span>;<\/span> i <<\/span> image.<\/span>data.<\/span>length;<\/span> i +=<\/span> 4<\/span>)<\/span> {<\/span>
\n const<\/span> value =<\/span> Math.<\/span>floor<\/span>(<\/span>random<\/span>(<\/span>)<\/span> *<\/span> 256<\/span>)<\/span>;<\/span>
\n image.<\/span>data[<\/span>i]<\/span> =<\/span> value;<\/span>
\n image.<\/span>data[<\/span>i +<\/span> 1<\/span>]<\/span> =<\/span> value;<\/span>
\n image.<\/span>data[<\/span>i +<\/span> 2<\/span>]<\/span> =<\/span> value;<\/span>
\n image.<\/span>data[<\/span>i +<\/span> 3<\/span>]<\/span> =<\/span> 18<\/span>;<\/span>
\n }<\/span><\/p>\n

ctx.<\/span>putImageData<\/span>(<\/span>image,<\/span> 0<\/span>,<\/span> 0<\/span>)<\/span>;<\/span>
\n return<\/span> offscreen;<\/span>
\n}<\/span><\/p>\n

const<\/span> texture =<\/span> createNoiseTexture<\/span>(<\/span>128<\/span>)<\/span>;<\/span><\/p>\n

\u6bcf\u4e2a\u566a\u58f0\u50cf\u7d20\u7684 Alpha \u4e3a 18，\u7ea6\u7b49\u4e8e 0.071，\u5c5e\u4e8e\u4f4e\u5f3a\u5ea6\u8868\u9762\u53d8\u5316\u3002\u79bb\u5c4f\u7eb9\u7406\u53ea\u521b\u5efa\u4e00\u6b21，\u4e3b\u753b\u5e03\u6bcf\u5e27\u7528 drawImage \u7ed8\u5236\u5b83，\u80fd\u907f\u514d\u91cd\u590d\u5206\u914d ImageData\u3002<\/p>\n

\u628a\u7eb9\u7406\u53e0\u52a0\u5230\u5bf9\u8c61\u65f6，\u5e94\u88c1\u526a\u5230\u5bf9\u8c61\u8303\u56f4：<\/p>\n

function<\/span> drawTexturedCircle<\/span>(<\/span>ctx,<\/span> texture,<\/span> x,<\/span> y,<\/span> radius<\/span>)<\/span> {<\/span>
\n ctx.<\/span>save<\/span>(<\/span>)<\/span>;<\/span>
\n ctx.<\/span>beginPath<\/span>(<\/span>)<\/span>;<\/span>
\n ctx.<\/span>arc<\/span>(<\/span>x,<\/span> y,<\/span> radius,<\/span> 0<\/span>,<\/span> Math.<\/span>PI<\/span> *<\/span> 2<\/span>)<\/span>;<\/span>
\n ctx.<\/span>clip<\/span>(<\/span>)<\/span>;<\/span><\/p>\n

ctx.<\/span>globalAlpha =<\/span> 0.25<\/span>;<\/span>
\n ctx.<\/span>drawImage<\/span>(<\/span>
\n texture,<\/span>
\n x –<\/span> radius,<\/span>
\n y –<\/span> radius,<\/span>
\n radius *<\/span> 2<\/span>,<\/span>
\n radius *<\/span> 2<\/span>,<\/span>
\n )<\/span>;<\/span><\/p>\n

ctx.<\/span>restore<\/span>(<\/span>)<\/span>;<\/span>
\n}<\/span><\/p>\n

drawTexturedCircle<\/span>(<\/span>ctx,<\/span> texture,<\/span> 420<\/span>,<\/span> 180<\/span>,<\/span> 46<\/span>)<\/span>;<\/span><\/p>\n

clip \u8ba9\u7eb9\u7406\u53ea\u4f5c\u7528\u4e8e\u5706\u5f62\u5185\u90e8，globalAlpha \u63a7\u5236\u7eb9\u7406\u5f3a\u5ea6\u3002\u7eb9\u7406\u5e94\u8be5\u8865\u5145\u57fa\u7840\u8272\u548c\u660e\u6697，\u800c\u4e0d\u662f\u5b8c\u5168\u8986\u76d6\u6e10\u53d8；\u5982\u679c\u8868\u9762\u65b9\u5411\u5df2\u7ecf\u7531\u6e10\u53d8\u8bf4\u660e，\u7eb9\u7406\u53ea\u9700\u8981\u63d0\u4f9b\u5c0f\u5e45\u968f\u673a\u53d8\u5316\u3002<\/p>\n

5. \u7528\u79bb\u5c4f\u5408\u6210\u51cf\u5c11\u91cd\u590d\u72b6\u6001\u548c\u7ed8\u5236\u6210\u672c<\/h4>\n

\u5f53\u4e00\u4e2a\u5bf9\u8c61\u7531\u9634\u5f71\u3001\u4e3b\u4f53\u3001\u9ad8\u5149\u548c\u7eb9\u7406\u7ec4\u6210\u65f6，\u53ef\u4ee5\u5148\u5408\u6210\u5230\u79bb\u5c4f\u753b\u5e03，\u518d\u6574\u4f53\u7ed8\u5236\u5230\u4e3b\u753b\u5e03：<\/p>\n

function<\/span> createCardRenderer<\/span>(<\/span>width,<\/span> height<\/span>)<\/span> {<\/span>
\n const<\/span> offscreen =<\/span> document.<\/span>createElement<\/span>(<\/span>'canvas'<\/span>)<\/span>;<\/span>
\n offscreen.<\/span>width =<\/span> width;<\/span>
\n offscreen.<\/span>height =<\/span> height;<\/span>
\n const<\/span> ctx =<\/span> offscreen.<\/span>getContext<\/span>(<\/span>'2d'<\/span>)<\/span>;<\/span><\/p>\n

return<\/span> {<\/span>
\n canvas<\/span>:<\/span> offscreen,<\/span>
\n draw<\/span>(<\/span>card<\/span>)<\/span> {<\/span>
\n ctx.<\/span>clearRect<\/span>(<\/span>0<\/span>,<\/span> 0<\/span>,<\/span> width,<\/span> height)<\/span>;<\/span>
\n drawLiftedPanel<\/span>(<\/span>ctx,<\/span> card)<\/span>;<\/span>
\n drawLightPanel<\/span>(<\/span>ctx,<\/span> 0<\/span>,<\/span> 0<\/span>,<\/span> width,<\/span> height)<\/span>;<\/span>
\n drawHighlight<\/span>(<\/span>ctx,<\/span> width *<\/span> 0.35<\/span>,<\/span> height *<\/span> 0.25<\/span>,<\/span> width *<\/span> 0.2<\/span>)<\/span>;<\/span>
\n }<\/span>,<\/span>
\n }<\/span>;<\/span>
\n}<\/span><\/p>\n

const<\/span> cardRenderer =<\/span> createCardRenderer<\/span>(<\/span>220<\/span>,<\/span> 140<\/span>)<\/span>;<\/span>
\ncardRenderer.<\/span>draw<\/span>(<\/span>{<\/span> x<\/span>:<\/span> 0<\/span>,<\/span> y<\/span>:<\/span> 0<\/span>,<\/span> width<\/span>:<\/span> 220<\/span>,<\/span> height<\/span>:<\/span> 140<\/span>,<\/span> color<\/span>:<\/span> '#4c94d8'<\/span>,<\/span> height<\/span>:<\/span> 8<\/span> }<\/span>)<\/span>;<\/span><\/p>\n

\u79bb\u5c4f\u5408\u6210\u9002\u5408\u590d\u6742\u4f46\u91cd\u590d\u4f7f\u7528\u7684\u5361\u7247\u3001\u6309\u94ae\u548c\u6750\u8d28\u8d34\u7247\u3002\u82e5\u5bf9\u8c61\u6bcf\u5e27\u90fd\u5b8c\u5168\u53d8\u5316，\u79bb\u5c4f Canvas \u53ef\u80fd\u589e\u52a0\u4e00\u6b21\u989d\u5916\u62f7\u8d1d，\u4e0d\u4e00\u5b9a\u66f4\u5feb；\u5e94\u6839\u636e\u5bf9\u8c61\u6570\u91cf\u3001\u66f4\u65b0\u9891\u7387\u548c\u5b9e\u9645\u5e27\u65f6\u95f4\u5224\u65ad\u3002<\/p>\n

Canvas 2D \u7684\u4f4e\u6210\u672c\u771f\u5b9e\u611f\u53ef\u4ee5\u5f52\u7eb3\u4e3a\u4e00\u6761\u94fe：\u5148\u7528\u989c\u8272\u548c\u6e10\u53d8\u5efa\u7acb\u660e\u6697\u65b9\u5411，\u518d\u7528\u9634\u5f71\u5efa\u7acb\u63a5\u89e6\u548c\u9ad8\u5ea6，\u7528 Alpha \u4e0e\u6df7\u5408\u6a21\u5f0f\u53e0\u52a0\u9ad8\u5149，\u6700\u540e\u7528\u4f4e\u5f3a\u5ea6\u7eb9\u7406\u8865\u5145\u8868\u9762\u53d8\u5316\u3002\u6bcf\u4e2a\u6548\u679c\u90fd\u5e94\u6709\u660e\u786e\u4efb\u52a1，\u5e76\u5728\u5bf9\u8c61\u6570\u91cf\u589e\u52a0\u65f6\u63a7\u5236\u9634\u5f71\u3001\u6a21\u7cca\u548c\u79bb\u5c4f\u5408\u6210\u7684\u6210\u672c\u3002\u4e0b\u4e00\u8282\u5c06\u628a\u8fd9\u4e9b\u53c2\u6570\u6574\u7406\u6210\u4e00\u5957\u517c\u987e\u53ef\u4fe1\u5ea6\u4e0e\u6027\u80fd\u7684\u9009\u578b\u65b9\u6cd5\u3002<\/p>\n

\u516d\u3001\u4ece\u53c2\u6570\u8c03\u6574\u5230\u8bbe\u8ba1\u65b9\u6cd5：\u600e\u6837\u8ba9\u7279\u6548\u65e2\u53ef\u4fe1\u53c8\u4e0d\u62d6\u6162\u6027\u80fd<\/h3>\n

\u89c6\u89c9\u771f\u5b9e\u611f\u4e0d\u662f\u53c2\u6570\u8d8a\u591a\u8d8a\u597d，\u800c\u662f\u5173\u952e\u7ebf\u7d22\u8db3\u591f\u4e00\u81f4\u3002\u989c\u8272\u5bf9\u6bd4\u3001\u6750\u8d28\u9ad8\u5149\u3001\u9634\u5f71\u8303\u56f4\u3001\u900f\u660e\u53e0\u52a0\u548c\u7eb9\u7406\u7ec6\u8282\u90fd\u4f1a\u5e26\u6765\u6210\u672c；\u5982\u679c\u6ca1\u6709\u4f18\u5148\u7ea7，\u6548\u679c\u8d8a\u52a0\u8d8a\u590d\u6742，\u753b\u9762\u5374\u672a\u5fc5\u66f4\u53ef\u4fe1\u3002\u66f4\u7a33\u59a5\u7684\u65b9\u6cd5\u662f\u5148\u786e\u5b9a\u6700\u91cd\u8981\u7684\u89c6\u89c9\u7ed3\u8bba，\u518d\u4e3a\u5b83\u5206\u914d\u6709\u9650\u7684\u7ed8\u5236\u548c\u8ba1\u7b97\u9884\u7b97\u3002<\/p>\n

1. \u5148\u6309\u89c6\u89c9\u6536\u76ca\u7ed9\u53c2\u6570\u6392\u5e8f<\/h4>\n

\u540c\u4e00\u4e2a\u5bf9\u8c61\u901a\u5e38\u6709\u5f88\u591a\u53ef\u8c03\u53c2\u6570，\u4f46\u5b83\u4eec\u5bf9\u89c2\u611f\u7684\u5f71\u54cd\u4e0d\u540c\u3002\u53ef\u4ee5\u5148\u628a\u53c2\u6570\u5206\u6210\u4e09\u5c42：<\/p>\n

\u7b2c\u4e00\u5c42：\u4f4d\u7f6e\u3001\u5c3a\u5bf8\u3001\u660e\u6697\u65b9\u5411\u3001\u524d\u540e\u987a\u5e8f
\n\u7b2c\u4e8c\u5c42：\u9634\u5f71\u504f\u79fb\u3001\u9ad8\u5149\u8303\u56f4\u3001\u900f\u660e\u5ea6\u3001\u989c\u8272\u5bf9\u6bd4
\n\u7b2c\u4e09\u5c42：\u7eb9\u7406\u566a\u58f0\u3001\u6a21\u7cca\u534a\u5f84\u3001\u7ec6\u5c0f\u9897\u7c92\u548c\u88c5\u9970\u7ec6\u8282<\/p>\n

\u53ef\u4ee5\u7528\u4e00\u4e2a\u7b80\u5355\u7684\u6743\u91cd\u51fd\u6570\u5e2e\u52a9\u6392\u5e8f：<\/p>\n

function<\/span> rankParameter<\/span>(<\/span>parameter<\/span>)<\/span> {<\/span>
\n const<\/span> score =<\/span> parameter.<\/span>visualImpact
\n *<\/span> parameter.<\/span>consistency
\n \/<\/span> Math.<\/span>max<\/span>(<\/span>1<\/span>,<\/span> parameter.<\/span>cost)<\/span>;<\/span><\/p>\n

return<\/span> {<\/span>
\n name<\/span>:<\/span> parameter.<\/span>name,<\/span>
\n score,<\/span>
\n }<\/span>;<\/span>
\n}<\/span><\/p>\n

const<\/span> parameters =<\/span> [<\/span>
\n {<\/span> name<\/span>:<\/span> '\u660e\u6697\u65b9\u5411'<\/span>,<\/span> visualImpact<\/span>:<\/span> 5<\/span>,<\/span> consistency<\/span>:<\/span> 5<\/span>,<\/span> cost<\/span>:<\/span> 1<\/span> }<\/span>,<\/span>
\n {<\/span> name<\/span>:<\/span> '\u9634\u5f71\u6a21\u7cca'<\/span>,<\/span> visualImpact<\/span>:<\/span> 3<\/span>,<\/span> consistency<\/span>:<\/span> 3<\/span>,<\/span> cost<\/span>:<\/span> 4<\/span> }<\/span>,<\/span>
\n {<\/span> name<\/span>:<\/span> '\u7ec6\u5c0f\u566a\u58f0'<\/span>,<\/span> visualImpact<\/span>:<\/span> 1<\/span>,<\/span> consistency<\/span>:<\/span> 2<\/span>,<\/span> cost<\/span>:<\/span> 3<\/span> }<\/span>,<\/span>
\n]<\/span>;<\/span><\/p>\n

console.<\/span>log<\/span>(<\/span>parameters.<\/span>map<\/span>(<\/span>rankParameter)<\/span>)<\/span>;<\/span><\/p>\n

visualImpact \u8868\u793a\u53c2\u6570\u5bf9\u753b\u9762\u7684\u5f71\u54cd，consistency \u8868\u793a\u5b83\u80fd\u5426\u4e0e\u5176\u4ed6\u5bf9\u8c61\u4fdd\u6301\u4e00\u81f4，cost \u8868\u793a CPU\u3001GPU \u6216\u7ed8\u5236\u65f6\u95f4\u6210\u672c\u3002\u660e\u6697\u65b9\u5411\u901a\u5e38\u6536\u76ca\u9ad8\u3001\u6210\u672c\u4f4e，\u5e94\u4f18\u5148\u5904\u7406；\u7ec6\u5c0f\u566a\u58f0\u5373\u4f7f\u589e\u52a0\u4e86\u7eb9\u7406\u611f，\u6536\u76ca\u4e5f\u53ef\u80fd\u4f4e\u4e8e\u5b83\u5e26\u6765\u7684\u91c7\u6837\u548c\u586b\u5145\u6210\u672c\u3002<\/p>\n

2. \u7ed9\u9634\u5f71\u3001\u6a21\u7cca\u548c\u53e0\u52a0\u8bbe\u7f6e\u9884\u7b97<\/h4>\n

\u9634\u5f71\u3001\u6a21\u7cca\u548c\u591a\u5c42\u900f\u660e\u5408\u6210\u5f88\u5bb9\u6613\u5728\u5bf9\u8c61\u6570\u91cf\u589e\u52a0\u540e\u6210\u4e3a\u74f6\u9888\u3002\u53ef\u4ee5\u6309\u5bf9\u8c61\u6570\u91cf\u52a8\u6001\u964d\u4f4e\u8d28\u91cf：<\/p>\n

function<\/span> qualityForCount<\/span>(<\/span>count<\/span>)<\/span> {<\/span>
\n if<\/span> (<\/span>count <<\/span> 50<\/span>)<\/span> {<\/span>
\n return<\/span> {<\/span> shadow<\/span>:<\/span> true<\/span>,<\/span> blur<\/span>:<\/span> 12<\/span>,<\/span> textureAlpha<\/span>:<\/span> 0.25<\/span> }<\/span>;<\/span>
\n }<\/span>
\n if<\/span> (<\/span>count <<\/span> 200<\/span>)<\/span> {<\/span>
\n return<\/span> {<\/span> shadow<\/span>:<\/span> true<\/span>,<\/span> blur<\/span>:<\/span> 6<\/span>,<\/span> textureAlpha<\/span>:<\/span> 0.12<\/span> }<\/span>;<\/span>
\n }<\/span>
\n return<\/span> {<\/span> shadow<\/span>:<\/span> false<\/span>,<\/span> blur<\/span>:<\/span> 0<\/span>,<\/span> textureAlpha<\/span>:<\/span> 0<\/span> }<\/span>;<\/span>
\n}<\/span><\/p>\n

console.<\/span>log<\/span>(<\/span>qualityForCount<\/span>(<\/span>24<\/span>)<\/span>)<\/span>;<\/span>
\nconsole.<\/span>log<\/span>(<\/span>qualityForCount<\/span>(<\/span>260<\/span>)<\/span>)<\/span>;<\/span><\/p>\n

count \u662f\u5f53\u524d\u9700\u8981\u7ed8\u5236\u7684\u5bf9\u8c61\u6570\u91cf，blur \u4f7f\u7528 Canvas \u50cf\u7d20，textureAlpha \u4f7f\u7528 0～1\u3002\u5bf9\u8c61\u5c11\u65f6\u53ef\u4ee5\u4fdd\u7559\u5b8c\u6574\u9634\u5f71\u548c\u7eb9\u7406；\u5bf9\u8c61\u591a\u65f6\u5173\u95ed\u9634\u5f71\u3001\u964d\u4f4e\u7eb9\u7406\u5f3a\u5ea6，\u901a\u5e38\u6bd4\u8ba9\u6240\u6709\u5bf9\u8c61\u90fd\u4fdd\u7559\u9ad8\u8d28\u91cf\u66f4\u7a33\u5b9a\u3002<\/p>\n

\u7ed8\u5236\u65f6\u8bfb\u53d6\u540c\u4e00\u4efd\u8d28\u91cf\u914d\u7f6e：<\/p>\n

function<\/span> drawQualityParticle<\/span>(<\/span>ctx,<\/span> particle,<\/span> quality<\/span>)<\/span> {<\/span>
\n ctx.<\/span>save<\/span>(<\/span>)<\/span>;<\/span><\/p>\n

if<\/span> (<\/span>quality.<\/span>shadow)<\/span> {<\/span>
\n ctx.<\/span>shadowColor =<\/span> 'rgba(0, 0, 0, 0.25)'<\/span>;<\/span>
\n ctx.<\/span>shadowBlur =<\/span> quality.<\/span>blur;<\/span>
\n ctx.<\/span>shadowOffsetY =<\/span> quality.<\/span>blur *<\/span> 0.5<\/span>;<\/span>
\n }<\/span><\/p>\n

ctx.<\/span>globalAlpha =<\/span> particle.<\/span>alpha;<\/span>
\n ctx.<\/span>fillStyle =<\/span> particle.<\/span>color;<\/span>
\n ctx.<\/span>beginPath<\/span>(<\/span>)<\/span>;<\/span>
\n ctx.<\/span>arc<\/span>(<\/span>particle.<\/span>x,<\/span> particle.<\/span>y,<\/span> particle.<\/span>radius,<\/span> 0<\/span>,<\/span> Math.<\/span>PI<\/span> *<\/span> 2<\/span>)<\/span>;<\/span>
\n ctx.<\/span>fill<\/span>(<\/span>)<\/span>;<\/span><\/p>\n

ctx.<\/span>restore<\/span>(<\/span>)<\/span>;<\/span>
\n}<\/span><\/p>\n

\u8d28\u91cf\u964d\u7ea7\u5fc5\u987b\u4fdd\u6301\u89c6\u89c9\u65b9\u5411\u4e00\u81f4：\u5173\u95ed\u9634\u5f71\u540e\u4ecd\u4fdd\u7559\u57fa\u7840\u660e\u6697，\u964d\u4f4e\u7eb9\u7406\u540e\u4ecd\u4fdd\u7559\u8f6e\u5ed3\u3002\u8fd9\u6837\u7528\u6237\u4f1a\u611f\u89c9\u7ec6\u8282\u51cf\u5c11，\u800c\u4e0d\u662f\u5bf9\u8c61\u7684\u7a7a\u95f4\u5173\u7cfb\u7a81\u7136\u6539\u53d8\u3002<\/p>\n

3. \u7528\u8d28\u91cf\u6863\u4f4d\u4ee3\u66ff\u5927\u91cf\u96f6\u6563\u5224\u65ad<\/h4>\n

\u4e0e\u5176\u5728\u7ed8\u5236\u4ee3\u7801\u4e2d\u6563\u843d\u5f88\u591a if，\u4e0d\u5982\u63d0\u524d\u9009\u62e9 low\u3001medium\u3001high \u4e09\u6863：<\/p>\n

const<\/span> QUALITY_PRESETS<\/span> =<\/span> {<\/span>
\n low<\/span>:<\/span> {<\/span>
\n useGradient<\/span>:<\/span> false<\/span>,<\/span>
\n useShadow<\/span>:<\/span> false<\/span>,<\/span>
\n useTexture<\/span>:<\/span> false<\/span>,<\/span>
\n particleLimit<\/span>:<\/span> 120<\/span>,<\/span>
\n }<\/span>,<\/span>
\n medium<\/span>:<\/span> {<\/span>
\n useGradient<\/span>:<\/span> true<\/span>,<\/span>
\n useShadow<\/span>:<\/span> true<\/span>,<\/span>
\n useTexture<\/span>:<\/span> false<\/span>,<\/span>
\n particleLimit<\/span>:<\/span> 300<\/span>,<\/span>
\n }<\/span>,<\/span>
\n high<\/span>:<\/span> {<\/span>
\n useGradient<\/span>:<\/span> true<\/span>,<\/span>
\n useShadow<\/span>:<\/span> true<\/span>,<\/span>
\n useTexture<\/span>:<\/span> true<\/span>,<\/span>
\n particleLimit<\/span>:<\/span> 800<\/span>,<\/span>
\n }<\/span>,<\/span>
\n}<\/span>;<\/span><\/p>\n

function<\/span> selectQuality<\/span>(<\/span>{<\/span> devicePixelRatio,<\/span> particleCount }<\/span><\/span>)<\/span> {<\/span>
\n if<\/span> (<\/span>particleCount ><\/span> 600<\/span> ||<\/span> devicePixelRatio <<\/span> 1<\/span>)<\/span> {<\/span>
\n return<\/span> QUALITY_PRESETS<\/span>.<\/span>low;<\/span>
\n }<\/span>
\n if<\/span> (<\/span>particleCount ><\/span> 250<\/span>)<\/span> {<\/span>
\n return<\/span> QUALITY_PRESETS<\/span>.<\/span>medium;<\/span>
\n }<\/span>
\n return<\/span> QUALITY_PRESETS<\/span>.<\/span>high;<\/span>
\n}<\/span><\/p>\n

console.<\/span>log<\/span>(<\/span>selectQuality<\/span>(<\/span>{<\/span>
\n devicePixelRatio<\/span>:<\/span> window.<\/span>devicePixelRatio,<\/span>
\n particleCount<\/span>:<\/span> 180<\/span>,<\/span>
\n}<\/span>)<\/span>)<\/span>;<\/span><\/p>\n

devicePixelRatio \u4f1a\u5f71\u54cd\u5b9e\u9645\u50cf\u7d20\u6570\u91cf，particleCount \u5f71\u54cd\u66f4\u65b0\u548c\u7ed8\u5236\u6b21\u6570\u3002\u8d28\u91cf\u6863\u4f4d\u628a\u89c6\u89c9\u53d6\u820d\u96c6\u4e2d\u5230\u914d\u7f6e\u4e2d，\u4fbf\u4e8e\u5728\u79fb\u52a8\u8bbe\u5907\u3001\u684c\u9762\u8bbe\u5907\u548c\u7a97\u53e3\u7f29\u653e\u65f6\u7edf\u4e00\u8c03\u6574\u3002\u9608\u503c\u4ecd\u5e94\u901a\u8fc7\u5b9e\u9645\u6d4b\u8bd5\u6821\u51c6，\u4e0d\u80fd\u628a\u793a\u4f8b\u6570\u503c\u5f53\u6210\u6240\u6709\u9879\u76ee\u7684\u56fa\u5b9a\u6807\u51c6\u3002<\/p>\n

4. \u7528\u8bbe\u5907\u8868\u73b0\u548c\u5e27\u65f6\u95f4\u52a8\u6001\u964d\u7ea7<\/h4>\n

\u9759\u6001\u8d28\u91cf\u6863\u4f4d\u8fd8\u4e0d\u591f，\u56e0\u4e3a\u540c\u4e00\u8bbe\u5907\u5728\u4e0d\u540c\u573a\u666f\u4e2d\u7684\u8d1f\u8f7d\u4f1a\u53d8\u5316\u3002\u53ef\u4ee5\u6839\u636e\u6700\u8fd1\u51e0\u5e27\u7684\u8017\u65f6\u8c03\u6574\u5f53\u524d\u6863\u4f4d：<\/p>\n

function<\/span> updateQualityLevel<\/span>(<\/span>level,<\/span> frameTime,<\/span> target =<\/span> 16.7<\/span><\/span>)<\/span> {<\/span>
\n if<\/span> (<\/span>frameTime ><\/span> target *<\/span> 1.4<\/span>)<\/span> {<\/span>
\n return<\/span> Math.<\/span>max<\/span>(<\/span>0<\/span>,<\/span> level –<\/span> 1<\/span>)<\/span>;<\/span>
\n }<\/span>
\n if<\/span> (<\/span>frameTime <<\/span> target *<\/span> 0.75<\/span>)<\/span> {<\/span>
\n return<\/span> Math.<\/span>min<\/span>(<\/span>2<\/span>,<\/span> level +<\/span> 1<\/span>)<\/span>;<\/span>
\n }<\/span>
\n return<\/span> level;<\/span>
\n}<\/span><\/p>\n

let<\/span> qualityLevel =<\/span> 2<\/span>;<\/span>
\nqualityLevel =<\/span> updateQualityLevel<\/span>(<\/span>qualityLevel,<\/span> 28<\/span>)<\/span>;<\/span>
\nconsole.<\/span>log<\/span>(<\/span>qualityLevel)<\/span>;<\/span><\/p>\n

frameTime \u4f7f\u7528\u6beb\u79d2，target \u9ed8\u8ba4\u5bf9\u5e94\u7ea6 60 FPS \u7684 16.7 \u6beb\u79d2\u3002\u8fde\u7eed\u51e0\u5e27\u8d85\u8fc7\u9884\u7b97\u65f6\u964d\u4f4e\u7b49\u7ea7，\u8fde\u7eed\u8868\u73b0\u826f\u597d\u65f6\u518d\u9010\u6b65\u6062\u590d，\u907f\u514d\u4e00\u5e27\u5361\u987f\u5c31\u9891\u7e41\u5207\u6362\u8d28\u91cf\u3002qualityLevel \u53ef\u4ee5\u6620\u5c04\u5230\u524d\u9762\u7684 QUALITY_PRESETS\u3002<\/p>\n

\u8fd8\u5e94\u5206\u522b\u8bb0\u5f55\u66f4\u65b0\u548c\u7ed8\u5236\u8017\u65f6：<\/p>\n

function<\/span> profileFrame<\/span>(<\/span>update,<\/span> render<\/span>)<\/span> {<\/span>
\n const<\/span> frameStart =<\/span> performance.<\/span>now<\/span>(<\/span>)<\/span>;<\/span><\/p>\n

const<\/span> updateStart =<\/span> performance.<\/span>now<\/span>(<\/span>)<\/span>;<\/span>
\n update<\/span>(<\/span>)<\/span>;<\/span>
\n const<\/span> updateCost =<\/span> performance.<\/span>now<\/span>(<\/span>)<\/span> –<\/span> updateStart;<\/span><\/p>\n

const<\/span> renderStart =<\/span> performance.<\/span>now<\/span>(<\/span>)<\/span>;<\/span>
\n render<\/span>(<\/span>)<\/span>;<\/span>
\n const<\/span> renderCost =<\/span> performance.<\/span>now<\/span>(<\/span>)<\/span> –<\/span> renderStart;<\/span><\/p>\n

return<\/span> {<\/span>
\n total<\/span>:<\/span> performance.<\/span>now<\/span>(<\/span>)<\/span> –<\/span> frameStart,<\/span>
\n update<\/span>:<\/span> updateCost,<\/span>
\n render<\/span>:<\/span> renderCost,<\/span>
\n }<\/span>;<\/span>
\n}<\/span><\/p>\n

console.<\/span>table<\/span>(<\/span>profileFrame<\/span>(<\/span>
\n (<\/span>)<\/span> =><\/span> {<\/span>}<\/span>,<\/span>
\n (<\/span>)<\/span> =><\/span> {<\/span>}<\/span>,<\/span>
\n)<\/span>)<\/span>;<\/span><\/p>\n

\u5982\u679c update \u6210\u672c\u9ad8，\u5e94\u51cf\u5c11\u7c92\u5b50\u8ba1\u7b97\u3001\u5bf9\u8c61\u521b\u5efa\u6216\u6570\u7ec4\u904d\u5386；\u5982\u679c render \u6210\u672c\u9ad8，\u5e94\u51cf\u5c11\u9634\u5f71\u3001\u6a21\u7cca\u3001\u7eb9\u7406\u91c7\u6837\u548c\u7ed8\u5236\u8c03\u7528；\u5982\u679c\u4e24\u8005\u90fd\u4f4e\u4f46\u4ecd\u5361\u987f，\u8fd8\u8981\u68c0\u67e5\u9875\u9762\u5176\u4ed6\u811a\u672c\u3001\u5e03\u5c40\u548c\u5408\u6210\u5f00\u9500\u3002<\/p>\n

5. \u7528\u7edf\u4e00\u68c0\u67e5\u8868\u5b8c\u6210\u8bbe\u8ba1\u51b3\u7b56<\/h4>\n

\u4e00\u4e2a\u53ef\u4fe1\u4e14\u9ad8\u6548\u7684\u7279\u6548，\u53ef\u4ee5\u6309\u4ee5\u4e0b\u987a\u5e8f\u9a8c\u6536：<\/p>\n

1. \u989c\u8272\u548c\u80cc\u666f\u6709\u8db3\u591f\u660e\u6697\u5dee
\n2. \u540c\u4e00\u573a\u666f\u7684\u5149\u6e90\u65b9\u5411\u4fdd\u6301\u4e00\u81f4
\n3. \u4e0d\u540c\u6750\u8d28\u62e5\u6709\u4e0d\u540c\u7684\u9ad8\u5149\u548c\u7eb9\u7406\u5f3a\u5ea6
\n4. \u524d\u540e\u5bf9\u8c61\u7684\u7ed8\u5236\u987a\u5e8f\u3001\u900f\u660e\u5ea6\u548c\u9634\u5f71\u4e92\u76f8\u4e00\u81f4
\n5. \u7eb9\u7406\u3001\u6a21\u7cca\u548c\u9634\u5f71\u7684\u6210\u672c\u6709\u660e\u786e\u9884\u7b97
\n6. \u4f4e\u7aef\u8bbe\u5907\u6709\u53ef\u63a5\u53d7\u7684\u964d\u7ea7\u65b9\u6848
\n7. \u5173\u95ed\u7ec6\u8282\u540e，\u6838\u5fc3\u8f6e\u5ed3\u548c\u8fd0\u52a8\u4ecd\u7136\u6210\u7acb<\/p>\n

\u53ef\u4ee5\u628a\u5173\u952e\u72b6\u6001\u6c47\u603b\u4e3a\u8bca\u65ad\u6570\u636e：<\/p>\n

function<\/span> summarizeEffect<\/span>(<\/span>{<\/span> objectCount,<\/span> frameTime,<\/span> quality,<\/span> drawCalls }<\/span><\/span>)<\/span> {<\/span>
\n return<\/span> {<\/span>
\n objectCount,<\/span>
\n frameTime<\/span>:<\/span> Number<\/span>(<\/span>frameTime.<\/span>toFixed<\/span>(<\/span>2<\/span>)<\/span>)<\/span>,<\/span>
\n quality,<\/span>
\n drawCalls,<\/span>
\n withinBudget<\/span>:<\/span> frameTime <=<\/span> 16.7<\/span>,<\/span>
\n }<\/span>;<\/span>
\n}<\/span><\/p>\n

console.<\/span>log<\/span>(<\/span>summarizeEffect<\/span>(<\/span>{<\/span>
\n objectCount<\/span>:<\/span> 180<\/span>,<\/span>
\n frameTime<\/span>:<\/span> 14.8<\/span>,<\/span>
\n quality<\/span>:<\/span> 'medium'<\/span>,<\/span>
\n drawCalls<\/span>:<\/span> 36<\/span>,<\/span>
\n}<\/span>)<\/span>)<\/span>;<\/span><\/p>\n

objectCount \u662f\u5bf9\u8c61\u6570\u91cf，frameTime \u662f\u5355\u5e27\u6beb\u79d2\u6570，drawCalls \u662f\u7ed8\u5236\u8c03\u7528\u6b21\u6570，withinBudget \u7528\u4e8e\u5feb\u901f\u5224\u65ad\u662f\u5426\u63a5\u8fd1 60 FPS \u9884\u7b97\u3002\u8bbe\u8ba1\u65f6\u5e94\u5148\u4fdd\u8bc1\u8f6e\u5ed3\u3001\u8fd0\u52a8\u548c\u5c42\u6b21，\u518d\u9010\u6b65\u6dfb\u52a0\u9ad8\u5149\u3001\u9634\u5f71\u548c\u7eb9\u7406；\u5982\u679c\u7ec6\u8282\u5173\u95ed\u540e\u5bf9\u8c61\u5b8c\u5168\u5931\u53bb\u4f53\u79ef，\u8bf4\u660e\u57fa\u7840\u989c\u8272\u548c\u5c42\u6b21\u6ca1\u6709\u5efa\u7acb\u597d\u3002<\/p>\n

\u56e0\u6b64，\u53ef\u4fe1\u7684 Web \u7279\u6548\u4e0d\u662f\u9760\u65e0\u9650\u589e\u52a0\u6ee4\u955c\u548c\u7eb9\u7406\u83b7\u5f97\u7684，\u800c\u662f\u9760\u4e00\u81f4\u7684\u5149\u7ebf\u65b9\u5411\u3001\u660e\u786e\u7684\u524d\u540e\u5173\u7cfb\u3001\u9002\u5ea6\u7684\u6750\u8d28\u5dee\u5f02\u548c\u53ef\u6d4b\u91cf\u7684\u6027\u80fd\u9884\u7b97\u5171\u540c\u5f62\u6210\u3002Canvas 2D \u8db3\u4ee5\u5b8c\u6210\u8bb8\u591a\u7f51\u9875\u4ea4\u4e92\u3001\u7c92\u5b50\u548c\u754c\u9762\u52a8\u6548\u7684\u89c6\u89c9\u8fd1\u4f3c；\u5f53\u5bf9\u8c61\u6570\u91cf\u3001\u7eb9\u7406\u590d\u6742\u5ea6\u6216\u81ea\u5b9a\u4e49\u5149\u7167\u8d85\u8fc7\u5b83\u7684\u5408\u7406\u8303\u56f4，\u518d\u6839\u636e\u6570\u636e\u89c4\u6a21\u8fc1\u79fb\u5230 WebGL\u3002\u628a\u201c\u770b\u8d77\u6765\u771f\u5b9e\u201d\u62c6\u6210\u53c2\u6570，\u628a\u201c\u8fd0\u884c\u5f97\u6d41\u7545\u201d\u62c6\u6210\u6307\u6807，\u89c6\u89c9\u8bbe\u8ba1\u548c\u5de5\u7a0b\u6027\u80fd\u624d\u80fd\u540c\u65f6\u5f97\u5230\u63a7\u5236\u3002<\/p>\n

\u4e03\u3001\u5173\u4e8e\u516b\u8352\u542f<\/h3>\n

\u516b\u8352\u542f\u662f\u4e00\u5bb6\u4e13\u6ce8\u4e8e\u4ea4\u4e92\u4f53\u9a8c\u4ea7\u54c1\u4e0e\u89e3\u51b3\u65b9\u6848\u7684\u54c1\u724c，\u6301\u7eed\u63a2\u7d22\u4ea4\u4e92\u6280\u672f\u5728\u6559\u80b2\u6559\u5b66\u3001\u4ea7\u54c1\u5c55\u793a\u3001\u8fc7\u7a0b\u6a21\u62df\u3001\u64cd\u4f5c\u8bad\u7ec3\u548c\u6570\u636e\u53ef\u89c6\u5316\u7b49\u573a\u666f\u4e2d\u7684\u5e94\u7528\u3002<\/p>\n

\u6211\u4eec\u4e0d\u4ec5\u5206\u4eab\u6280\u672f\u5b9e\u73b0，\u4e5f\u6301\u7eed\u521b\u4f5c\u548c\u6c89\u6dc0\u4ea4\u4e92\u52a8\u753b\u3001\u6570\u5b57\u4f5c\u54c1\u3001\u5f00\u53d1\u6559\u7a0b\u3001\u9879\u76ee\u6848\u4f8b\u4e0e\u884c\u4e1a\u89e3\u51b3\u65b9\u6848，\u5e0c\u671b\u901a\u8fc7\u4ea4\u4e92\u6280\u672f，\u8ba9\u590d\u6742\u4e8b\u7269\u53d8\u5f97\u66f4\u52a0\u5bb9\u6613\u7406\u89e3\u3001\u63a2\u7d22\u3001\u64cd\u4f5c\u548c\u521b\u9020\u3002<\/p>\n

\u516b\u8352\u542f，\u4e13\u4e3a\u4ea4\u4e92\u52a8\u753b\u800c\u751f \u8ba9\u590d\u6742\u4e8b\u7269\u53ef\u63a2\u7d22\u3001\u53ef\u64cd\u4f5c\u3001\u53ef\u53cd\u9988<\/p>\n

\u5982\u679c\u4f60\u6b63\u5728\u5bfb\u627e\u4ea4\u4e92\u4f5c\u54c1\u3001\u5b66\u4e60\u76f8\u5173\u6280\u672f，\u6216\u8005\u5e0c\u671b\u628a\u4e00\u4e2a\u60f3\u6cd5\u8f6c\u5316\u4e3a\u53ef\u5b9e\u9645\u64cd\u4f5c\u7684\u4ea4\u4e92\u9879\u76ee，\u6b22\u8fce\u8bbf\u95ee\u516b\u8352\u542f\u5b98\u7f51\u4e86\u89e3\u66f4\u591a\u6848\u4f8b\u4e0e\u670d\u52a1\u3002<\/p>\n

    \n
  • \u5b98\u65b9\u7f51\u7ad9：https:\/\/bahuangqi.com<\/li>\n
  • \u4e3b\u8981\u5185\u5bb9：\u4ea4\u4e92\u52a8\u753b\u30013D \u53ef\u89c6\u5316\u3001\u6559\u80b2\u4e92\u52a8\u3001\u4eff\u771f\u6a21\u62df\u4e0e\u6280\u672f\u6559\u7a0b<\/li>\n
  • \u5b9a\u5236\u670d\u52a1：\u53ef\u901a\u8fc7\u5b98\u7f51\u63d0\u4ea4\u9700\u6c42\u6216\u8054\u7cfb\u4eba\u5de5\u5ba2\u670d\u8fdb\u884c\u8bc4\u4f30<\/li>\n<\/ul>\n

    \u611f\u8c22\u9605\u8bfb\u3002\u5982\u679c\u672c\u6587\u5bf9\u4f60\u6709\u6240\u5e2e\u52a9，\u6b22\u8fce\u70b9\u8d5e\u3001\u6536\u85cf\u548c\u5173\u6ce8，\u6211\u4eec\u4f1a\u7ee7\u7eed\u5206\u4eab\u66f4\u591a\u4ea4\u4e92\u4f5c\u54c1\u4e0e\u9879\u76ee\u5b9e\u8df5\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"

    Web\u7279\u6548022\u2014Web\u7279\u6548\u7684\u5b9a\u4e49\u4e0e\u8fb9\u754c\u4e3a\u4ec0\u4e48\u770b\u7740\u8fd8\u5f88\u5047：\u989c\u8272\u3001\u6750\u8d28\u4e0e\u5c42\u6b21\u600e\u4e48\u8865
    \n\u672c\u6587\u8ba8\u8bba\u4e3a\u4ec0\u4e48\u6709\u4e9b Web \u7279\u6548\u867d\u7136\u8fd0\u52a8\u6b63\u5e38，\u5374\u59cb\u7ec8\u663e\u5f97\u5355\u8584\u3001\u53d1\u5e73\u6216\u50cf\u5851\u6599\u3002\u6587\u7ae0\u5c06\u4ece\u989c\u8272\u7684\u660e\u6697\u4e0e\u9971\u548c\u5ea6\u3001\u6750\u8d28\u7684\u9ad8\u5149\u4e0e\u7c97\u7cd9\u5ea6\u3001\u524d\u540e\u5c42\u6b21\u7684\u906e\u6321\u4e0e\u900f\u660e\u5173\u7cfb\u5165\u624b，\u628a\u201c\u771f\u5b9e\u611f\u201d\u62c6\u6210\u53ef\u4ee5\u89c2\u5bdf\u548c\u8c03\u6574\u7684\u5177\u4f53\u53c2\u6570，\u518d\u7ed3\u5408 Canvas 2D\u3001\u6e10\u53d8\u3001\u9634\u5f71\u3001\u6df7\u5408\u548c\u7eb9\u7406\u4ee3\u7801，\u8bf4\u660e\u5982\u4f55\u7528\u8f83\u4f4e\u6210\u672c\u8865\u8db3\u753b\u9762\u7684\u4f53\u79ef\u3001\u8ddd\u79bb\u548c\u6750\u8d28\u5dee\u5f02\u3002\u91cd\u70b9\u4e0d\u662f\u8ffd\u6c42\u590d\u6742\u7684\u7269\u7406\u6e32<\/p>\n","protected":false},"author":2,"featured_media":110059,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[9627,12562,12133,12134,11815,12135],"topic":[],"class_list":["post-110060","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-server","tag-webgl","tag-web","tag-12133","tag-12134","tag-11815","tag-12135"],"yoast_head":"\nWeb\u7279\u6548022\u2014Web\u7279\u6548\u7684\u5b9a\u4e49\u4e0e\u8fb9\u754c\u4e3a\u4ec0\u4e48\u770b\u7740\u8fd8\u5f88\u5047\uff1a\u989c\u8272\u3001\u6750\u8d28\u4e0e\u5c42\u6b21\u600e\u4e48\u8865 - \u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3<\/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:\/\/www.wsisp.com\/helps\/110060.html\" \/>\n<meta property=\"og:locale\" content=\"zh_CN\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Web\u7279\u6548022\u2014Web\u7279\u6548\u7684\u5b9a\u4e49\u4e0e\u8fb9\u754c\u4e3a\u4ec0\u4e48\u770b\u7740\u8fd8\u5f88\u5047\uff1a\u989c\u8272\u3001\u6750\u8d28\u4e0e\u5c42\u6b21\u600e\u4e48\u8865 - \u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3\" \/>\n<meta property=\"og:description\" content=\"Web\u7279\u6548022\u2014Web\u7279\u6548\u7684\u5b9a\u4e49\u4e0e\u8fb9\u754c\u4e3a\u4ec0\u4e48\u770b\u7740\u8fd8\u5f88\u5047：\u989c\u8272\u3001\u6750\u8d28\u4e0e\u5c42\u6b21\u600e\u4e48\u8865 \u672c\u6587\u8ba8\u8bba\u4e3a\u4ec0\u4e48\u6709\u4e9b Web \u7279\u6548\u867d\u7136\u8fd0\u52a8\u6b63\u5e38，\u5374\u59cb\u7ec8\u663e\u5f97\u5355\u8584\u3001\u53d1\u5e73\u6216\u50cf\u5851\u6599\u3002\u6587\u7ae0\u5c06\u4ece\u989c\u8272\u7684\u660e\u6697\u4e0e\u9971\u548c\u5ea6\u3001\u6750\u8d28\u7684\u9ad8\u5149\u4e0e\u7c97\u7cd9\u5ea6\u3001\u524d\u540e\u5c42\u6b21\u7684\u906e\u6321\u4e0e\u900f\u660e\u5173\u7cfb\u5165\u624b，\u628a\u201c\u771f\u5b9e\u611f\u201d\u62c6\u6210\u53ef\u4ee5\u89c2\u5bdf\u548c\u8c03\u6574\u7684\u5177\u4f53\u53c2\u6570，\u518d\u7ed3\u5408 Canvas 2D\u3001\u6e10\u53d8\u3001\u9634\u5f71\u3001\u6df7\u5408\u548c\u7eb9\u7406\u4ee3\u7801，\u8bf4\u660e\u5982\u4f55\u7528\u8f83\u4f4e\u6210\u672c\u8865\u8db3\u753b\u9762\u7684\u4f53\u79ef\u3001\u8ddd\u79bb\u548c\u6750\u8d28\u5dee\u5f02\u3002\u91cd\u70b9\u4e0d\u662f\u8ffd\u6c42\u590d\u6742\u7684\u7269\u7406\u6e32\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.wsisp.com\/helps\/110060.html\" \/>\n<meta property=\"og:site_name\" content=\"\u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3\" \/>\n<meta property=\"article:published_time\" content=\"2026-09-25T11:49:37+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.wsisp.com\/helps\/wp-content\/uploads\/2026\/09\/20260925114930-6ab65fcaacabb.png\" \/>\n<meta name=\"author\" content=\"admin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"\u4f5c\u8005\" \/>\n\t<meta name=\"twitter:data1\" content=\"admin\" \/>\n\t<meta name=\"twitter:label2\" content=\"\u9884\u8ba1\u9605\u8bfb\u65f6\u95f4\" \/>\n\t<meta name=\"twitter:data2\" content=\"16 \u5206\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.wsisp.com\/helps\/110060.html\",\"url\":\"https:\/\/www.wsisp.com\/helps\/110060.html\",\"name\":\"Web\u7279\u6548022\u2014Web\u7279\u6548\u7684\u5b9a\u4e49\u4e0e\u8fb9\u754c\u4e3a\u4ec0\u4e48\u770b\u7740\u8fd8\u5f88\u5047\uff1a\u989c\u8272\u3001\u6750\u8d28\u4e0e\u5c42\u6b21\u600e\u4e48\u8865 - \u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3\",\"isPartOf\":{\"@id\":\"https:\/\/www.wsisp.com\/helps\/#website\"},\"datePublished\":\"2026-09-25T11:49:37+00:00\",\"dateModified\":\"2026-09-25T11:49:37+00:00\",\"author\":{\"@id\":\"https:\/\/www.wsisp.com\/helps\/#\/schema\/person\/358e386c577a3ab51c4493330a20ad41\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.wsisp.com\/helps\/110060.html#breadcrumb\"},\"inLanguage\":\"zh-Hans\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.wsisp.com\/helps\/110060.html\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.wsisp.com\/helps\/110060.html#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"\u9996\u9875\",\"item\":\"https:\/\/www.wsisp.com\/helps\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Web\u7279\u6548022\u2014Web\u7279\u6548\u7684\u5b9a\u4e49\u4e0e\u8fb9\u754c\u4e3a\u4ec0\u4e48\u770b\u7740\u8fd8\u5f88\u5047\uff1a\u989c\u8272\u3001\u6750\u8d28\u4e0e\u5c42\u6b21\u600e\u4e48\u8865\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.wsisp.com\/helps\/#website\",\"url\":\"https:\/\/www.wsisp.com\/helps\/\",\"name\":\"\u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3\",\"description\":\"\u9999\u6e2f\u670d\u52a1\u5668_\u9999\u6e2f\u4e91\u670d\u52a1\u5668\u8d44\u8baf_\u670d\u52a1\u5668\u5e2e\u52a9\u6587\u6863_\u670d\u52a1\u5668\u6559\u7a0b\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.wsisp.com\/helps\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"zh-Hans\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.wsisp.com\/helps\/#\/schema\/person\/358e386c577a3ab51c4493330a20ad41\",\"name\":\"admin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"zh-Hans\",\"@id\":\"https:\/\/www.wsisp.com\/helps\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/gravatar.wp-china-yes.net\/avatar\/?s=96&d=mystery\",\"contentUrl\":\"https:\/\/gravatar.wp-china-yes.net\/avatar\/?s=96&d=mystery\",\"caption\":\"admin\"},\"sameAs\":[\"http:\/\/wp.wsisp.com\"],\"url\":\"https:\/\/www.wsisp.com\/helps\/author\/admin\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Web\u7279\u6548022\u2014Web\u7279\u6548\u7684\u5b9a\u4e49\u4e0e\u8fb9\u754c\u4e3a\u4ec0\u4e48\u770b\u7740\u8fd8\u5f88\u5047\uff1a\u989c\u8272\u3001\u6750\u8d28\u4e0e\u5c42\u6b21\u600e\u4e48\u8865 - \u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3","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:\/\/www.wsisp.com\/helps\/110060.html","og_locale":"zh_CN","og_type":"article","og_title":"Web\u7279\u6548022\u2014Web\u7279\u6548\u7684\u5b9a\u4e49\u4e0e\u8fb9\u754c\u4e3a\u4ec0\u4e48\u770b\u7740\u8fd8\u5f88\u5047\uff1a\u989c\u8272\u3001\u6750\u8d28\u4e0e\u5c42\u6b21\u600e\u4e48\u8865 - \u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3","og_description":"Web\u7279\u6548022\u2014Web\u7279\u6548\u7684\u5b9a\u4e49\u4e0e\u8fb9\u754c\u4e3a\u4ec0\u4e48\u770b\u7740\u8fd8\u5f88\u5047：\u989c\u8272\u3001\u6750\u8d28\u4e0e\u5c42\u6b21\u600e\u4e48\u8865 \u672c\u6587\u8ba8\u8bba\u4e3a\u4ec0\u4e48\u6709\u4e9b Web \u7279\u6548\u867d\u7136\u8fd0\u52a8\u6b63\u5e38，\u5374\u59cb\u7ec8\u663e\u5f97\u5355\u8584\u3001\u53d1\u5e73\u6216\u50cf\u5851\u6599\u3002\u6587\u7ae0\u5c06\u4ece\u989c\u8272\u7684\u660e\u6697\u4e0e\u9971\u548c\u5ea6\u3001\u6750\u8d28\u7684\u9ad8\u5149\u4e0e\u7c97\u7cd9\u5ea6\u3001\u524d\u540e\u5c42\u6b21\u7684\u906e\u6321\u4e0e\u900f\u660e\u5173\u7cfb\u5165\u624b，\u628a\u201c\u771f\u5b9e\u611f\u201d\u62c6\u6210\u53ef\u4ee5\u89c2\u5bdf\u548c\u8c03\u6574\u7684\u5177\u4f53\u53c2\u6570，\u518d\u7ed3\u5408 Canvas 2D\u3001\u6e10\u53d8\u3001\u9634\u5f71\u3001\u6df7\u5408\u548c\u7eb9\u7406\u4ee3\u7801，\u8bf4\u660e\u5982\u4f55\u7528\u8f83\u4f4e\u6210\u672c\u8865\u8db3\u753b\u9762\u7684\u4f53\u79ef\u3001\u8ddd\u79bb\u548c\u6750\u8d28\u5dee\u5f02\u3002\u91cd\u70b9\u4e0d\u662f\u8ffd\u6c42\u590d\u6742\u7684\u7269\u7406\u6e32","og_url":"https:\/\/www.wsisp.com\/helps\/110060.html","og_site_name":"\u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3","article_published_time":"2026-09-25T11:49:37+00:00","og_image":[{"url":"https:\/\/www.wsisp.com\/helps\/wp-content\/uploads\/2026\/09\/20260925114930-6ab65fcaacabb.png"}],"author":"admin","twitter_card":"summary_large_image","twitter_misc":{"\u4f5c\u8005":"admin","\u9884\u8ba1\u9605\u8bfb\u65f6\u95f4":"16 \u5206"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.wsisp.com\/helps\/110060.html","url":"https:\/\/www.wsisp.com\/helps\/110060.html","name":"Web\u7279\u6548022\u2014Web\u7279\u6548\u7684\u5b9a\u4e49\u4e0e\u8fb9\u754c\u4e3a\u4ec0\u4e48\u770b\u7740\u8fd8\u5f88\u5047\uff1a\u989c\u8272\u3001\u6750\u8d28\u4e0e\u5c42\u6b21\u600e\u4e48\u8865 - \u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3","isPartOf":{"@id":"https:\/\/www.wsisp.com\/helps\/#website"},"datePublished":"2026-09-25T11:49:37+00:00","dateModified":"2026-09-25T11:49:37+00:00","author":{"@id":"https:\/\/www.wsisp.com\/helps\/#\/schema\/person\/358e386c577a3ab51c4493330a20ad41"},"breadcrumb":{"@id":"https:\/\/www.wsisp.com\/helps\/110060.html#breadcrumb"},"inLanguage":"zh-Hans","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.wsisp.com\/helps\/110060.html"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.wsisp.com\/helps\/110060.html#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"\u9996\u9875","item":"https:\/\/www.wsisp.com\/helps"},{"@type":"ListItem","position":2,"name":"Web\u7279\u6548022\u2014Web\u7279\u6548\u7684\u5b9a\u4e49\u4e0e\u8fb9\u754c\u4e3a\u4ec0\u4e48\u770b\u7740\u8fd8\u5f88\u5047\uff1a\u989c\u8272\u3001\u6750\u8d28\u4e0e\u5c42\u6b21\u600e\u4e48\u8865"}]},{"@type":"WebSite","@id":"https:\/\/www.wsisp.com\/helps\/#website","url":"https:\/\/www.wsisp.com\/helps\/","name":"\u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3","description":"\u9999\u6e2f\u670d\u52a1\u5668_\u9999\u6e2f\u4e91\u670d\u52a1\u5668\u8d44\u8baf_\u670d\u52a1\u5668\u5e2e\u52a9\u6587\u6863_\u670d\u52a1\u5668\u6559\u7a0b","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.wsisp.com\/helps\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"zh-Hans"},{"@type":"Person","@id":"https:\/\/www.wsisp.com\/helps\/#\/schema\/person\/358e386c577a3ab51c4493330a20ad41","name":"admin","image":{"@type":"ImageObject","inLanguage":"zh-Hans","@id":"https:\/\/www.wsisp.com\/helps\/#\/schema\/person\/image\/","url":"https:\/\/gravatar.wp-china-yes.net\/avatar\/?s=96&d=mystery","contentUrl":"https:\/\/gravatar.wp-china-yes.net\/avatar\/?s=96&d=mystery","caption":"admin"},"sameAs":["http:\/\/wp.wsisp.com"],"url":"https:\/\/www.wsisp.com\/helps\/author\/admin"}]}},"_links":{"self":[{"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/posts\/110060","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/comments?post=110060"}],"version-history":[{"count":0,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/posts\/110060\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/media\/110059"}],"wp:attachment":[{"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/media?parent=110060"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/categories?post=110060"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/tags?post=110060"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/topic?post=110060"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}