Javascript метод quadraticCurveTo()

Метод quadraticCurveTo() добавляет точку к текущему контуру, используя особые контрольные точки, представляющие квадратичную кривую Безье.

Для квадратичной кривой Безье требуется две точки. Первая точка - контрольная. Она используются для вычисления кривой Безье. Вторая точка - конечная точка кривой. Начальная точка кривой Безье - последняя точка текущего контура. Если контур еще не задан, то следует использовать методы beginPath() и moveTo(), чтобы определить начальную точку.

Квадратичная кривая Безье

Начальная точка:
moveTo(20,20)
Контрольная точка:
quadraticCurveTo(20,100,200,20)
Конечная точка:
quadraticCurveTo(20,100,200,20)

Примечание: См. метод bezierCurveTo(), который требует задавать две контрольные точки вместо одной.

JavaScript синтаксис: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();