Javascript метод bezierCurveTo()

Метод bezierCurveTo() добавляет точку к текущему контуру, используя заданные контрольные точки, которые представляют кубическую кривую Безье.

Для кубической кривой Безье требуется три точки. Первые две точки - контрольные. Они используются для вычислении кривой Безье. Третья точка - конечная точка кривой. Начальная точка кривой Безье - последняя точка текущего контура. Если контур еще не задан, то следует использовать методы beginPath() и moveTo(), чтобы определить начальную точку.

Кубическая кривая Безье

Начальная точка
moveTo(20,20)
Контрольная точка 1
bezierCurveTo(20,100,200,100,200,20)
Контрольная точка 2
bezierCurveTo(20,100,200,100,200,20)
Конечная точка
bezierCurveTo(20,100,200,100,200,20)

Примечание: См. метод quadraticCurveTo(), который требует задавать одну контрольную точку вместо двух.

JavaScript синтаксис: context.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);

Значения параметров

Параметр Описание
cp1x Координата X первой контрольной точки кривой Безье
cp1y Координата Y первой контрольной точки кривой Безье
cp2x Координата X второй контрольной точки кривой Безье
cp2y Координата Y второй контрольной точки кривой Безье
x Координата X конечной точки
y Координата Y конечной точки

Пример

Нарисуем кубическую кривую Безье:

Ваш браузер не поддерживает HTML5 тег canvas.

JavaScript:


var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.moveTo(20,20);
ctx.bezierCurveTo(20,100,200,100,200,20);
ctx.stroke();