HTML canvas bezierCurveTo()Метод

Canvas 对象参考手册Объект Canvas

Пример

Нарисуйте кубическую кривую Безье:

Ваш браузер не поддерживает тег HTML5 canvas.

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 Firefox Opera Google Chrome Safari

Internet Explorer 9, Firefox, Opera, Chrome и Safari поддерживают метод bezierCurveTo().

Примечание:Internet Explorer 8 и более ранние версии не поддерживают элемент <canvas>.

Определение и использование

Метод bezierCurveTo() добавляет точку к текущему пути, используя указанные контрольные точки, которые представляют кубическую кривую Безье.

Кубическая кривая Безье требует трех точек. Первые две точки — контрольные точки, используемые в вычислении кубической кривой Безье, а третья точка — конечная точка кривой. Начальная точка кривой — последняя точка текущего пути. Если путь не существует, используйтеbeginPath()иmoveTo()метод для определения начальной точки.

三次贝塞尔曲线

Начальная точка:
moveTo(20,20)
Контрольная точка 1:
bezierCurveTo(20,100,200,100,200,20)
Контрольная точка 2:
bezierCurveTo(20,100,200,100,200,20)
Конечная точка:
bezierCurveTo(20,100,200,100,200,20)

Совет:См.quadraticCurveTo()метод. У него одна контрольная точка вместо двух.


Синтаксис JavaScript: context.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y);

Значения параметров

Параметр Описание
cp1x x-координата первой контрольной точки Безье.
cp1y y-координата первой контрольной точки Безье.
cp2x x-координата второй контрольной точки Безье.
cp2y y-координата второй контрольной точки Безье.
x x-координата конечной точки.
y y-координата конечной точки.

Canvas 对象参考手册Объект Canvas

Другие расширения