Как нарисовать круг canvas
Перейти к содержимому

Как нарисовать круг canvas

  • автор:

Как нарисовать круг в HTML5 (Canvas)

Круг в канвасе рисуется при помощи функции .arc(centerX, centerY, radius, sAngle, eAngle, clockwise) , .fill() и .stroke() . При помощи параметров .fillStyle , .lineWidth и .strokeStyle меняются цвет заливки, толщина и цвет линии.

Красная линия

Нарисуем в канвасе красный круг. Смотреть пример онлайн.

Простой красный круг

Как нарисовать круг в HTML5 (Canvas) function circle() В результате на экране вы красный круг (похоже на флаг Японии).

Примечание

Канвас генерирует PNG-изображения и после выполнения функции .getContext(‘2d’) изображение Канваса имеет прозрачный фон.

Объект для рисования в Канвасе

Продолжая тему объекта для рисования в Канвасе, дополним его функцией для рисования круга (файл ExpangeCanvas.js — файл будет постепенно улучшаться).

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

Нужно нарисовать 4 круга при помощи ExpangeCanvas в отдельных канвасах. Смотреть пример онлайн.

Желтый круг (Canvas)

Серый круг (Canvas)

Зеленый круг (Canvas)

Золотой круг (Canvas)

✖ ❤ Мне помогла статья нет оценок
36229 просмотров нет комментариев Артём Фёдоров 24 апреля 2012

Категории

Читайте также

  • Как нарисовать линию в HTML5 (Canvas)
  • div height 100 (CSS)
  • Lorem Ipsum по-русски
  • Как сделать ссылку (HTML)
  • Min-width для IE6
  • HTML одной строкой
  • Ссылка без подчеркивания
  • Валидный HTML-тег HR
  • Размер шрифта (CSS)
  • Ссылка пунктиром
  • Курсор рука (CSS)
  • div с прокруткой

Комментарии

Написать комментарий
© Экспэнч 2010-2024
При полном или частичном копировании статей сайта указывайте пожалуйста ссылку на источник
Хотите узнать больше информации, пишите на: artem@expange.ru

Вход на сайт

Введите данные указанные при регистрации:

Социальные сети

Вы можете быстро войти через социальные сети:

Как нарисовать круг в Tkinter?

Как задать радиус кругу в канвасе? Насколько я понимаю тут нет такого атрибута.

Отслеживать

49.3k 17 17 золотых знаков 57 57 серебряных знаков 101 101 бронзовый знак

задан 26 мая 2020 в 11:14

Vova Shkurletov Vova Shkurletov

187 2 2 серебряных знака 11 11 бронзовых знаков

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

26 мая 2020 в 11:25

Спасибо, буду стараться.

26 мая 2020 в 13:42

2 ответа 2

Сортировка: Сброс на вариант по умолчанию

canvas.create_oval(x - r, y - r, x + r, y + r ) 

Отслеживать

49.3k 17 17 золотых знаков 57 57 серебряных знаков 101 101 бронзовый знак

ответ дан 26 мая 2020 в 11:25

975 1 1 золотой знак 8 8 серебряных знаков 16 16 бронзовых знаков

radius = 5 center = 10,10 # Первый арг - координата X, вторая Y canvas.create_oval(center[0] - radius, center[1] - radius, center[0] + radius, center[1] + radius, outline=. ) 

Отслеживать

ответ дан 26 мая 2020 в 11:26

Alexander Chernin Alexander Chernin

9,778 9 9 золотых знаков 25 25 серебряных знаков 35 35 бронзовых знаков

  • python
  • python-3.x
  • canvas
  • tkinter
    Важное на Мете
Связанные
Похожие

Подписаться на ленту

Лента вопроса

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

Дизайн сайта / логотип © 2024 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2024.4.30.8420

Рисование в JavaScript (canvas)

В HTML5 есть тег canvas, который создаёт поле для рисования. На нём можно рисовать с помощью скриптов JavaScript. Разберём как это работает.

Подготовка поля для рисования

Сначала необходимо на странице прописать тег:

Теперь с помощью JavaScript надо обратиться к этому полю. Сначала получим ссылку на него через getElementById а затем создадим объект, в котором будет находиться так называемый «контекст», через методы которого будем рисовать:

   

Теперь обращаясь к методам в объекте ctx можно рисовать различные фигуры в пределах области canvas. Попробуем сделать это.

Рисование линий

Самая простая фигура для отрисовки — это линия. Попробуем выполнить следующий код:

ctx.moveTo(50, 100); ctx.lineTo(150, 100);

В результате получим такую линию:

   
  • Первая команда beginPath говорит о том, что надо приготовиться к рисованию.
  • Вторая команда moveTo(50, 50) говорит о том, куда JavaScript должен поставить свой карандаш, откуда начнётся рисование. В скобках задаётся горизонтальная и вертикальная координата в пикселях (от левого верхнего края canvas). В нашем случае это точка находится на расстоянии 100 пикселей от верхнего и левого края.
  • Третья команда lineTo(150, 50) говорит о том, куда JavaScript должен тянуть свой карандаш. В скобках задаётся горизонтальная и вертикальная координата в пикселях. В нашем случае это точка находится на расстоянии 100 пикселей от верхнего края и 150 от левого. То есть получится горизонтальная линия по центру canvas.
  • Последняя четвёртая команда stroke говорит, что надо закончить рисование.

Линия рисуется непрерывно, пока не выполнена команда stroke. Поэтому можно нарисовать фигуру, используя команду lineTo несколько раз подряд. Давайте сделаем это и нарисуем квадрат:

ctx.beginPath(); ctx.moveTo(50, 50); ctx.lineTo(150, 50); // линия вправо ctx.lineTo(150, 150); // линия вниз ctx.lineTo(50, 150); // линия влево ctx.closePath(); // смыкание начала и конца рисунка (левая стена) ctx.stroke(); 

