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

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

JavaScript

js
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

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

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

Specification
HTML Standard
# dom-context-2d-beziercurveto-dev

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

BCD tables only load in the browser

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