CanvasRenderingContext2D: метод quadraticCurveTo()

Метод CanvasRenderingContext2D.quadraticCurveTo() API холста 2D добавляет квадратичную кривую Безье к текущей подтраектории. Он требует две точки: первая — контрольная точка, а вторая — конечная точка. Начальная точка — последняя точка в текущей траектории, которую можно изменить с помощью moveTo() перед созданием квадратичной кривой Безье.

cpx

Координата x контрольной точки.

cpy

Координата y контрольной точки.

x

Координата x конечной точки.

y

Координата y конечной точки.

None (undefined).

Этот пример демонстрирует, как рисуется квадратичная кривая Безье.

HTML

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

JavaScript

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

// Quadratic Bézier curve
ctx.beginPath();
ctx.moveTo(50, 20);
ctx.quadraticCurveTo(230, 30, 50, 100);
ctx.stroke();

// Start and end points
ctx.fillStyle = "blue";
ctx.beginPath();
ctx.arc(50, 20, 5, 0, 2 * Math.PI); // Start point
ctx.arc(50, 100, 5, 0, 2 * Math.PI); // End point
ctx.fill();

// Control point
ctx.fillStyle = "red";
ctx.beginPath();
ctx.arc(230, 30, 5, 0, 2 * Math.PI);
ctx.fill();

Результат

В этом примере контрольная точка красная, а начальная и конечные точки синие.

Этот пример рисует простую квадратичную кривую Безье с использованием quadraticCurveTo().

HTML

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

JavaScript

Кривая начинается в точке, заданной moveTo(): (20, 110). Контрольная точка расположена в (230, 150). Кривая заканчивается в точке (250, 20).

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

ctx.beginPath();
ctx.moveTo(20, 110);
ctx.quadraticCurveTo(230, 150, 250, 20);
ctx.stroke();

Результат

• Интерфейс, определяющий этот метод: CanvasRenderingContext2D
• Кривая Безье