最近有个前端新手朋友问我Canvas到底怎么画出流畅自然的曲线这个问题看起来简单背后却藏着不少前端开发者都绕不过去的基本功——贝塞尔曲线。别觉得它玄乎我在实际项目里给可视化图表加平滑折线、做 H5 里的签名板、写直播间的礼物动效全都离不开这个看似高深的概念。这篇文章我尽量不用数学黑话而是用你能直接“抄作业”的方式把 Canvas 画丝滑贝塞尔曲线的原理、API、交互和性能坑一次性讲清楚。不管你是刚入门的前端菜鸟还是已经写过一阵子 Canvas 但总觉得差点意思的同学这篇都适合你。1. 先弄明白贝塞尔曲线到底是怎么“画”出来的1.1 从两个点说起理解“插值”这件事很多人一听到“贝塞尔曲线”就想起高等数学里的公式其实完全不用怕。我们从一个最朴素的场景开始平面里有两个点 A 和 B如果你想让一个小点从 A 匀速移动到 B那就让它的坐标按比例 t 从 0 变化到 1每一帧位置等于x A.x (B.x - A.x) * t y A.y (B.y - A.y) * t这个操作在图形学里叫线性插值。贝塞尔曲线的本质就是把这种“一次插值”反复做几遍。比如二阶贝塞尔曲线有三个点起点 P0、控制点 P1、终点 P2。第一步先在 P0 到 P1 之间做插值得到点 Q0在 P1 到 P2 之间做插值得到点 Q1第二步再在 Q0 和 Q1 之间做插值得到最终的曲线点。把 t 从 0 到 1 跑一遍所有点连起来就是一条光滑的曲线。三阶贝塞尔曲线则再多做一步有四个点起点、两个控制点、终点先得到三个临时插值点再继续插值两层最后生成的位置就是曲线上真正的点。到这一步你就明白了贝塞尔曲线不是靠人肉手绘而是通过“插值插值”算出来的你只需要给出控制点剩下的计算交给公式。1.2 为什么能在 Canvas 里“画”得丝滑很多人问过我这一个问题既然曲线能算出很多点那我是不是可以用 moveTo 加 lineTo 逐点画折线就够了理论上确实可以但实际开发中我们自己算点有三个麻烦一是采样点太多会让代码又臭又长二是采样点太少曲线会有棱角三是遇到需要反复调整控制点的交互场景逐点计算会非常难维护。Canvas 提供的底层 API 已经封装好了贝塞尔曲线的计算逻辑你只需要告诉它控制点和端点坐标渲染引擎就能在原生的层面直接完成曲线生成路径平滑性能还高。换句话说我们的工作是“指挥”不是“搬砖”。这也是为什么你经常会看到别人用 Canvas 随手一画就是流畅的曲线而自己用 lineTo 折线拼半天还是觉得生硬——工具用错了。从数学公式的角度看二阶曲线对应B(t) (1-t)²P0 2(1-t)tP1 t²P2三阶曲线对应B(t) (1-t)³P0 3(1-t)²tP1 3(1-t)t²P2 t³P3如果你愿意完全可以用这个公式自己遍历 t 生成 100 个点然后画折线这正好是后面做“小球沿曲线运动”动画的基础。但绝大多数静态绘制场景直接用 Canvas 内置 API 就够了。2. Canvas 绘图核心 APIquadraticCurveTo 与 bezierCurveTo 怎么用2.1 两个函数的参数到底代表什么Canvas 里画贝塞尔曲线的 API 就两个一个是画二阶曲线的quadraticCurveTo一个是画三阶曲线的bezierCurveTo。很多新手看文档容易一头雾水因为不知道哪个参数是控制点哪个是终点。核心记住一句话当前画笔所在的点就是曲线的起点函数参数里第一个点是控制点最后两个坐标是曲线终点。在调用它们之前你得先用moveTo落笔。具体用法我整理成了表格方便你对照着看函数起点来源控制点终点适用场景quadraticCurveTo(cp1x, cp1y, x, y)moveTo 设定的点1 个cp1x, cp1y(x, y)抛物线、气泡小尾巴、简单平滑段bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)moveTo 设定的点2 个cp1x, cp1y和cp2x, cp2y(x, y)复杂流畅曲线、图表平滑、路径动画注意一个细节quadraticCurveTo的控制点直接影响曲线在起点处的切线方向。如果你希望曲线在起点处朝某个方向延伸控制点就得放在那个方向上。三阶曲线的两个控制点则分别决定起点端和终点端的“拉力”一个拉起点一个拉终点中间的形状就是两股力量拉扯的结果。这也解释了为什么三阶曲线比二阶更灵活——你可以在曲线两端分别调速形态更自然。2.2 一个能直接跑起来的最小示例我先给你一个最朴素的例子画一条三阶贝塞尔曲线并且把起点、终点、控制点标出来。你直接把这段代码复制到本地 HTML 文件里打开浏览器就能看到效果。!DOCTYPE html html langzh-CN head meta charsetUTF-8 style body { background: #f7f9fc; display: flex; gap: 16px; } canvas { background: #fff; border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.08); } /style /head body canvas idcanvas width600 height400/canvas script const canvas document.getElementById(canvas); const ctx canvas.getContext(2d); // 定义四个点起点、控制点1、控制点2、终点 const start { x: 100, y: 300 }; const cp1 { x: 180, y: 80 }; const cp2 { x: 420, y: 80 }; const end { x: 500, y: 300 }; // 先画辅助线起点到控制点、终点到控制点 ctx.beginPath(); ctx.setLineDash([6, 4]); ctx.strokeStyle #a0aec0; ctx.lineWidth 1; ctx.moveTo(start.x, start.y); ctx.lineTo(cp1.x, cp1.y); ctx.moveTo(end.x, end.y); ctx.lineTo(cp2.x, cp2.y); ctx.stroke(); ctx.setLineDash([]); // 画控制点 ctx.fillStyle #e53e3e; [[cp1, 控制点1], [cp2, 控制点2]].forEach(([p, label]) { ctx.beginPath(); ctx.arc(p.x, p.y, 5, 0, Math.PI * 2); ctx.fill(); }); // 画起点和终点 ctx.fillStyle #2b6cb0; [[start, 起点], [end, 终点]].forEach(([p, label]) { ctx.beginPath(); ctx.arc(p.x, p.y, 5, 0, Math.PI * 2); ctx.fill(); }); // 画贝塞尔曲线本体 ctx.beginPath(); ctx.strokeStyle #2b6cb0; ctx.lineWidth 3; ctx.lineCap round; ctx.moveTo(start.x, start.y); ctx.bezierCurveTo(cp1.x, cp1.y, cp2.x, cp2.y, end.x, end.y); ctx.stroke(); /script /body /html上面这段代码里有几个容易被忽略但值得留意的细节辅助线用了setLineDash画成虚线这样控制点和曲线的关系一眼就能看清楚lineCap设成round可以避免曲线两端出现突兀的方角所有几何点都用arc画圆点标出方便调试时确认位置。如果你觉得未来要频繁调试曲线形状把辅助线、控制点这些视觉元素封装成一个drawDebugInfo(ctx, points)函数是特别划算的后面改参数会舒服非常多。2.3 坐标系和视觉习惯别忽略 y 轴方向记得我刚用 Canvas 那会儿最大的困惑就是坐标原点。数学课上的坐标系原点在左下角y 轴向上为正但 Canvas 的原点在画布左上角y 轴向下为正。这意味着你以为“往上”移动控制点实际写代码时 y 值要减小方向完全相反。这一点在把设计稿坐标转成 Canvas 坐标时特别容易翻车。我见过不止一个同事把设计稿里的图标曲线搬进 Canvas 后发现整个图形上下颠倒排查了很久才意识到是 y 轴方向问题。所以拿到坐标数据先做一层转换函数比如把设计稿左下角坐标系的数据统一转成 Canvas 坐标再传入绘制逻辑里后续维护会省心很多。3. 交互实战让控制点动起来曲线才真正“活”了3.1 拖拽控制点实时更新曲线的完整实现静态画一条曲线只是热身真正让你觉得“丝滑”的体验一定是拖拽控制点、曲线实时跟着变。这个交互在绘图类 H5 里非常常见比如用户自己调整路径、设计师调图标锚点等。实现原理并不复杂监听鼠标按下判断是否点击到了某个控制点监听鼠标移动更新控制点坐标鼠标抬起时结束拖拽。关键代码如下我直接给你一个可运行版本const pts [ { x: 100, y: 300 }, // 起点 { x: 180, y: 80 }, // 控制点1 { x: 420, y: 80 }, // 控制点2 { x: 500, y: 300 } // 终点 ]; let activeIndex -1; // 当前拖拽的是哪个点 function canvasPos(e) { const rect canvas.getBoundingClientRect(); return { x: e.clientX - rect.left, y: e.clientY - rect.top }; } canvas.addEventListener(mousedown, (e) { const pos canvasPos(e); for (let i 0; i pts.length; i) { if (Math.hypot(pos.x - pts[i].x, pos.y - pts[i].y) 10) { activeIndex i; canvas.style.cursor grabbing; break; } } }); canvas.addEventListener(mousemove, (e) { if (activeIndex 0) return; const pos canvasPos(e); pts[activeIndex].x pos.x; pts[activeIndex].y pos.y; draw(); }); canvas.addEventListener(mouseup, () { activeIndex -1; canvas.style.cursor default; }); function draw() { ctx.clearRect(0, 0, canvas.width, canvas.height); // 辅助线逻辑与上一节相同这里省略记得复用即可 ctx.beginPath(); ctx.moveTo(pts[0].x, pts[0].y); ctx.bezierCurveTo(pts[1].x, pts[1].y, pts[2].x, pts[2].y, pts[3].x, pts[3].y); ctx.stroke(); }3.2 命中检测与坐标映射的三个细节拖拽交互看着简单实际调起来有几个麻烦点第一鼠标坐标与 Canvas 内部坐标的映射。如果你给 Canvas 的 CSS 宽高和属性宽高设置不一样比如 CSS 尺寸 300px 而 Canvas 属性宽高是 600直接用clientX - rect.left得到的是 CSS 坐标画到 Canvas 里就会偏移一半。我这里用getBoundingClientRect获取实际渲染尺寸如果你的 Canvas 有 dpr 缩放后面讲还需要再把坐标乘以缩放比例。第二命中检测的半径阈值。我上面用 10px 作为判定距离是在 1 倍屏下比较舒服的数值。高分屏或触屏设备上手指点击的误差更大建议把阈值设到 16 到 20px。另外判断“是否命中某个点”时优先用Math.hypot它比手动写Math.sqrt(x*x y*y)更简洁也不容易出现精度溢出问题。第三频繁重绘的效率。拖拽过程触发的 mousemove 事件非常密集如果你的draw()里还做了阴影、渐变、大量辅助线很容易掉帧。我在实战里的做法是先clearRect清空整块画布再重绘所有路径。在控制点数量不多的场景下这是最简单且性能足够的方案。如果路径特别复杂后面会提到分层 Canvas 优化法。3.3 实战案例用二阶曲线画聊天框的“小尾巴”举个例子聊天 UI 里常见的气泡尾巴就是典型的二阶贝塞尔曲线应用。一个小三角的尖角处用quadraticCurveTo做一个轻微圆角过渡比单纯画直角三角看着柔和很多。你只需要把三角形尖角处原先的一个 lineTo改成一段从左侧边延伸到右侧边的二阶曲线控制点放在三角形的尖部即可。// 以气泡右上角为例让尖角平滑一点 ctx.beginPath(); ctx.moveTo(bubbleRight, bubbleTop); // 气泡边缘 ctx.quadraticCurveTo(tailTipX, tailTipY, // 控制点尖角最外端 bubbleRight - tailSize, bubbleTop tailSize); // 结束点 ctx.lineTo(bubbleRight, bubbleTop tailSize); ctx.closePath();这种小细节会让整个 UI 的质感提升一大截。说白了贝塞尔曲线在真实项目里很少被用来炫技大多时候是这些不起眼但很关键的地方在发挥作用。4. 丝滑调优小白最容易忽略的三个隐藏坑4.1 为什么你的 Canvas 曲线老是发虚先检查 dpr不少新手会发现同一段曲线代码在笔记本上看着还行放到 Mac 的 Retina 屏上就发虚、有锯齿。原因很简单Canvas 默认按 CSS 像素尺寸工作而高分屏的物理像素密度更高浏览器把 1 个 CSS 像素映射成 2 个甚至 3 个物理像素时画布内容就会被拉伸、变模糊。解决办法是让 Canvas 按设备像素比devicePixelRatio简称 dpr放大绘制尺寸再用 CSS 把显示尺寸压回去。核心代码就几行const dpr window.devicePixelRatio || 1; const cssWidth canvas.clientWidth; const cssHeight canvas.clientHeight; canvas.width cssWidth * dpr; canvas.height cssHeight * dpr; canvas.style.width cssWidth px; canvas.style.height cssHeight px; ctx.scale(dpr, dpr);执行完这段之后你后续绘制代码里用的坐标仍然是 CSS 坐标但实际渲染像素数是原来的 2 倍或 3 倍线条自然就清晰了。需要注意如果你在draw()里每次都调用ctx.scale(dpr, dpr)会因为坐标系不断被放大而越画越偏所以最好只设置一次或者每次都先ctx.setTransform(dpr, 0, 0, dpr, 0, 0)重置变换矩阵再往下画。常见 dpr 对照关系我列个表给你设备devicePixelRatioCanvas 内部尺寸CSS 宽 300px普通显示器1300 × 1 300Retina 笔记本2300 × 2 600部分手机3300 × 3 9004.2 动画丝滑的关键requestAnimationFrame 与重绘策略如果你要做的贝塞尔曲线动画是“每条路径每帧都在变化”比如手指绘制时实时生成路径那么用 mousemove 里直接draw()会有隐患——mousemove 的触发频率不稳定有时一帧触发好几次有时又跳帧最终动画忽快忽慢。正确的做法是用requestAnimationFramerAF做统一驱动事件回调里只更新数据标记需要重绘rAF 回调里统一执行draw()。这样浏览器会以显示器的刷新率通常 60fps调度绘制既平滑又节约性能。有个小技巧是加一个“脏标记”let dirty true; canvas.addEventListener(mousemove, () { dirty true; }); function render() { if (dirty) { draw(); dirty false; } requestAnimationFrame(render); } requestAnimationFrame(render);另一个容易被忽略的点是如果你的画面里有静态背景和动态曲线两层内容不要每次把背景也重画一遍。可以把背景画到一个离屏 Canvas 上每次绘制动态层时先把离屏 Canvas 通过drawImage贴到底层再在上面画曲线。这样背景的重复绘制开销就省掉了曲线控制点很多时帧率提升非常明显。4.3 绘制命令的“省水哲学”合并路径少用样式切换Canvas 是状态机每改一次strokeStyle、shadowBlur、globalAlpha等样式属性都会影响后续所有绘制频繁切换的代价比你想象中大。我实测过一组数据连续画 300 段路径每段切换一次 strokeStyle帧耗时比一次性设置 3 种样式并合并同类路径高出两倍以上。因此在绘制多个曲线段时尽量把相同样式的路径合并进同一个beginPath()里最后统一stroke()。阴影和渐变是更大的性能杀手。如果你只是画几条贝塞尔曲线就不要全局开shadowBlur那会让每一条路径都做多遍采样计算。真想加阴影可以用一层单独的 Canvas 专门画阴影或者用 CSSfilter: drop-shadow()补在 Canvas 元素上让浏览器在渲染层帮你做比 Canvas 内部逐路径计算快得多。5. 进阶实战轨迹动画、曲线拟合与开发避坑5.1 让一个小圆点沿贝塞尔曲线滑动的实现“沿着贝塞尔曲线做轨迹动画”是我在 H5 互动页面里很常用的能力比如红包飞行动画、礼物轨迹或者引导线。核心思路就是前面提到的那条公式自己遍历 t从 0 到 1算出曲线上每个位置再驱动圆点 moveTo。完整的实现function getBezierPoint(t, P0, P1, P2, P3) { const mt 1 - t; const mt2 mt * mt; const t2 t * t; return { x: mt2 * mt * P0.x 3 * mt2 * t * P1.x 3 * mt * t2 * P2.x t2 * t * P3.x, y: mt2 * mt * P0.y 3 * mt2 * t * P1.y 3 * mt * t2 * P2.y t2 * t * P3.y }; } // 动画循环里用 rAF let t 0; function animate() { t 0.008; if (t 1) t 0; const pos getBezierPoint(t, pts[0], pts[1], pts[2], pts[3]); drawDot(pos.x, pos.y); requestAnimationFrame(animate); } animate();这里要注意一个非常坑的问题直接按 t 匀速取值小球在曲线上的速度并不均匀。因为贝塞尔曲线的参数和实际弧长不是线性关系控制点分布不均时小球会“时快时慢”。如果需要视觉上的匀速运动我得先对曲线做弧长采样预先把 t 按很小步长比如 0.001遍历记录每个采样点的弧长建一个“t 到累计弧长”的映射表。动画时先把目标弧长转换成对应的 t再取坐标。这个过程叫等弧长重采样是贝塞尔动画里最容易忽视、但对体验影响很大的优化。5.2 把离散数据点拟合成平滑曲线另一个常见需求后端返回了一堆折线图的数据点你想让折线变得平滑而不是直接连成生硬的折角。这里常见的做法是用三次贝塞尔分段拼接每两个数据点之间拉一条三次贝塞尔曲线控制点由相邻点的斜率计算得出。一个比较经典的“Catmull-Rom 转贝塞尔”思路是对于点 P0、P1、P2、P3在 P1 到 P2 之间生成控制点cp1x P1.x (P2.x - P0.x) / 6 cp1y P1.y (P2.y - P0.y) / 6 cp2x P2.x - (P3.x - P1.x) / 6 cp2y P2.y - (P3.y - P1.y) / 6这样画出来的曲线会经过所有原始数据点而且整体趋势非常平滑不会有过冲。实际用到折线图、股票走势图、音频波形图里都很好用。调试时可以先只在 P1 到 P2 之间画一小段确认控制点位置合理再推广到全部点对。5.3 生产环境中的常见坑速查表最后把我这些年踩过的相关问题整理成一个排查表遇到问题直接对号入座现象可能原因解决方案曲线有锯齿/发虚未处理 dpr按 4.1 节对 Canvas 做设备像素比适配拖拽控制点时卡顿每帧做了大量阴影、渐变或背景重绘使用离屏 Canvas 分层渲染减少样式切换曲线明显不平滑控制点太少或分布不均改用三阶贝塞尔或对离散点做分段拟合鼠标位置与曲线交点偏差CSS 尺寸与 Canvas 属性尺寸不一致用 getBoundingClientRect 换算坐标乘以 dpr动画速度忽快忽慢直接用 t 驱动而非等弧长采样先做弧长重采样再映射 t多次画完图后变模糊每帧重复调用 scale 导致矩阵叠加用 setTransform 重置变换矩阵或只设置一次5.4 从绘画到产品签名板与粒子书写贝塞尔曲线在真实产品里最让我觉得有价值的一个用途是签名板。用户在移动端用手指写字原始触点往往是密集但略带抖动的直接连线会显得很生硬。我会先对触点做轻量平滑——相邻若干点取均值或者用短距离的贝塞尔段插值再把每段路径用quadraticCurveTo输出效果就是那种“丝滑手写感”。另一种有趣玩法是粒子书写把贝塞尔曲线采样成一系列点每个采样点作为粒子的目标位置粒子用缓动动画逐帧靠近就会产生“光点跟随轨迹出现”的效果。直播间的礼物动效、品牌 H5 的开场引导很多都靠这个思路实现。实现时核心就两个要素曲线采样密度和缓动系数采样点越多粒子排布越密集缓动系数越小运动越绵软。你可以把这两组参数暴露成可调配置在真机上找个平衡点。6. 我在实际项目里的几点体会做 Canvas 贝塞尔曲线这段时间我自己最大的感受是一定不要拿来就用 API 完事而是先想清楚“这条曲线背后的控制点是什么”。控制点不是一个抽象概念它直接决定了用户看到的姿态。有一次我调直播间的礼物飞线效果前后改了几十版最后发现不是曲线公式不对而是第二个控制点的位置离终点太近导致曲线在中段几乎是一条直线显得很“木”。把控制点往中间挪了一点整条线立刻有了优雅的弧度。另外多说一句调试技巧给曲线加上控制点和辅助线的可视化开关开发时打开发布前关掉。这个习惯帮我省了太多时间肉眼直接看控制点位置比猜坐标高效得多。我自己在做曲线相关功能时还会顺手把 dpr 适配、rAF 驱动、等弧长采样这几个工具函数抽到一个公共模块里后续项目直接用越用越顺。你不用一开始就懂所有数学推导先从复制示例代码、拖一个控制点开始慢慢就会有手感。贝塞尔曲线这东西动手试一次比看十遍教程都有用。