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

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

Отрисовка прямоугольника с базовыми параметрами:

const canvas = document.getElementById('canvas1');
const ctx = canvas.getContext('2d');
ctx.strokeRect(10, 10, 150, 100);

// На холсте появится черный прямоугольный контур с координатами (10,10), шириной 150px и высотой 100px.

Использование с предварительной настройкой стилей:

ctx.strokeStyle = '#ff0000';
ctx.lineWidth = 3;
ctx.strokeRect(30, 30, 80, 80);

// Красный прямоугольник с толщиной линии 3px.

Отрисовка прямоугольника с отрицательными размерами:

ctx.strokeRect(100, 100, -60, -40);

// Прямоугольник рисуется справа налево и снизу вверх, начиная от точки (100,100).

Похожие функции в JavaScript

В Canvas API существуют другие методы для работы с прямоугольниками:

• rect(x, y, width, height) — добавляет прямоугольный путь, но не рисует его. Для отображения требуется отдельно вызвать stroke() или fill(). Полезен для создания сложных фигур из нескольких путей.
• fillRect(x, y, width, height) — рисует сразу залитый прямоугольник. Используют, когда не нужен контур, а требуется сплошная фигура.

Метод strokeRect() применяют для быстрого рисования простого контура. rect() со stroke() подходит, если необходимо настроить дополнительные параметры линии перед отрисовкой или сгруппировать несколько фигур.

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

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

Python (с библиотекой PIL/Pillow):

from PIL import Image, ImageDraw
img = Image.new('RGB', (200, 200), 'white')
draw = ImageDraw.Draw(img)
draw.rectangle([10, 10, 160, 110], outline='black', width=1)
img.show()

# Создается изображение с черным контуром прямоугольника.

PHP (с GD):

$im = imagecreate(200, 200);
$white = imagecolorallocate($im, 255, 255, 255);
$black = imagecolorallocate($im, 0, 0, 0);
imagerectangle($im, 10, 10, 160, 110, $black);
header('Content-Type: image/png');
imagepng($im);

// Генерируется PNG-изображение с прямоугольником.

C (с использованием графических библиотек, например, Cairo):

cairo_t *cr = cairo_create(surface);
cairo_set_line_width(cr, 1.0);
cairo_rectangle(cr, 10.0, 10.0, 150.0, 100.0);
cairo_stroke(cr);

// Рисуется контур прямоугольника. В отличие от strokeRect, здесь путь создается и обводится отдельно.

Основное отличие JavaScript-функции — её привязка к контексту холста HTML5 и непосредственное выполнение отрисовки без явного создания пути.

Типичные ошибки

1. Вызов функции без получения контекста холста:

const canvas = document.getElementById('canvas');
canvas.strokeRect(10, 10, 100, 50); // Ошибка

// Uncaught TypeError: canvas.strokeRect is not a function

2. Неправильный порядок или нечисловые аргументы:

ctx.strokeRect('10', 10, 100, 50); // Аргументы преобразуются в числа, но лучше избегать строк.
ctx.strokeRect(10, 10, 0, 50); // Ширина 0 — прямоугольник не отобразится, но ошибки не будет.

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

3. Попытка использовать функцию вне контекста рисования:

const ctx = document.createElement('canvas').getContext('2d');
document.body.append(ctx); // ctx — не DOM-элемент, а объект контекста.
// Правильно: добавить элемент canvas, а затем получить его контекст.

Изменения в последних версиях

Метод strokeRect() не претерпевал значительных изменений в спецификации Canvas 2D API. Его поведение остается стабильным с момента широкого внедрения HTML5. Основные обновления касаются общего развития Canvas API, таких как добавление новых методов для работы с путями или текстом, но не затрагивают синтаксис или параметры strokeRect. Браузеры постоянно улучшают производительность отрисовки.

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

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

ctx.setLineDash([5, 3]);
ctx.strokeRect(20, 20, 100, 60);

// Контур прямоугольника будет состоять из штрихов длиной 5px и промежутков 3px.

Анимация изменения размера прямоугольника:

let width = 0;
function animate() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.strokeRect(50, 50, width, 50);
    width += 1;
    if (width < 100) requestAnimationFrame(animate);
}
animate();

// Прямоугольник плавно расширяется от нулевой ширины до 100px.

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

for (let i = 0; i < 5; i++) {
    ctx.strokeRect(50 + i * 10, 50 + i * 10, 100 - i * 20, 100 - i * 20);
}

// Получится серия уменьшающихся концентрических прямоугольников.

Использование свойства lineJoin для изменения вида углов:

ctx.lineWidth = 10;
ctx.lineJoin = 'round';
ctx.strokeRect(25, 25, 100, 100);

// Углы контура будут скругленными.