CanvasRenderingContext2D.bezierCurveTo()

Сводка

Метод CanvasRenderingContext2D.bezierCurveTo(), предоставляемый Canvas 2D API, добавляет кубическую кривую Безье к контуру. Для построения требуются три точки. Первые две точки являются контрольными, а третья - конечной. Начальной точкой является последняя точка в текущем контуре, и она может быть изменена методом moveTo() перед созданием кривой Безье.

Синтаксис

void ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);

Параметры

cp1x
Координата первой контрольной точки по оси x.
cp1y
Координата первой контрольной точки по оси y.
cp2x
Координата второй контрольной точки по оси x.
cp2y
Координата второй контрольной точки по оси y.
x
Координата конечной точки по оси x.
y
Координата конечной точки по оси y.

Примеры

Использование метода bezierCurveTo

Ниже представлен простой фрагмент кода, рисующий кривую Безье. Контрольные точки нарисованы красным цветом, а начальная и конечная точки - синим.

HTML

<canvas id="canvas"></canvas>

JavaScript

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

ctx.beginPath();
ctx.moveTo(50,20);
ctx.bezierCurveTo(230, 30, 150, 60, 50, 100);
ctx.stroke();

ctx.fillStyle = 'blue';
// начальная точка
ctx.fillRect(50, 20, 10, 10);
// конечная точка
ctx.fillRect(50, 100, 10, 10);

ctx.fillStyle = 'red';
// первая контрольная точка
ctx.fillRect(230, 30, 10, 10);
// вторая контрольная точка
ctx.fillRect(150, 70, 10, 10);

Практическое применение bezierCurveTo

Вы можете редактировать код, представленный ниже, и внесённые вами изменения отобразятся на холсте в режиме реального времени:

Спецификации

Спецификация Статус Комментарии
HTML Living Standard
Определение 'CanvasRenderingContext2D.beziercurveto' в этой спецификации.
Живой стандарт  

Совместимость с браузерами

BCD tables only load in the browser

Смотрите также