quadraticCurveTo绘制的是仅含一个控制点的二次贝塞尔曲线，参数为控制点坐标和终点坐标，起点为当前路径终点，调用前须用moveTo显式指定起点。
quadraticCurveTo 画的是二次贝塞尔曲线，不是三次
很多人看到 quadraticCurveTo 就默认它能画“带两个控制点”的曲线，结果发现画出来弯得不对——其实它只接受**一个控制点**和**一个终点**，起点是当前路径的终点（即上一步的 moveTo 或前一个绘图命令结束位置）。这是最常踩的坑：把它当 bezierCurveTo 用。
它的数学本质是：起点 P₀（隐式）、控制点 P₁、终点 P₂，曲线严格落在这三点构成的抛物线段上。
-
quadraticCurveTo(cpX, cpY, endX, endY)：前两个参数是控制点坐标，后两个是终点坐标 - 调用前必须先用
moveTo(x, y)或已有路径终点设好起点，否则会从(0, 0)开始画（可能看不见） - 控制点越远离起点-终点连线，曲线拱起越明显；控制点落在连线中点正上方时，曲线对称且最“圆润”
canvas 中 quadraticCurveTo 的完整调用链不能省略 moveTo
单独写 quadraticCurveTo(100, 50, 200, 100) 很可能什么也不显示——因为起点默认是 (0, 0)，而你没声明要从哪开始画。必须显式指定起点。
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(50, 150); // 必须！这是曲线的起点 P₀
ctx.quadraticCurveTo(100, 50, 200, 150); // P₁=(100,50), P₂=(200,150)
ctx.stroke();
如果想连续画多段二次贝塞尔（比如波浪线），每段的起点就是上一段的终点，这时可以省略中间的 moveTo，但第一段仍需。
立即学习“前端免费学习笔记（深入）”；
和 bezierCurveTo 混用时要注意当前点状态
在同一个 beginPath() 内混用 quadraticCurveTo 和 bezierCurveTo 是完全可行的，但它们对“当前点”的更新逻辑一致：每次调用都会把终点设为新的当前点。容易出错的是在调用之间插入了 lineTo 或 arc 却忘了当前点已变。
-
quadraticCurveTo(a,b,c,d)执行后，当前点变成(c, d) -
bezierCurveTo(p1x,p1y,p2x,p2y,x,y)执行后，当前点变成(x, y) - 如果想从某点出发画二次曲线，又不确定当前点在哪，保险做法是加一句
moveTo(x, y)重置
例如画一个“先直后弯再直”的路径：
ctx.beginPath(); ctx.moveTo(20, 100); ctx.lineTo(80, 100); // 当前点现在是 (80,100) ctx.quadraticCurveTo(120, 60, 160, 100); // 从 (80,100) 出发，经 (120,60) 到 (160,100) ctx.lineTo(220, 100); // 接着从 (160,100) 画直线 ctx.stroke();
移动端或高 DPI 屏幕下曲线锯齿？别怪 quadraticCurveTo
quadraticCurveTo 本身不负责抗锯齿，Canvas 的平滑效果取决于上下文设置和设备像素比。如果你发现曲线边缘发虚或有阶梯感，问题通常不在方法调用，而在渲染配置：
- 确保设置了
canvas.width和canvas.height为整数，并匹配 CSS 显示尺寸（避免浏览器缩放插值） - 启用抗锯齿：
ctx.imageSmoothingEnabled = true（默认就是 true，但某些环境会关） - 高 DPI 设备上，需要手动缩放 canvas 缓冲区：用
window.devicePixelRatio放大width/height，再用 CSS 缩回显示尺寸
曲线本身的几何精度足够高，锯齿基本是采样或缩放导致的视觉问题，不是算法缺陷。
