quadraticcurveto() 绘制二次贝塞尔曲线，需控制点与终点，起点为当前路径末点；控制点决定弯曲程度，常见于圆角、抛物线轨迹、手绘线条等；易错点包括未设起点、误解控制点作用及抗锯齿问题。
Canvas 的 quadraticCurveTo() 方法用于绘制二次贝塞尔曲线，它只需要一个控制点和一个终点，比三次贝塞尔更轻量，适合画平滑弧线、弹道轨迹、手绘感线条或简易图标轮廓。
基本语法与坐标逻辑
调用前必须先用 moveTo() 或已有路径起点作为曲线的起始点。语法为：
其中：
— cpX/cpY 是唯一的控制点坐标，决定曲线弯曲方向和程度；
— endX/endY 是曲线终点；
— 起点是当前路径的最后一个点（非控制点）。
控制点越远离起点与终点连线，曲线拱起越明显；若控制点落在起点到终点的直线上，结果退化为直线段。
常见实用场景与写法
-
绘制圆角矩形的一角：用
lineTo()到圆角起点，再用quadraticCurveTo()指向圆角终点，控制点设在直角顶点偏移处（如向内缩r距离） -
模拟抛物线运动轨迹：将控制点设在“最高点正上方”（如
startX + (endX-startX)/2,startY - height），终点为落地位置，视觉上接近物理抛物线 - 手绘风格线条优化：对鼠标连续点序列做简化后，每三连点（P₀, P₁, P₂）用 P₀ 为起点、P₁ 为控制点、P₂ 为终点绘制一段二次曲线，比直线连接更自然
易错点与调试技巧
- 忘记设置起点 —— 曲线不会显示，务必确认已调用
moveTo()或前序有路径终点 - 控制点坐标理解偏差 —— 它不在线上，而是像“磁力点”牵引路径弯曲，可临时用
fillRect(cpX-2, cpY-2, 4, 4)标出控制点辅助观察 - 抗锯齿导致细曲线发虚 —— 可开启
ctx.imageSmoothingEnabled = false（对 canvas 内容无影响），或确保坐标使用整数值减少亚像素渲染 - 想闭合曲线时勿直接
closePath()—— 它会连回起点而非沿曲线闭合，需手动计算并用另一段quadraticCurveTo()衔接
简单示例：画一个微笑弧线
以 (100,150) 为起点，(200,200) 为终点，控制点在它们上方中间位置，形成向上凸的弧：
ctx.beginPath();ctx.moveTo(100, 150);
ctx.quadraticCurveTo(150, 100, 200, 150);
ctx.stroke();
这里控制点 (150,100) 在起点与终点连线的中垂线上方，所以画出的是饱满的“微笑”形状。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
