第二集：直线不够弯？贝塞尔曲线教你画彩虹！

“老板让我画个曲线，我画了条折线，他说我像折翼的天使。”
—— 某位不愿透露姓名的前端小可爱

欢迎来到《Canvas 翻车指南》第二集！
上一集我们画出了人生第一根“蚯蚓直线”，今天咱们给它掰弯——
不，是优雅地弯成彩虹，顺便学会 Canvas 里最香的两条曲线 API：

• quadraticCurveTo（二次贝塞尔，简称“二贝”）
• bezierCurveTo（三次贝塞尔，简称“三贝”）

准备好奶茶，咱们把直线掰成麻花！

一、复习：直线三步走

ctx.beginPath();
ctx.moveTo(50, 100);
ctx.lineTo(550, 100);
ctx.stroke();

今天升级：只改一个方法，直线就能变彩虹桥。
秘诀就是——加控制点，让数学替我们弯。

二、二次贝塞尔：一口吃不成胖子，但能吃成弯的

API 签名：

ctx.quadraticCurveTo(cpx, cpy, x, y);

• cpx, cpy：控制点，像“磁铁”把线吸弯
• x, y：终点

画个“拱桥”：

ctx.beginPath();
ctx.moveTo(50, 150);                // 起点
ctx.quadraticCurveTo(300, 50, 550, 150); // 控制点悬空，线被吸上去
ctx.strokeStyle = '#ff6b6b';
ctx.lineWidth = 8;
ctx.stroke();

刷新一看：
一条红桥优雅地趴在画布上，像极了我周末瘫在沙发上的脊梁。
改控制点 y 值，桥高实时变化，比改 PPT 图形还爽。

口诀：

“二贝一个磁铁，线被吸成彩虹桥。”

三、三次贝塞尔：两个磁铁，想怎么扭就怎么扭

API 签名：

ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);

• 两个控制点 = 双磁铁
• 适合S 型、回环、爱心、屁股等各种骚造型

先画个“彩虹 S”：

ctx.beginPath();
ctx.moveTo(50, 100);
ctx.bezierCurveTo(150, 50, 450, 150, 550, 100);
ctx.strokeStyle = '#48dbfb';
ctx.lineWidth = 8;
ctx.stroke();

再看画布：
蓝色 S 型跃然屏上，像极了我KPI 被领导扭来扭去的样子。
把控制点上下对调，就能瞬间得到反 S，心情好了还能画个屁股（真的）。

口诀：

“三贝俩磁铁，扭出 KPI。”

四、实战：5 条曲线拼成“彩虹条”

目标：用 hsl 颜色循环，画 7 条彩虹拱，不借助图片，纯手绘。

const rainbow = ['#ff0000','#ff7f00','#ffff00','#00ff00','#0000ff','#4b0082','#9400d3'];
rainbow.forEach((color, i) => {
  ctx.beginPath();
  ctx.moveTo(50, 150 + i*8);
  ctx.quadraticCurveTo(300, 50 + i*8, 550, 150 + i*8);
  ctx.strokeStyle = color;
  ctx.lineWidth = 6;
  ctx.stroke();
});

刷新——一道彩虹卧在画布，程序员瞬间拥有美术总监的灵魂。
把 quadraticCurveTo 换成 bezierCurveTo，彩虹会更飘，像加了滤镜的抖音天空。

五、翻车现场：为什么我的曲线“裂开”？

症状：两条曲线首尾相接，结果接缝处突然折断。
原因：忘记 beginPath()，旧路径还在，墨迹乱飞。

解决：
每段新曲线前必喊：

ctx.beginPath();

就像老板讲话前必清嗓子，仪式感拯救人生。

六、进阶彩蛋：让彩虹“扭”起来

把控制点 y 值交给 requestAnimationFrame，彩虹秒变活体水草：

let t = 0;
function animate() {
  ctx.clearRect(0,0,canvas.width,canvas.height);
  rainbow.forEach((color, i) => {
    ctx.beginPath();
    ctx.moveTo(50, 150 + i*8);
    const cy = 80 + Math.sin(t + i*0.5) * 30; // 控制点抖动
    ctx.quadraticCurveTo(300, cy, 550, 150 + i*8);
    ctx.strokeStyle = color;
    ctx.lineWidth = 6;
    ctx.stroke();
  });
  t += 0.03;
  requestAnimationFrame(animate);
}
animate();

刷新后，彩虹此起彼伏，像音乐节观众席的荧光棒。
帧率稳 60，老板看了都说“加到你的 OKR 里”。

七、本集知识点一口闷

八、课后作业（翻车 field）

1. 用二次贝塞尔画笑脸嘴巴，加两条直线当眼睛，凑成极简表情。
2. 用三次贝塞尔画爱心（提示：对称双磁铁，顶点重合）。
3. Bonus：让爱心一蹦一跳，像微信红包掉落；点击画布重新掉落一颗，瞬间拥有“七夕特效”。

九、下集预告

第三集《给胖子加阴影，给瘦子加渐变》
带你玩转：

• 线性渐变、径向渐变，让圆球看起来像 3D 弹珠；
• 阴影 blur、offset，让图形飘起来；
• 透明 globalAlpha，画出会呼吸的幽灵按钮。

“人生就像贝塞尔曲线，
你以为自己在走直线，
其实只是被生活这两个磁铁，悄悄扭成了 S。”

—— 我说的。

第二集结束，点赞、转发、晒曲线，
下集一起给彩虹加“灵魂阴影”，回见！