跳到主要内容

bezierCurveTo

2023年08月12日
柏拉文
越努力，越幸运

一、认识​

ctx.bezierCurveTo() 是 Canvas 2D API 绘制三次贝赛尔曲线路径的方法。该方法需要三个点。第一、第二个点是控制点，第三个点是结束点。起始点是当前路径的最后一个点，绘制贝赛尔曲线前，可以通过调用 moveTo() 进行修改。

二、语法​

ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);

  • cp1x: 第一个控制点的 x 轴坐标。

  • cp1y: 第一个控制点的 y 轴坐标。

  • cp2x: 第二个控制点的 x 轴坐标。

  • cp2y: 第二个控制点的 y 轴坐标。

  • x: 结束点的 x 轴坐标。

  • y: 结束点的 y 轴坐标。

三、场景​

3.1 贝塞尔曲线​

<canvas id="canvas"></canvas>

<script>
    const canvas = document.querySelector('#canvas');
    canvas.width = 500;
    canvas.height = 500;
    const ctx = canvas.getContext('2d');

    ctx.beginPath();
    ctx.moveTo(100, 100);
    ctx.bezierCurveTo(50, 50, 50, 150, 100, 300);
    ctx.stroke();
</script>