arcTo

2023年08月12日

柏拉文

越努力，越幸运

一、认识

---

ctx.arcTo() 是 Canvas 2D API 根据控制点和半径绘制圆弧路径，使用当前的描点 (前一个 moveTo 或 lineTo 等函数的止点)。根据当前描点与给定的控制点 1 连接的直线，和控制点 1 与控制点 2 连接的直线，作为使用指定半径的圆的切线，画出两条切线之间的弧线路径。

二、语法

---

ctx.arcTo(x1, y1, x2, y2, radius);

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

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

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

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

• radius: 圆弧的半径。

三、场景

---

3.1 圆弧

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

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

    ctx.strokeStyle = 'blue';
    ctx.beginPath();
    ctx.moveTo(100, 0);
    ctx.lineTo(100, 100);
    ctx.lineTo(0, 100);
    ctx.stroke();

    ctx.beginPath();
    ctx.strokeStyle = 'red';
    ctx.moveTo(100, 0);
    ctx.arcTo(100, 100, 0, 100, 100);
    ctx.stroke();
</script>