FillRect: примеры (JAVASCRIPT)

Использование fillRect для рисования прямоугольников на холсте
Раздел: Canvas, Рисование
fillRect(x: Number, y: Number, width: Number, height: Number): undefined
типовые примерыfillRect на php, python, mysqlfillRect изменения javascriptпримеры расширенные

Описание функции fillRect

Метод fillRect() является частью API Canvas 2D и используется для рисования заполненного прямоугольника на холсте. Функция применяется в графических манипуляциях, визуализации данных, создании интерфейсов и игровых элементов.

Синтаксис: context.fillRect(x, y, width, height)

Аргументы:

  • x - координата верхнего левого угла по горизонтали (в пикселях).
  • y - координата верхнего левого угла по вертикали (в пикселях).
  • width - ширина прямоугольника (положительное значение для рисования справа от x, отрицательное - слева).
  • - высота прямоугольника (положительное значение для рисования вниз от y, отрицательное - вверх).

Функция не возвращает значения (undefined). Внешний вид прямоугольника зависит от установленных атрибутов fillStyle и глобальных параметров (прозрачность, композиция).

Базовые примеры использования

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

const canvas = document.getElementById('canvas1');
const ctx = canvas.getContext('2d');
ctx.fillStyle = 'blue';
ctx.fillRect(10, 10, 150, 100);
// Результат: синий прямоугольник 150x100 пикселей

Использование отрицательных размеров:

ctx.fillStyle = '#ff0000';
ctx.fillRect(200, 200, -80, -50);
// Прямоугольник рисуется влево и вверх от точки (200,200)

Прямоугольник с прозрачностью:

ctx.fillStyle = 'rgba(0, 255, 0, 0.5)';
ctx.fillRect(50, 50, 100, 100);
// Полупрозрачный зеленый квадрат

Альтернативные методы Canvas

rect() - создает контур прямоугольника без заливки, требует отдельного вызова fill() или stroke(). Подходит для комплексных путей.

strokeRect() - рисует только границу прямоугольника. Параметры аналогичны fillRect, но стиль определяется strokeStyle.

clearRect() - очищает указанную прямоугольную область. Используется для удаления частей изображения.

Выбор метода зависит от задачи: fillRect - для сплошных фигур, strokeRect - для контуров, rect - для комбинирования с другими элементами пути.

Аналоги в других языках

Python (PIL/Pillow):

from PIL import Image, ImageDraw
img = Image.new('RGB', (300, 200), 'white')
draw = ImageDraw.Draw(img)
draw.rectangle([10, 10, 160, 110], fill='blue', outline=None)
img.show()
// Создается изображение с прямоугольником

PHP (GD library):

$image = imagecreatetruecolor(300, 200);
$blue = imagecolorallocate($image, 0, 0, 255);
imagefilledrectangle($image, 10, 10, 160, 110, $blue);
header('Content-Type: image/png');
imagepng($image);
// Вывод PNG-изображения с прямоугольником

C (Windows API):

RECT rect = {10, 10, 160, 110};
HBRUSH brush = CreateSolidBrush(RGB(0, 0, 255));
FillRect(hdc, &rect, brush);
// Закрашивает прямоугольник в контексте устройства

Распространенные ошибки

Использование до получения контекста:

const canvas = document.getElementById('canvas');
canvas.fillRect(0, 0, 100, 50); // Ошибка
Uncaught TypeError: canvas.fillRect is not a function

Некорректные типы аргументов:

ctx.fillRect('10', '20', '100', '50'); // Аргументы преобразуются
// Работает, но не рекомендуется

Забыть установить fillStyle:

ctx.fillRect(0, 0, 100, 50); // Цвет по умолчанию - черный
// Черный прямоугольник

Изменения в спецификации

Метод fillRect остается стабильным с момента введения Canvas API. Основные обновления касаются смежных возможностей: добавление обработки дробных координат, улучшение рендеринга прозрачных областей. Современные браузеры поддерживают аппаратное ускорение для операций отрисовки.

Расширенные примеры

Создание градиентной заливки:

Пример javascript
const gradient = ctx.createLinearGradient(0, 0, 200, 0);
gradient.addColorStop(0, 'red');
gradient.addColorStop(1, 'yellow');
ctx.fillStyle = gradient;
ctx.fillRect(10, 10, 200, 100);
// Прямоугольник с горизонтальным градиентом

Рисование сетки:

Пример javascript
ctx.fillStyle = 'gray';
for (let x = 0; x < 300; x += 20) {
  for (let y = 0; y < 200; y += 20) {
    ctx.fillRect(x, y, 10, 10);
  }
}
// Сетка из маленьких квадратов

Анимация перемещения:

Пример javascript
let posX = 0;
function animate() {
  ctx.clearRect(0, 0, 300, 200);
  ctx.fillRect(posX, 50, 50, 50);
  posX = (posX + 2) % 300;
  requestAnimationFrame(animate);
}
animate();
// Движущийся квадрат

Использование глобальных настроек:

Пример javascript
ctx.globalAlpha = 0.7;
ctx.globalCompositeOperation = 'multiply';
ctx.fillStyle = 'red';
ctx.fillRect(50, 50, 100, 100);
ctx.fillStyle = 'blue';
ctx.fillRect(100, 100, 100, 100);
// Наложение полупрозрачных прямоугольников

JS fillRect function comments

En
FillRect Draws a filled rectangle on the canvas