Canvas金属色关键在于明暗节奏与高光过渡，通过createLinearGradient精心设置色标位置、颜色及透明度，可高效模拟不锈钢、拉丝铝或镀铬光泽。
使用Canvas线性渐变绘制金属色，关键不是“模拟真实金属”，而是用明暗节奏+高光过渡制造视觉质感。HTML5的createLinearGradient本身不带金属属性，但通过精心设计色标（stop）的位置、颜色和透明度，可以高效复现不锈钢、拉丝铝或镀铬的典型光泽效果。
一、理解金属色的视觉构成
典型金属感来自三个要素：基础色调（如冷灰、青灰）、方向性明暗过渡（受假想光源影响）、局部高光（小面积亮白或浅蓝）。Canvas中无法自动打光，需手动在渐变中模拟——例如从深灰→中灰→亮银→高光白→略暗灰，形成“凹凸错觉”。
二、创建金属渐变的实用代码结构
以“垂直拉丝不锈钢”为例（常见于按钮、圆角矩形）：
const ctx = canvas.getContext('2d');
const gradient = ctx.createLinearGradient(0, 0, 0, canvas.height); // 垂直方向
// 深灰底色（阴影）
gradient.addColorStop(0, '#2a2a2a');
// 主体中灰（金属本色）
gradient.addColorStop(0.3, '#6a6a6a');
// 亮银过渡（反光区）
gradient.addColorStop(0.5, '#b0b0b0');
// 高光（窄带，增强锐利感）
gradient.addColorStop(0.52, '#e8e8e8');
// 略压暗收尾（避免发飘）
gradient.addColorStop(1, '#4a4a4a');
ctx.fillStyle = gradient;
ctx.fillRect(50, 50, 200, 100); // 应用到矩形
三、提升质感的4个关键技巧
- 色标位置要紧凑：高光区域（如0.5→0.52）跨度不宜超过5%，否则显得“脏”；暗部过渡可稍缓（0→0.3）增强体积感
- 慎用纯白/纯黑：真实金属极少出现#ffffff或#000000，推荐高光用#f0f0f0～#e8e8e8，暗部用#2a2a2a～#3a3a3a
-
叠加细微噪点（可选）：用
globalAlpha = 0.03随机画小点，模拟拉丝纹理，避免过度平滑 -
匹配图形朝向设渐变方向：画水平长条时改用
createLinearGradient(0, 0, canvas.width, 0)，让高光沿长度方向延伸
四、常见金属色参考值（RGB或十六进制）
直接复制调整即可：
立即学习“前端免费学习笔记（深入）”；
-
哑光铝：
#a0a0a0 → #c8c8c8 → #d8d8d8 → #b8b8b8（平缓过渡，无强高光） -
镜面铬：
#1a1a1a → #3a3a3a → #8a8a8a → #f5f5f5 → #5a5a5a（窄高光+两端压暗） -
铜锈质感：
#4a2a1a → #7a5a3a → #b8987a → #d8c8b8 → #8a6a4a（暖棕系+绿调微调）
不复杂但容易忽略：金属感70%来自渐变节奏，30%来自图形边缘是否干净（抗锯齿开启、strokeWidth=0或1）、以及背景是否为中性灰（避免纯白背景吃掉暗部细节）。
