HTML canvas quadraticCurveTo()Метод

HTML canvas 参考手册Справочное руководство по HTML canvas

Примеры

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

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

Попробуйте сами »

Поддержка браузеров

Internet Explorer Firefox Opera Google Chrome Safari

Internet Explorer 9, Firefox, Opera, Chrome и Safari поддерживают метод quadraticCurveTo().

Примечание:Internet Explorer 8 и более ранние версии не поддерживают элемент <canvas>.

Определение и использование

Метод 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-координата конечной точки.

HTML canvas 参考手册Справочное руководство по HTML canvas Другие расширения