quadraticCurveTo()¶
Метод quadraticCurveTo()
добавляет точку к текущему контуру, используя особые контрольные точки, представляющие квадратичную кривую Безье.
Для квадратичной кривой Безье требуется две точки. Первая точка - контрольная. Она используются для вычисления кривой Безье. Вторая точка - конечная точка кривой. Начальная точка кривой Безье - последняя точка текущего контура. Если контур еще не задан, то следует использовать методы beginPath()
и moveTo()
, чтобы определить начальную точку.
Начальная точка: moveTo(20, 20)
Контрольная точка: quadraticCurveTo(20, 100, 200, 20)
Конечная точка: quadraticCurveTo(20, 100, 200, 20)
Примечание: См. метод bezierCurveTo()
, который требует задавать две контрольные точки вместо одной.
Синтаксис¶
context.quadraticCurveTo(cpx, cpy, x, y);
Параметры¶
cpx
- Координата X контрольной точки кривой Безье
cpy
- Координата Y контрольной точки кривой Безье
x
- Координата X конечной точки
y
- Координата Y конечной точки
Спецификация¶
Пример¶
Нарисуем квадратичную кривую Безье:
JavaScript:
var c = document.getElementById('myCanvas')
var ctx = c.getContext('2d')
ctx.beginPath()
ctx.moveTo(20, 20)
ctx.quadraticCurveTo(20, 100, 200, 20)
ctx.stroke()
Ссылки¶
- Метод
quadraticCurveTo()
MDN (рус.)