пример
Нарисуйте квадратичную кривую Безье:
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(); Попробуй сам " Поддержка браузеров
Числа в таблице указать первую версию браузера, который полностью поддерживает метод.
| метод | |||||
|---|---|---|---|---|---|
| quadraticCurveTo() | да | 9.0 | да | да | да |
Определение и использование
quadraticCurveTo() метод добавляет точку к текущему пути, используя заданные контрольные точки , которые представляют собой квадратичную кривую Безье.
Квадратичная кривая Безье требует двух точек. Первая точка является точкой управления, который используется при расчете квадратичной Безье и вторая точка является конечной точкой для кривой. Отправной точкой для кривой является последней точкой в пути тока. Если путь не существует, используйте beginPath() и moveTo() методы для определения начальной точки.
Начальная точка:
MoveTo (20,20) Контрольная точка:
quadraticCurveTo (20100, 200,20) Конечная точка:
quadraticCurveTo (20100, 200,20) Совет: Проверьте bezierCurveTo() метод.Он имеет две контрольные точки-вместо одного.
| Синтаксис JavaScript: | context.quadraticCurveTo(cpx,cpy,x,y); |
|---|
Значения параметров
| параметр | Описание | Сыграй |
|---|---|---|
| cpx | Х-координата точки управления Безье | Сыграй " |
| cpy | Y-координата точки управления Безье | Сыграй " |
| x | Х-координата конечной точки | Сыграй " |
| y | Y-координата конечной точки | Сыграй " |