html5canvas怎么画贝塞尔曲线_quadraticCurveTo方法使用说明【详解】

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 缩回显示尺寸

曲线本身的几何精度足够高，锯齿基本是采样或缩放导致的视觉问题，不是算法缺陷。

# css # html # html5 # 浏览器 # win # canva # canvas # 算法 # 的是 # 这是 # 塞尔 # 落在 # 如果你 # 也不 # 是在 # 抗锯齿 # 一句 # 已有