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

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

• HTML Living Standard

Пример

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

Ваш браузер не поддерживает 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()

Ссылки

• Метод quadraticCurveTo() ^{MDN (рус.)}