Рисование прямоугольника в Canvas

Рисование прямоугольников на элементе Canvas — одно из самых базовых и часто используемых действий при создании графики на веб-странице с помощью JavaScript. Прямоугольники можно использовать для создания различных элементов интерфейса, фонов, рамок и многого другого. Давайте рассмотрим подробно, как рисовать прямоугольники на Canvas.

Использование метода fillRect()

Метод fillRect() используется для создания прямоугольника, который заполняется цветом и находится в заданных координатах (x, y), имея размеры, определяемые параметрами width и height. Стиль заполнения прямоугольника задается с помощью свойства fillStyle. 

Синтаксис:

fillRect(x, y, width, height)

Параметры:

Пример:

// Задаем цвет заливки
ctx.fillStyle = 'red';

// Рисуем прямоугольник с координатами (x, y) и размерами (width, height)
ctx.fillRect(50, 50, 100, 100);

В этом примере мы рисуем красный прямоугольник с верхним левым углом в точке (50, 50) и размерами 100 пикселей в ширину и 100 пикселей в высоту.

Результат:

Использование метода strokeRect()

Метод strokeRect() используется для рисования на холсте с начальной точкой в заданных координатах (x, y), а также с заданной шириной (w) и высотой (h), используя текущий стиль линий.

Синтаксис:

strokeRect(x, y, width, height)

Параметры:

Пример:

// Задаем цвет обводки и толщину линии
ctx.strokeStyle = 'blue';
ctx.lineWidth = 2;

// Рисуем обведенный прямоугольник с координатами (x, y) и размерами (width, height)
ctx.strokeRect(200, 50, 100, 100);

В этом примере мы рисуем синий прямоугольник с верхним левым углом в точке (200, 50) и размерами 100 пикселей в ширину и 100 пикселей в высоту.

Результат:

Настройка цвета и стиля

Вы можете настраивать цвет и стиль заливки и обводки прямоугольника, используя свойства fillStyle, strokeStyle и lineWidth контекста рисования.

Пример:

// Задаем цвет заливки и обводки
ctx.fillStyle = 'green';
ctx.strokeStyle = 'purple';

// Задаем толщину линии
ctx.lineWidth = 4;

// Рисуем прямоугольник с заливкой и обводкой
ctx.fillRect(50, 150, 100, 50);
ctx.strokeRect(200, 150, 100, 50);

Результат:

В Canvas цвет можно задавать в различных форматах.

Ниже перечислены некоторые из наиболее распространенных форматов:

Именованные цвета

Вы можете использовать предопределенные имена цветов, такие как "red" (красный), "blue" (синий), "green" (зеленый) и т. д.

ctx.fillStyle = 'red';
ctx.strokeStyle = 'blue';

HEX-коды 

Цвет можно задать в формате HEX-кода, который представляет собой шестнадцатеричное значение RGB (красный, зеленый, синий).

ctx.fillStyle = '#ff0000'; // Красный
ctx.strokeStyle = '#0000ff'; // Синий

RGB-значения

Вы можете указать цвет, используя значения красного (R), зеленого (G) и синего (B) компонентов в диапазоне от 0 до 255.

ctx.fillStyle = 'rgb(255, 0, 0)'; // Красный
ctx.strokeStyle = 'rgb(0, 0, 255)'; // Синий

RGBA-значения

Также можно задать цвет с альфа-каналом (прозрачность), добавив четвертый параметр, который представляет собой значение альфа в диапазоне от 0 до 1.

ctx.fillStyle = 'rgba(255, 0, 0, 0.5)'; // Полупрозрачный красный
ctx.strokeStyle = 'rgba(0, 0, 255, 0.7)'; // Полупрозрачный синий

Выбор формата для задания цвета зависит от ваших предпочтений и требований проекта.

Вот некоторые соображения, которые могут помочь вам принять решение:

Использование метода clearRect()

Метод clearRect() используется для очистки прямоугольной области на холсте, удаляя любые нарисованные ранее объекты или цвет заливки.

Синтаксис:

clearRect(x, y, width, height)

Параметры:

Пример:

// Рисуем что-то на холсте
ctx.fillStyle = 'blue';
ctx.fillRect(50, 50, 100, 100);

// Очищаем прямоугольную область
ctx.clearRect(60, 60, 80, 80);

Результат: