Рисуем овал на холсте HTML5: работа с bezier и scale()

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

Для создания овала на холсте HTML5 вы можете воспользоваться методом ellipse:

const ctx = document.getElementById('myCanvas').getContext('2d');
ctx.beginPath();
ctx.ellipse(100, 75, 50, 35, 0, 0, 2 * Math.PI);
ctx.stroke();

Вышеуказанный код создаст овал с центром в точке (100, 75), горизонтальным радиусом 50 и вертикальным радиусом 35.

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

Существуют также другие способы создания овала. Вот некоторые из них на случай, если вы не можете или не желаете использовать метод ellipse.

Кривые Безье: искусство точного рисования

С помощью кривых Безье можно точно регулировать форму эллипса:

ctx.beginPath();
ctx.moveTo(50, 75); // Начинаем отсюда
ctx.bezierCurveTo(50, 45, 150, 45, 150, 75); // Создаем первую половину овала
ctx.bezierCurveTo(150, 105, 50, 105, 50, 75); // Формируем вторую половину овала
ctx.stroke(); // Ваш овал готов

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

Квадратичные кривые: когда угол имеет значение

Метод quadraticCurveTo() также позволяет создать овал:

ctx.beginPath();
ctx.moveTo(50, 75);
ctx.quadraticCurveTo(100, 0, 150, 75);
ctx.quadraticCurveTo(100, 150, 50, 75);
ctx.stroke(); // Овал готов

Масштабирование кругов: динамические преобразования

С помощью масштабирования можно преобразовать круг в овал:

ctx.save(); // Сохраняем исходное состояние контекста
ctx.scale(2, 1);
ctx.beginPath();
ctx.arc(50, 75, 50, 0, 2 * Math.PI);
ctx.restore(); // Восстанавливаем состояние контекста
ctx.stroke();

Использование save() и restore() позволяет гарантировать, что ваши изменения не повлияют на последующие рисунки.

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

Представьте себе HTML5-холст как поле для экспериментов, где овал становится вашим изобразительным элементом:

До: 🏞 (Поле ждет своего художника)

ctx.beginPath();
ctx.ellipse(100, 50, 80, 40, 0, 0, 2 * Math.PI);
ctx.stroke();

После: 🏟️ (На поле появилась овальная беговая дорожка)

Продвинутое преобразование

Рассмотрим особенности преобразования формы и рисования части эллипса, чтобы избежать распространенных ошибок.

Преобразование кругов в овалы

При помощи функции scale() вы можете превратить круг в овал:

ctx.beginPath();
ctx.arc(100, 100, 50, 0, 2 * Math.PI); 
ctx.scale(2, 1); // Преобразуем круг в овал
ctx.stroke();
ctx.setTransform(1, 0, 0, 1, 0, 0); // Восстановим начальные настройки для следующих рисунков

Добавление вращения к овалам: динамизм и жизнь

Добавив вращение к овалу, вы сможете создать интересные визуальные эффекты:

ctx.beginPath();
ctx.ellipse(100, 75, 50, 35, Math.PI / 4, 0, 2 * Math.PI);
ctx.stroke();

Частичные овалы: больше выразительности

Иногда, чтобы передать определенную идею, достаточно нарисовать только часть овала:

ctx.beginPath();
ctx.ellipse(100, 75, 50, 35, 0, 0, Math.PI);
ctx.stroke();

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

1. Учебное руководство по рисованию эллипсов на холсте HTML5
2. Canvas API – Web API | MDN
3. Как создать овал на холсте HTML5? – Stack Overflow
4. Рисование на холсте HTML5 для начинающих – YouTube
5. Шпаргалка по холсту HTML5