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

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 конечной точки

Спецификация

Пример

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

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

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

Ссылки