CanvasRenderingContext2D.roundRect()

CanvasRenderingContext2D.roundRect() - додає заокруглений контур.

Синтаксис:

ctx.roundRect(x, y, width, height, radii);

Параметри:

ctx - об'єкт CanvasRenderingContext2D.

x - координати по осі x початкової точки контура прямокутника.

y - координати по осі y початкової точки контура прямокутника.

width - ширина прямямокутника.

height - висота прямокутника.

radii - радіус заокруглення кутів.

один для всіх
[1, 2, 3, 4] - для кожного кута

Опис:

roundRect() метод об'єкту CanvasRenderingContext2D який додає прямокутний заокругленими контур.

Контур малюється використовуючи fill() або stroke().

Контур без заокруглень: rect().

Приклад:

var canvas = document.getElementById("canvas");
var ctx=canvas.getContext("2d");
ctx.fillStyle="3e3d3f";
ctx.beginPath();
ctx.roundRect(10, 8, 150, 67, 8);
ctx.fill();

<canvas id="myCanvas" width="400" height="200" style="border:1px solid black;"></canvas>

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

// Встановлюємо колір
ctx.fillStyle = "blue";
// Малюємо прямокутник з заокругленням 10, 15, 20, 25 відповідного кута
ctx.beginPath();
ctx.roundRect(50, 80, 170, 100, [10, 15, 25, 25]);
ctx.stroke();

//Малюємо червоний прямокутник з заокругленням 12
ctx.beginPath();
ctx.fillStyle = "red";
ctx.roundRect(10, 10, 100, 50, 12);
ctx.fill();

//малюємо зелений прямокутник з заокругленням 25
ctx.beginPath();
ctx.fillStyle = "green";
ctx.roundRect(120, 10, 100, 50, 25);
ctx.fill();

//малюємо помаранчевий прямокутник з заокругленням 4
ctx.beginPath();
ctx.fillStyle = "orange";
ctx.roundRect(230, 10, 100, 50, 4);
ctx.fill();

Приклад малювання заокругних прямокутників з ефектами: тінь, градієнт.


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

// 1. ПРОСТИЙ (звичайна заливка)
ctx.beginPath();
ctx.fillStyle = "blue";
ctx.roundRect(20, 50, 120, 80, 10);
ctx.fill();


// 2. З ТІННЮ І ОБВОДКОЮ
ctx.beginPath();
ctx.shadowColor = "rgba(0,0,0,0.4)";
ctx.shadowBlur = 10;
ctx.shadowOffsetX = 5;
ctx.shadowOffsetY = 5;

ctx.fillStyle = "#3d3e3f";
ctx.roundRect(190, 50, 120, 80, 15);
ctx.fill();

ctx.lineWidth = 3;
ctx.strokeStyle = "darkred";
ctx.stroke();

// вимикаємо тінь
ctx.shadowColor = "transparent";


// 3. З ГРАДІЄНТОМ І ПРОЗОРІСТЮ
ctx.beginPath();
const grad = ctx.createLinearGradient(360, 50, 480, 130);
grad.addColorStop(0, "purple");
grad.addColorStop(1, "pink");

ctx.globalAlpha = 0.8;
ctx.fillStyle = grad;
ctx.roundRect(360, 50, 120, 80, 25);
ctx.fill();

// повертаємо прозорість назад
ctx.globalAlpha = 1;