CanvasRenderingContext2D: метод bezierCurveTo()
Базовая поддержка Широко доступен
Эта функция хорошо поддерживается многими устройствами и версиями браузеров. Она доступна во всех браузерах с июля 2015 года.
Метод CanvasRenderingContext2D.bezierCurveTo() API Canvas 2D добавляет кубическую кривую Безье к текущей подтраектории. Он требует три точки: две первые — контрольные точки, а третья — конечная точка. Начальная точка — последняя точка в текущей траектории, которую можно изменить с помощью moveTo() перед созданием кривой Безье.
Синтаксис
bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)
Параметры
Возвращаемое значение
None (undefined).
Примеры
Как работает bezierCurveTo
В этом примере показано, как рисуется кубическая кривая Безье.
HTML
<canvas id="canvas"></canvas>
JavaScript
// Define canvas and context
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
// Define the points as {x, y}
let start = { x: 50, y: 20 };
let cp1 = { x: 230, y: 30 };
let cp2 = { x: 150, y: 80 };
let end = { x: 250, y: 100 };
// Cubic Bézier curve
ctx.beginPath();
ctx.moveTo(start.x, start.y);
ctx.bezierCurveTo(cp1.x, cp1.y, cp2.x, cp2.y, end.x, end.y);
ctx.stroke();
// Start and end points
ctx.fillStyle = "blue";
ctx.beginPath();
ctx.arc(start.x, start.y, 5, 0, 2 * Math.PI); // Start point
ctx.arc(end.x, end.y, 5, 0, 2 * Math.PI); // End point
ctx.fill();
// Control points
ctx.fillStyle = "red";
ctx.beginPath();
ctx.arc(cp1.x, cp1.y, 5, 0, 2 * Math.PI); // Control point one
ctx.arc(cp2.x, cp2.y, 5, 0, 2 * Math.PI); // Control point two
ctx.fill();
Результат
В этом примере контрольные точки красные, а начальная и конечная точки — синие.
Простая кривая Безье
В этом примере рисуется простая кривая Безье с помощью bezierCurveTo().
HTML
<canvas id="canvas"></canvas>
JavaScript
Кривая начинается в точке, заданной moveTo(): (30, 30). Первая контрольная точка находится в (120, 160), а вторая — в (180, 10). Кривая заканчивается в (220, 140).
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(30, 30);
ctx.bezierCurveTo(120, 160, 180, 10, 220, 140);
ctx.stroke();
Результат
Спецификации
| Спецификация |
|---|
| HTML # dom-context-2d-beziercurveto-dev |
Совместимость с браузерами
| Десктопные | Мобильные | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Opera | Safari | Chrome Android | Firefox для Android | Opera Android | Safari на iOS | Samsung Internet | WebView Android | |
bezierCurveTo |
1 | 12 | 1.5 | 11.6 | 2 | 18 | 4 | 12 | 1 | 1.0 | 4.4 |
См. также
- Интерфейс, определяющий этот метод:
CanvasRenderingContext2D - Кривая Безье
© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/bezierCurveTo
