Метод arc
Метод arc рисует дугу с центром в заданной точке, заданным радиусом. Видимой эта дуга станет, только если применить методы stroke или fill . В первом случае будет контур, а во втором — фигура.
Последний необязательный параметр регулирует направление рисования. Он принимает значение true или false . Значение true рисует дугу по часовой стрелке, а значение false — против часовой (по умолчанию).
Можно задать начальный и конечный углы при рисовании. Эти углы измеряются в радианах, не в градусах. Для перевода градусов в радианы вы можете использовать следующую функцию:
function getRadians(degrees) < return (Math.PI / 180) * degrees; >
Синтаксис
контекст.arc(x, y, радиус, начальный угол, конечный угол, [направление = false]);
Пример
Давайте нарисуем окружность:
let canvas = document.querySelector(‘#canvas’); let ctx = canvas.getContext(‘2d’); ctx.arc(100, 100, 75, 0, getRadians(360)); ctx.stroke(); function getRadians(degrees) < return (Math.PI / 180) * degrees; >
Пример
Давайте нарисуем половинку окружности:
let canvas = document.querySelector(‘#canvas’); let ctx = canvas.getContext(‘2d’); ctx.arc(100, 100, 75, 0, getRadians(180)); ctx.stroke(); function getRadians(degrees) < return (Math.PI / 180) * degrees; >
Пример
Давайте нарисуем половинку круга (закрасим контур с помощью fill ):
let canvas = document.querySelector(‘#canvas’); let ctx = canvas.getContext(‘2d’); ctx.arc(100, 100, 75, 0, getRadians(180)); ctx.fill(); function getRadians(degrees) < return (Math.PI / 180) * degrees; >
Смотрите также
- метод rect ,
который рисует прямоугольник
Canvas. Рисуем окружность и дугу
Давайте разберемся как рисуется примитив дуга и ее производная — окружность.
Дуга рисуется следующей командой:
arc ( x , y , radius , startAngle , endAngle , anticlockwise ) ;
Давайте рассмотрим аргументы данной функции:
- x, y — координаты центра, вокруг которого будет рисоваться окружность.
- radius — радиус окружности, безразмерная величина.
- startAngle — начальный угол, начало отсчета. Задается в радианах. Счет идет по часовой стрелке с правой части окружности. На рисунке начало отсчета показано «0».
- endAngle — конечный угол. В радианах. Так, полной окружности соответствует угол 2pi.
- anticlockwise — направление рисования. По-умолчанию рисуем против часовой стрелки, значение true. Если мы хотим рисовать по часовой стрелке — false.
Углы при работе в canvas измеряются в радианах. Углу 90° соотвествует значение Pi/2, углу 180° — Pi, а полной окружности — 2*Pi. Для получения числа Pi можно воспользоваться функцией Math.PI.
Для удобства, на рисунке приведено вычисленное значение числа Pi.
Как рисовать линии в canvas читайте в предыдущем уроке.
Выполнить
Задание 1. Нарисуйте дугу от 0° до 270°.Выполните рисование по часовой и против часовой стрелки.
Задание 2. Разработайте интерфейс, в котором пользователь может задать радиус дуги, начальный и конечный угол, с помощью checkbox задается направление рисования и дополнительный checkbox определяет залита ли фигура или нет. Скрипт должен на основе вводимых данных строить дугу.
Задание 3. Анимируйте процесс рисования фигуры.
Как нарисовать круг в HTML5 (Canvas)
Круг в канвасе рисуется при помощи функции .arc(centerX, centerY, radius, sAngle, eAngle, clockwise) , .fill() и .stroke() . При помощи параметров .fillStyle , .lineWidth и .strokeStyle меняются цвет заливки, толщина и цвет линии.
Красная линия
Нарисуем в канвасе красный круг. Смотреть пример онлайн.
Примечание
Канвас генерирует PNG-изображения и после выполнения функции .getContext(‘2d’) изображение Канваса имеет прозрачный фон.
Объект для рисования в Канвасе
Продолжая тему объекта для рисования в Канвасе, дополним его функцией для рисования круга (файл ExpangeCanvas.js — файл будет постепенно улучшаться).
Пример использования
Нужно нарисовать 4 круга при помощи ExpangeCanvas в отдельных канвасах. Смотреть пример онлайн.
✖ ❤ Мне помогла статья нет оценок
35558 просмотров нет комментариев Артём Фёдоров 24 апреля 2012
Категории
Читайте также
- Как нарисовать линию в HTML5 (Canvas)
- div height 100 (CSS)
- Lorem Ipsum по-русски
- Как сделать ссылку (HTML)
- Min-width для IE6
- HTML одной строкой
- Ссылка без подчеркивания
- Валидный HTML-тег HR
- Размер шрифта (CSS)
- Ссылка пунктиром
- Курсор рука (CSS)
- div с прокруткой
Комментарии
Написать комментарий
© Экспэнч 2010-2023
При полном или частичном копировании статей сайта указывайте пожалуйста ссылку на источник
Хотите узнать больше информации, пишите на: artem@expange.ru
Вход на сайт
Введите данные указанные при регистрации:
Социальные сети
Вы можете быстро войти через социальные сети:
Как нарисовать круг canvas
WordPress 6 с Нуля до Гуру
Этот курс научит Вас созданию самых разных сайтов на самой популярной в мире CMS — WordPress. Вы увидите установку и настройку локального сервера, разбор каждой настройки, каждой кнопки и каждого пункта меню в панели WordPress.
Также Вы получите и всю практику, поскольку прямо в курсе с нуля создаётся полноценный Интернет-магазин, который затем публикуется в Интернете. И всё это прямо на Ваших глазах.
Помимо уроков к курсу идут упражнения для закрепления материала.
И, наконец, к курсу идёт ценнейший Бонус по тому, как используя ChatGPT и создавая контент для сайта, можно выйти на пассивный доход. Вы наглядно увидите, как зарегистрироваться в ChatGPT (в том числе, и если Вы из России), как правильно выбрать тему для сайта, как правильно генерировать статьи для него(чтобы они индексировались поисковыми системами) и как правильно монетизировать трафик на сайте.
Уроки и статьи
Подпишитесь на мой канал на YouTube, где я регулярно публикую новые видео.
Подписаться
Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.
Подписаться
Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.
Мой аккаунт Моя группа
Какая тема Вас интересует больше?
Бесплатный курс
Мастер-класс по созданию сайта на WordPress 6
Этот видеоурок длится всего 21 минуту, но уже в конце создан полностью рабочий сайт на WordPress (с применением ChatGPT). И весь процесс Вы увидите своими глазами, а повторить — не составит труда!
Чтобы получить Видеокурс,
заполните форму
Бесплатный онлайн-семинар
Как создать профессиональный Интернет-магазин
После семинара:
— Вы будете знать, как создать Интернет-магазин.
— Вы получите бесплатный подарок с подробным описанием каждого шага.
— Вы сможете уже приступить к созданию Интернет-магазина.