пример
Нарисуйте кубическую кривую Безье:
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 9, Firefox, Opera, Chrome, Safari и поддержка bezierCurveTo() метод.
Примечание: Internet Explorer 8 и более ранних версий, не поддерживают <canvas> элемент.
Определение и использование
bezierCurveTo() метод добавляет точку к текущему пути, используя заданные контрольные точки , которые представляют собой кубическую кривую Безье.
Кубическая кривая Безье требует три очка. Первые два пункта являются контрольные точки, которые используются при вычислении кубического Безье и последняя точка является конечной точкой для кривой. Отправной точкой для кривой является последней точкой в пути тока. Если путь не существует, используйте beginPath() и moveTo() методы для определения начальной точки.
Совет: Проверьте quadraticCurveTo() метод.Она имеет одну контрольную точку вместо двух.
| Синтаксис JavaScript: | context.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y); |
|---|
Значения параметров
| параметр | Описание | Сыграй |
|---|---|---|
| cp1x | Х-координата первой контрольной точки Безье | Сыграй " |
| cp1y | Y-координата первой контрольной точки Безье | Сыграй " |
| cp2x | Х-координата второй точки управления Безье | Сыграй " |
| cp2y | Y-координата второй точки управления Безье | Сыграй " |
| x | Х-координата конечной точки | Сыграй " |
| y | Y-координата конечной точки | Сыграй " |