📘arcTo()

browser ⟩ canvas ⟩ path ⟩ curve ⟩ arcTo()

💈範例

moveTo(A), arcTo(B,C)

⭐️ 注意：arcTo(B, C) 所畫出的弧

• 剛開始有一段從 A 出發的直線。

• 不會經過 B。

• 也不會連直線到 C。

💾 replit：canvas arcTo()

⬆️ 需要： Vector, drawOnCanvas2D()

const { PI } = Math;

// degrees
function deg(x) { return PI * x / 180 }

// draw on canvas
drawOnCanvas2D('#playground', (ctx) => {

    const A = vec(200, 40);
    const B = A.plus(0, 120);
    const C = A.plus(-150, 0);
    const R = 40, r = 8;
    const wholeRound = [0, 2 * PI];

    // draw point
    function point(P, color) {
        ctx.beginPath();
        if (color) ctx.fillStyle = color;
        ctx.arc(...P.coords, r, ...wholeRound);
        ctx.fill();
    }

    // label point
    function label(text, p, offset = [15, 0]) {
        ctx.fillText(text, ...p.plus(...offset).coords);
    }

    // Tangential lines (from A to B to C)
    ctx.beginPath();
    ctx.moveTo(...A.coords);
    ctx.lineTo(...B.coords);
    ctx.lineTo(...C.coords);

    ctx.strokeStyle = 'gray';
    ctx.stroke();

    // Arc (from A to C, controlled by B)
    ctx.beginPath();
    ctx.moveTo(...A.coords);
    ctx.arcTo(...B.coords, ...C.coords, R);

    ctx.strokeStyle = 'black';
    ctx.lineWidth = 5;
    ctx.stroke();

    // points
    point(A, 'blue');   // start point
    point(B, 'red');    // control point 1
    point(C);           // control point 2

    // labels
    ctx.font = 'bold 24px serif';
    ctx.fillStyle = 'black';
    label(`A`, A);
    label(`B`, B);
    label(`C`, C);

    ctx.font = '12px monospace';
    label(`moveTo(A)`, vec(250, 100));
    label(`arcTo(B, C)`, vec(250, 120));

});

📘 手冊

• CanvasRenderingContext2D ⟩

  • .arc() - (center, radius) will add a line from current point to arc start if current point present.
  • .arcTo() - commonly used for making rounded corners.

⬇️ 應用

• ctx.roundedRect() - rounded rect (subpath)