пример
Нарисуйте квадратичные кривые Безье:
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() | 4,0 | 9,0 | 3,6 | 4,0 | 10,1 |
Определение и использование
quadraticCurveTo() метод добавляет точку к текущему пути, используя указанные контрольные точки , которые представляют собой квадратичный кривой Безье.
Квадратичная кривая Безье требует двух точек. Первая точка является точкой управления, который используется при вычислении квадратичной Безье и вторая точка является конечной точкой для кривой. Отправной точкой для кривой является последней точкой в пути тока. Если путь не существует, используйте beginPath() и moveTo() методы для определения начальной точки.
Начальная точка:
moveTo( 20,20 ) Контрольная точка:
quadraticCurveTo( 20,100 ,200,20) Конечная точка:
quadraticCurveTo(20,100, 200,20 ) Tip: Проверьте bezierCurveTo() метод. Он имеет две контрольные точки-вместо одного.
| Синтаксис JavaScript: | context . quadraticCurveTo( cpx,cpy,x,y ) ; |
|---|
Значения параметров
| параметр | Описание | Сыграй |
|---|---|---|
| cpx | Х-координата точки управления Безье | Сыграй " |
| cpy | У-координата точки управления Безье | Сыграй " |
| x | Х-координата конечной точки | Сыграй " |
| y | У-координаты конечной точки | Сыграй " |