Чтобы нарисовать квадрат, нужно нарисовать 4 линии. Но в примере кода мы заменили последний метод lineTo на closePath, которая рисует линию, автоматически вычисляя нужные координаты, чтобы сомкнуть её с началом рисунка. Таким образом чтобы нарисовать последнюю (левую) сторону квадрата мы использовали не lineTo(50, 50), а просто closePath().

Чтобы изменить цвет линии, используем метод strokeStyle, которому передадим нужный цвет в обычном CSS формате (название цвета, HEX или RGB форматы). Чтобы изменить толщину линии необходимо использовать метод lineWidth, которому необходимо задать толщину линии в пикселях. Оба этих значениия (цвет и толщина) должны быть заданы до вызова метода stroke (который стоит в последней строчке примера):

ctx.beginPath(); ctx.moveTo(50, 50); ctx.lineTo(150, 50); // линия вправо ctx.lineTo(150, 150); // линия вниз ctx.lineTo(50, 150); // линия влево ctx.closePath(); // смыкание начала и конца рисунка (левая стена) ctx.strokeStyle = '#1a2edb'; // тёмно-синий цвет ctx.lineWidth = 5; // толщина линии в 5px ctx.stroke(); 

Получится такой результат:

Заливка рисунка

Попробуем разукрасить полученный квадрат не чёрным цветом, а синим. Для этого надо использовать метод fill. Точно так же как и изменение цвета/толщины линий, этот метод должен быть вызван до вызова метода stroke (который стоит в последней строчке примера).

ctx.beginPath(); ctx.moveTo(50, 50); ctx.lineTo(150, 50); // линия вправо ctx.lineTo(150, 150); // линия вниз ctx.lineTo(50, 150); // линия влево ctx.closePath(); // смыкание начала и конца рисунка (левая стена) ctx.fill(); // закрашивание фигуры ctx.stroke(); 

Не обязательно, чтобы фигура была закончена и «закрыта». То есть можно не ставить closePath, а нарисовать три стороны и применить закрашивание fill, тогда всё равно закрасится именно нужная область:

Чтобы изменить цвет заливки, используем метод fillStyle, которому передадим нужный цвет в обычном CSS формате (название цвета, HEX или RGB):

ctx.beginPath(); ctx.moveTo(50, 50); ctx.lineTo(150, 50); // линия вправо ctx.lineTo(150, 150); // линия вниз ctx.lineTo(50, 150); // линия влево ctx.closePath(); // смыкание начала и конца рисунка (левая стена) ctx.fillStyle = '#1a2edb'; // тёмно-синий цвет ctx.fill(); ctx.stroke(); 

Получится такой синий квадрат:

Рисование окружностей

  • Горизонтальную координату центра окружности на canvas (в пикселях)
  • Вертикальную координату центра окружности на canvas (в пикселях)
  • Радиус окружности (в пикселях)
  • Начальный угол окружности (в радианах!)
  • Конечный угол окружности (в радианах!)
  • Рисовать по часовой стрелке или против (если против, то значение «false», а если по часовой то «true»). По умолчанию рисует против часовой
ctx.beginPath(); ctx.arc(100, 100, 50, 0, 2 * Math.PI); ctx.stroke(); 

Получится такой круг:

Изменять толщину линии можно с помощью известного метода lineWidth, а цвет с помощью strokeStyle. Давайте модифицируем предыдущий пример и попробуем нарисовать полуокружность с синим цветом линии и толщиной 5 пикселей:

ctx.beginPath(); ctx.arc(100, 100, 50, 0, Math.PI); ctx.strokeStyle = '#1a2edb'; // тёмно-синий цвет ctx.lineWidth = 5; // толщина линии в 5px ctx.stroke(); 

Получится такой синий полукруг:

Заливать круги можно с помощью известного метода fill, а задание цвета делается с помощью уже оговоренного метода fillStyle. Попробуем доработать предыдущий пример и нарисовать верхний полукруг, но залитый зелёным цветом:

ctx.beginPath(); ctx.arc(100, 100, 50, 0, Math.PI); ctx.strokeStyle = '#1a2edb'; // тёмно-синий цвет ctx.lineWidth = 5; // толщина линии в 5px ctx.stroke(); ctx.beginPath(); ctx.arc(100, 100, 30, Math.PI, 0); ctx.fillStyle = '#50c843'; // зелёный цвет ctx.fill(); ctx.stroke(); 

Получится два круга. Зелёный (с заливкой) маленький вверху и синий (без заливки) большой снизу:

Обратите внимание, что методы strokeStyle и lineWidth применились к объекту ctx, поэтому верхний полукруг тоже получил толщину линии в 5 пикселе и тёмно-синий цвет. Поэтому если хотите нарисовать несколько фигур на одном canvas, то сделайте несколько объектов: ctx1, ctx2, ctx3 и т.п. чтобы не переопределялись их свойства.

Как сделать круг из точек на canvas?

0xD34F

Надо внутри цикла заменить translate на rotate. И не забыть сделать translate перед циклом — это чтобы круг был виден целиком. Типа так:

const canvas = document.querySelector('canvas'); const w = canvas.width; const h = canvas.height; const ctx = canvas.getContext('2d'); ctx.translate(w / 2, h / 2); ctx.fillStyle = 'red'; const steps = 30; for (let i = 0; i < steps; i++) < ctx.beginPath(); ctx.arc(w / 4, h / 4, 5, 0, 2 * Math.PI, false); ctx.rotate(2 * Math.PI / steps); ctx.fill(); ctx.closePath(); >

Ответ написан более трёх лет назад

Нравится 1 3 комментария

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *