第三集：给胖子加阴影，给瘦子加渐变

“老板要求按钮要‘有质感’，我加了渐变，他夸我‘有艺术细菌’。”
—— 某位刚被升职的前端小可爱

大家好，欢迎来到《Canvas 翻车指南》第三集！
前面我们已经能把直线掰成彩虹，今天给这些彩虹加特技：

• 线性渐变（LinearGradient）——让颜色像牙膏一样挤出来
• 径向渐变（RadialGradient）——太阳公公打翻调色盘
• 阴影三板斧（shadowOffset / blur / color）——让图形飘起来，像加班的魂

准备好可乐，咱们把“扁平”画成“立体”，把“单调”画成“duang～”！

一、线性渐变：给矩形刷“彩虹牙膏”

API 签名：

const g = ctx.createLinearGradient(x0, y0, x1, y1);
g.addColorStop(位置0~1, 颜色);

画一条“牙膏条”：

const g = ctx.createLinearGradient(0, 0, 300, 0);
g.addColorStop(0, '#ff0066');
g.addColorStop(0.5, '#ffd23f');
g.addColorStop(1, '#06ffa5');

ctx.fillStyle = g;
ctx.fillRect(50, 50, 300, 80);

刷新一看：
左粉右青，中间蛋黄，像极了奶茶店的渐变杯套。
把 x1 改成 0、y1 改成 300，立刻变成纵向彩虹，一秒切换天空幕布。

口诀：

“Linear 像牙膏，挤一挤彩虹到。”

二、径向渐变：画个“伪 3D”球，老板以为你开了 WebGL

API 签名：

const g = ctx.createRadialGradient(cx0, cy0, r0, cx1, cy1, r1);

整一个“阳光橙子”：

const g = ctx.createRadialGradient(150, 150, 20, 150, 150, 80);
g.addColorStop(0, '#fff5b7');
g.addColorStop(1, '#ff8a00');

ctx.fillStyle = g;
ctx.beginPath();
ctx.arc(150, 150, 80, 0, Math.PI * 2);
ctx.fill();

刷新：
黄心橙皮的球体闪瞎眼，阴影一加都能冒充 3D。
把圆心偏移 10 像素，高光跑路，瞬间变成烂橙子——翻车也是艺术。

口诀：

“Radial 像太阳，中心跑偏变烂橘。”

三、阴影三板斧：让图形飘起来，像加班的魂

组合技：

ctx.shadowOffsetX = 10;
ctx.shadowOffsetY = 10;
ctx.shadowBlur = 20;
ctx.shadowColor = 'rgba(0,0,0,0.3)';

画个“悬浮方块”：

ctx.shadowOffsetX = 8;
ctx.shadowOffsetY = 8;
ctx.shadowBlur = 25;
ctx.shadowColor = 'rgba(0,0,0,0.4)';

ctx.fillStyle = '#48dbfb';
ctx.fillRect(80, 80, 150, 150);

刷新：
方块飘起来，像PPT 里加了动画，老板直呼“高级”。
别忘了画完阴影要清零，否则下一笔全带影子，像鬼片现场：

ctx.shadowColor = 'transparent'; // 关灯

四、合体技：渐变 + 阴影，一键出“高级感”按钮

目标：圆角矩形按钮，横向粉紫渐变，悬浮灰阴影。

// 1. 渐变
const g = ctx.createLinearGradient(0, 0, 250, 0);
g.addColorStop(0, '#ff6b9d');
g.addColorStop(1, '#c44569');

// 2. 阴影
ctx.shadowOffsetX = 0;
ctx.shadowOffsetY = 8;
ctx.shadowBlur = 16;
ctx.shadowColor = 'rgba(0,0,0,0.25)';

// 3. 圆角矩形（先画路径）
ctx.beginPath();
ctx.moveTo(75, 50);
ctx.arcTo(325, 50, 325, 100, 20);
ctx.arcTo(325, 100, 75, 100, 20);
ctx.arcTo(75, 100, 75, 50, 20);
ctx.arcTo(75, 50, 325, 50, 20);
ctx.closePath();

ctx.fillStyle = g;
ctx.fill();

刷新：
粉紫按钮带着柔和阴影，像 Dribbble 首页的宠儿。
再加文字就能直接上线骗下载量。

五、翻车警告：渐变“断层”& 阴影“ pollution”

1. 渐变颜色少于两段，像没墨水的打印机，丑到哭泣。
2. 忘记关阴影，后续路径全拖着影子，画面像幽灵开会。
3. createRadialGradient 的 r0 > r1，太阳变黑洞，直接吞色。

六、性能彩蛋：透明度的正确姿势

画“呼吸幽灵”：

function breath() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.globalAlpha = 0.6 + Math.sin(Date.now()/300)*0.4;
  ctx.fillStyle = '#00ffcc';
  ctx.beginPath();
  ctx.arc(200, 200, 60, 0, Math.PI*2);
  ctx.fill();
  requestAnimationFrame(breath);
}
breath();

globalAlpha 控制整体透明，记得画完设回 1，否则后面全半透明，像没睡醒。

七、本集知识点一口闷

八、课后作业（翻车 field）

1. 画一个“悬浮唱片”：

   • 黑胶径向渐变（深灰→黑）
   • 加阴影飘起来
   • 中心再画小圆当“标签”
2. 做“渐变色卡”：10 条线性渐变矩形，HSL 色相循环，截屏直接当 UI 配色方案。
3. Bonus：让唱片旋转 + 呼吸透明，点击暂停/播放，瞬间拥有音乐 App 即视感。

九、下集预告

第四集《让火柴人动起来：帧动画与 requestAnimationFrame》
带你拆素材、算帧率、写“跑酷火柴人”，帧稳 60 不卡成 PPT，老板看完直接给你加预算！

“人生就像渐变，
你以为自己在过渡，
其实只是颜色停在了丑不拉几的断点。”

—— 我说的。

第三集结束，点赞、转发、晒按钮，
下集一起让火柴人蹦迪，回见！