Перейти к содержанию

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(), который требует задавать одну контрольную точку вместо двух.

Синтаксис

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()

Ссылки