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 конечной точки
Спецификация¶
Пример¶
Нарисуем кубическую кривую Безье:
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()
Ссылки¶
- Метод
bezierCurveTo()
MDN (рус.)