ЛУЧШИЙ САЙТ ДЛЯ РАЗРАБОТЧИКОВ
×

HTML Ссылки

HTML по Алфавиту HTML по Категориям HTML Атрибуты Тегов HTML Атрибуты Глобал HTML Атрибуты Событий HTML Цвета HTML Холсты HTML Аудио / Видео HTML Наборы символов HTML DOCTYPEs HTML Кодирование URL HTML Языковые коды HTML Коды стран HTTP Ответы сервера HTTP Методы PX в EM конвертер Горячие клавиши



HTML холст bezierCurveTo() Метод

❮ HTML Справка на полотно

Пример

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

YourbrowserdoesnotsupporttheHTML5canvastag.

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.moveTo(20,20);
ctx.bezierCurveTo(20,100,200,100,200,20);
ctx.stroke();

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

Internet Explorer Firefox Opera Google Chrome Safari

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

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


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

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

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

A cubic bezier curve

Start point
moveTo(20,20)
Control point 1
bezierCurveTo(20,100,200,100,200,20)
Control point 2
bezierCurveTo(20,100,200,100,200,20)
End point
bezierCurveTo(20,100,200,100,200,20)

Совет: Проверьте метод quadraticCurveTo(). Он имеет одну контрольную точку вместо двух.


Синтаксис JavaScript: context.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y);

❮ HTML Справка на полотно