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