CanvasRenderingContext2D: метод roundRect()

Метод CanvasRenderingContext2D.roundRect() API 2D-холста добавляет скругленный прямоугольник в текущую траекторию.

Радиусы углов можно задать так же, как и свойство CSS border-radius.

Как и другие методы, изменяющие текущую траекторию, этот метод напрямую ничего не отрисовывает. Чтобы нарисовать скругленный прямоугольник на холсте, можно использовать методы fill() или stroke().

x

Координата x начальной точки прямоугольника в пикселях.

y

Координата y начальной точки прямоугольника в пикселях.

width

Ширина прямоугольника. Положительные значения — вправо, отрицательные — влево.

height

Высота прямоугольника. Положительные значения — вниз, отрицательные — вверх.

radii

Число или список, определяющие радиусы дуги, используемой для углов прямоугольника. Количество и порядок радиусов работают так же, как и свойство CSS border-radius, когда width и height являются положительными:

• all-corners
• [all-corners]
• [top-left-and-bottom-right, top-right-and-bottom-left]
• [top-left, top-right-and-bottom-left, bottom-right]
• [top-left, top-right, bottom-right, bottom-left]

Если width является отрицательным, скругленный прямоугольник переворачивается по горизонтали, поэтому значения радиусов, которые обычно применяются к левым углам, используются для правых и наоборот. Аналогично, при отрицательном height, скругленный прямоугольник переворачивается по вертикали. Заданные радиусы могут быть масштабированы (уменьшены), если какая-либо сторона короче, чем сумма радиусов вершин с любой из сторон.

Параметр radii также может быть экземпляром DOMPoint или DOMPointReadOnly, или объектом, содержащим те же свойства ({x: 0, y: 0}), или списком таких объектов, или списком, смешивающим числа и такие объекты.

None (undefined).

RangeError

Если radii — список с нулём или более четырьмя элементами, или если одно из его значений отрицательно.

В этом примере создается несколько скругленных прямоугольных траекторий с помощью метода roundRect(). Затем эти траектории отрисовываются с помощью метода stroke().

HTML

<canvas id="canvas" width="700" height="300"></canvas>

JavaScript

Сначала мы создаём контекст для рисования наших скругленных прямоугольников.

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

Код ниже рисует два прямоугольника, оба начинаются с точки (10, 20) и имеют ширину 150 и высоту 100. Первый прямоугольник отрисовывается красным цветом и задаёт нулевой радиус для всех углов, используя число в качестве аргумента. Второй прямоугольник отрисовывается синим цветом и задаёт радиус 40 пикселей как единственный элемент в списке.

// Rounded rectangle with zero radius (specified as a number)
ctx.strokeStyle = "red";
ctx.beginPath();
ctx.roundRect(10, 20, 150, 100, 0);
ctx.stroke();

// Rounded rectangle with 40px radius (single element list)
ctx.strokeStyle = "blue";
ctx.beginPath();
ctx.roundRect(10, 20, 150, 100, [40]);
ctx.stroke();

Ниже предыдущего прямоугольника мы рисуем ещё один оранжевый, который задаёт значения радиусов противоположных углов.

// Rounded rectangle with 2 different radii
ctx.strokeStyle = "orange";
ctx.beginPath();
ctx.roundRect(10, 150, 150, 100, [10, 40]);
ctx.stroke();

Наконец, мы рисуем два скругленных прямоугольника, которые имеют четыре значения для радиусов и ту же начальную точку. Разница в том, что второй прямоугольник отрисовывается с отрицательной шириной.

// Rounded rectangle with four different radii
ctx.strokeStyle = "green";
ctx.beginPath();
ctx.roundRect(400, 20, 200, 100, [0, 30, 50, 60]);
ctx.stroke();

// Same rectangle drawn backwards
ctx.strokeStyle = "magenta";
ctx.beginPath();
ctx.roundRect(400, 150, -200, 100, [0, 30, 50, 60]);
ctx.stroke();

Результат

Результат показан ниже. Для двух прямоугольников справа обратите внимание, как нижний прямоугольник отрисовывается с отрицательной шириной, и как это переворачивает прямоугольник по горизонтали.

• Интерфейс, определяющий этот метод: CanvasRenderingContext2D
• CanvasRenderingContext2D.rect()
• CanvasRenderingContext2D.fillRect
• CanvasRenderingContext2D.strokeRect()
• CanvasRenderingContext2D.fill()
• CanvasRenderingContext2D.stroke()