Метод БезьеCurveTo() холста HTML
Пример
Нарисуйте кубическую кривую Безье:
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();
Поддержка браузера
Цифры в таблице указывают на первую версию браузера, полностью поддерживающую метод.
Method | |||||
---|---|---|---|---|---|
bezierCurveTo() | 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Определение и использование
Метод bezierCurveTo() добавляет точку к текущему пути, используя указанные контрольные точки, представляющие кубическую кривую Безье.
Кубическая кривая Безье требует трех точек. Первые две точки являются контрольными точками, которые используются в кубическом вычислении Безье, а последняя точка является конечной точкой кривой. Начальной точкой кривой является последняя точка текущего пути. Если путь не существует, используйте методы beginPath() и moveTo() для определения начальной точки.
Начальная точка
перейти( 20, 20 )
Контрольная точка 1
БезьеКурвеТо( 20, 100 , 200, 100, 200, 20)
Контрольная точка 2
Кривая БезьеТо(20, 100, 200, 100 , 200, 20)
Конечная точка
Кривая БезьеТо(20, 100, 200, 100, 200, 20 )
Совет: ознакомьтесь с методом quadraticCurveTo() . У него одна контрольная точка вместо двух.
Синтаксис JavaScript: | контекст .bezierCurveTo( cp1x, cp1y, cp2x, cp2y, x, y ); |
---|
Значения параметров
Parameter | Description | Play it |
---|---|---|
cp1x | The x-coordinate of the first Bézier control point | |
cp1y | The y-coordinate of the first Bézier control point | |
cp2x | The x-coordinate of the second Bézier control point | |
cp2y | The y-coordinate of the second Bézier control point | |
x | The x-coordinate of the ending point | |
y | The y-coordinate of the ending point |