Рисование кривых Безье в Canvas

Кривые Безье — это математические кривые, которые широко используются в компьютерной графике для создания плавных и красивых кривых. Они были впервые разработаны французским инженером Пьером Безье в 1960-х годах для описания автомобильных кузовов в компании Renault. Кривые Безье могут быть различных порядков, включая линейные (порядка 1), квадратичные (порядка 2), кубические (порядка 3) и т. д.

Для рисования кривых Безье в Canvas доступны следующие методы: quadraticCurveTo() и bezierCurveTo()

Рисование с помощью метода quadraticCurveTo()

Этот метод добавляет кривую Безье к текущему пути, определяемую начальной точкой пути (текущей позицией), одной контрольной точкой (cp1x, cp1y) и конечной точкой (x, y). Это квадратичная кривая Безье.

Синтаксис:

quadraticCurveTo(cpx, cpy, x, y)

Параметры:

Пример:

ctx.beginPath();
ctx.moveTo(50, 50); // Начальная точка

// Квадратичная кривая Безье с одной контрольной точкой
ctx.quadraticCurveTo(100, 150, 150, 50);

ctx.stroke(); // Рисуем контур пути

Результат:

Рисование с помощью метода bezierCurveTo()

Этот метод добавляет кривую Безье к текущему пути, определяемую начальной точкой пути (текущей позицией), двумя контрольными точками (cp1x, cp1y) и (cp2x, cp2y) и конечной точкой (x, y). Это кубическая кривая Безье.

Синтаксис:

bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)

Параметры:

Пример:

ctx.beginPath();
ctx.moveTo(50, 50); // Начальная точка
ctx.bezierCurveTo(100, 100, 150, 150, 200, 50); // Кубическая кривая Безье
ctx.stroke(); // Рисуем контур пути

Результат: