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

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

<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas>
<div class="playable-buttons">
  <input id="edit" type="button" value="Edit" />
  <input id="reset" type="button" value="Reset" />
</div>
<textarea id="code" class="playable-code">
ctx.beginPath();
ctx.bezierCurveTo(50, 100, 180, 10, 20, 10);
ctx.stroke();</textarea>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var textarea = document.getElementById("code");
var reset = document.getElementById("reset");
var edit = document.getElementById("edit");
var code = textarea.value;

function drawCanvas() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  eval(textarea.value);
}

reset.addEventListener("click", function() {
  textarea.value = code;
  drawCanvas();
});

edit.addEventListener("click", function() {
  textarea.focus();
})

textarea.addEventListener("input", drawCanvas);
window.addEventListener("load", drawCanvas);

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

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

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

Возможность Chrome Firefox (Gecko) Internet Explorer Opera Safari
Базовая поддержка (Да) (Да) (Да) (Да) (Да)
Возможность Android Chrome для Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Базовая поддержка (Да) (Да) (Да) (Да) (Да) (Да)

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

Метки документа и участники

 Внесли вклад в эту страницу: ows-nightwolf
 Обновлялась последний раз: ows-nightwolf,