[TOC]

  • canvas quadraticCurveTo() 方法用于在画布上创建二次曲线。该方法通过使用表示二次参数曲线的指定控制点向当前路径添加一个点。

    context.quadraticCurveTo( cx, cy, x, y );

  • cx:此参数保存二次控制点的x坐标。

  • cy:该参数保存二次控制点的y坐标。
  • x: 此参数指定终点的x坐标。
  • y: 此参数指定终点的y坐标。 :::info 其中x,y是终点的坐标，而cx,cy是曲线控制点的坐标？那么起点在哪里？起点在此之前用moveTo确定。
    我们由moveTo确定的起点和quadraticCurveTo自身确定的终点，可以连接成一条直线，由于quadraticCurveTo只有一个控制点，这个控制点不是在直线左边，就是在直线右边，所以，quadraticCurveTo永远只能画弧线，画不出S形。 :::

    案例

    image.png ```javascript <!DOCTYPE html>
    您的浏览器不支持 HTML5 canvas 标签。

``` 这里画了两条辅助线，一条是起点与终点的连接线，一条是起点到控制点再到终点的辅助线（其实是两条），这两条线的交汇点就是quadraticCurveTo的控制点坐标。