Создание скругленного прямоугольника в HTML Canvas

Быстрый ответ

Для создания закругленного прямоугольника на HTML холсте применяется следующий код:

function drawRoundedRect(ctx, x, y, width, height, radius) {
  ctx.beginPath();
  ctx.moveTo(x + radius, y);
  ctx.arcTo(x + width, y, x + width, y + height, radius);
  ctx.arcTo(x + width, y + height, x, y + height, radius);
  ctx.arcTo(x, y + height, x, y, radius);
  ctx.arcTo(x, y, x + width, y, radius);
  ctx.closePath();
  ctx.stroke(); // Для обозначения контура или используйте ctx.fill(), чтобы заполнить фигуру.
}

// Пример прямоугольника размерами 150x100 пикселей и радиусом округления 20 пикселей:
drawRoundedRect(document.getElementById('myCanvas').getContext('2d'), 20, 20, 150, 100, 20);

Модифицируйте значения параметров x, y, width, height и radius в соответствии с вашими потребностями.

Более глубокое погружение

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

Управление скруглением углов по вкусу

Если вы заинтересовались в использовании различной степени округливания углов, достаточно модифицировать функцию drawRoundedRect, добавив в неё массив радиусов:

function drawRoundedRectFlex(ctx, x, y, width, height, radii) {
  if (!Array.isArray(radii)) {
    radii = [radii, radii, radii, radii]; // Преобразование одного радиуса в четыре
  }
  
  ctx.beginPath();
  ctx.moveTo(x + radii[0], y);
  // ... добавите инструкции дла остальных углов ...
  ctx.closePath();
  ctx.stroke(); // Или примените ctx.fill() для заливки.
}

Подробнее об этом расскажет наш спикер на видео

Проверка на совместимость с браузерами

Прежде чем приступить к рисованию на холсте, убедитесь, что браузер поддерживает ваш код. Методы arcTo и roundRect имеют различную степень поддержки в разных браузерах, поэтому стоит учесть возможность использования полифиллов:

if (CanvasRenderingContext2D.prototype.arcTo) {
  // Отлично, поддержка есть!
} else {
  // Время применить полифилл или выбрать альтернативное решение
}

Использование цепочек вызовов

Повышая читабельность кода и его компактность, реализуйте прямоугольник и верните ctx из функции для использования цепочки вызовов методов:

function drawRoundedRectChain(ctx, ...) {
  // ... код функции ...
  return ctx; // Это позволяет вам вызывать методы в одной строке.
}

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

Если у вас возникают сложности с несоответствием размеров радиуса и прямоугольника, скорректируйте радиусы в соответствии с размерами прямоугольника:

const maxRadius = Math.min(width, height) / 2;
radius = Math.min(radius, maxRadius); // Ограничиваем радиус максимально допустимым значением
// ... Код для скругления углов ...

Визуализация

Представьте себе, что вы рисуете подушку-прямоугольник (🛋️) с идеально округлыми углами. Процесс схож, но он реализуется с помощью возможностей HTML Canvas:

Прямоугольник Canvas: [▉▉▉▉▉]
Добавляем отступы    : [  ▉▉▉  ]
Скругляем края       : [(🛋️🛋️🛋️)]

Как и наша подушка-прямоугольник, закругленные края выглядят эстетично и гладко.

Совмещение методов

Не ограничивайте себя единственным способом рисования. Используйте различные методы, такие как lineTo(), arc() и quadraticCurveTo(), для создания разнообразных угловых форм:

// Экспериментируйте со стилями углов
ctx.lineTo(x + width, y);
ctx.quadraticCurveTo(x + width, y, x + width, y + cornerRadius);
// ... проделайте то же для остальных углов ...

Создание фигур: продвинутый уровень

Использование CanvasRenderingContext2D не ограничивается простыми фигурами. Овладение сложными формами поднимет вашу квалификацию на новый уровень!

Интеграция фигур в пользовательский интерфейс

Тщательно впишите закругленные прямоугольники в дизайн пользовательского интерфейса, чтобы обеспечить гармоничное взаимодействие с пользователем. Закругленные прямоугольники должны дополнять дизайн, а не отвлекать от него!

Полезные материалы

1. CanvasRenderingContext2D: метод roundRect() – Web API на MDN – Глубоко структурированная документация по методу roundRect.
2. Как нарисовать закругленный прямоугольник с помощью HTML Canvas? – Stack Overflow – Обсуждения и советы по созданию закругленных прямоугольников на площадке Stack Overflow.
3. Справочник по HTML Canvas – W3Schools – Научитесь дополнительным техникам работы с HTML Canvas.
4. HTML5 Canvas Path Tutorial – Обучающие материалы по созданию сложных форм при помощи HTML5 Canvas.
5. Архив тегов "canvas" – CSS-Tricks – Советы и хитрости по работе с элементом canvas для тех, кто ищет новые знания.