Вы не можете нарисовать круг как таковой. Но вы можете сделать что-то идентичное кругу.
Вам нужно будет создать прямоугольник с закругленными углами (через border-radius ), которые составляют половину ширины/высоты круга, который вы хотите сделать.
#circle
ryanoshea 03 авг. 2011, в 06:45
Поделиться
Если подумать, вы можете вставить внутри этого , чтобы убедиться, что он отображается. В противном случае браузер может игнорировать это.
ryanoshea 03 авг. 2011, в 05:06
Я думаю, что этот ответ неверен, так как говорит, что вы не можете нарисовать круг в HTML5. Canvas — это элемент HTML5, и вы МОЖЕТЕ нарисовать круг в HTML5 ( w3schools.com/html/html5_canvas.asp )
jkj 02 июнь 2013, в 22:23
Таким образом, чтобы превратить div в круг, вы должны установить ширину и высоту некоторого размера , а радиус границы — половину ширины.
SIFE 08 июнь 2013, в 00:07
используйте -webkit-border-radius: 100%; -moz-border-radius: 100%; радиус границы: 100%; таким образом, вам нужно только настроить ширину и высоту, чтобы применить ваши изменения в будущем
КАК НАРИСОВАТЬ КРУГ В ИЗОМЕТРИИ (ОВАЛ В ИЗОМЕТРИЧЕСКОЙ ПРОЕКЦИИ).
Arkady 01 окт. 2013, в 12:30
Вы должны добавить границу, чтобы сделать ее видимой.
hakan 16 июнь 2014, в 08:59
Я нашел, используя border-radius: 50%; работал хорошо, измените размер по желанию. Для цвета вы можете использовать background-color или border .
Grimeh 07 янв. 2015, в 00:41
я использовал цвет фона, чтобы сделать его видимым
mokarakaya 18 май 2015, в 11:36
Показать ещё 5 комментариев
Это вполне возможно в HTML 5. Ваши варианты: Встроенный SVG и тег.
Чтобы нарисовать круг во встроенном SVG:
var canvas = document.getElementById(«circlecanvas»); var context = canvas.getContext(«2d»); context.arc(50, 50, 50, 0, Math.PI * 2, false); context.fillStyle = «red»; context.fill()
jkj 04 авг. 2011, в 06:23
Поделиться
Есть несколько юникодовых кругов, которые вы могли бы использовать:
Вы можете наложить текст на круги, если хотите:
#container < position: relative; >#circle < font-size: 50px; color: #58f; >#text
Вы также можете использовать собственный шрифт (например, этот), если вы хотите иметь более высокий шанс, что он будет выглядеть одинаково на разных системах поскольку не все компьютеры/браузеры имеют одинаковые шрифты.
Alex 21 дек. 2014, в 08:22
Поделиться
border-radius:50% , если вы хотите, чтобы круг настраивался на любые размеры, которые получает контейнер (например, если текст является переменной длиной)
Не забывайте префиксы -moz- и -webkit- !
Lea Verou 03 авг. 2011, в 21:03
Поделиться
Вы должны убедиться, что ширина и высота равны, иначе это создаст овал.
Hp93 07 июнь 2016, в 07:45
С 2015 года вы можете сделать это и сосредоточить текст всего на 15 строк CSS (Fiddle):
body < background-color: #fff; >#circle < position: relative; background-color: #09f; margin: 20px auto; width: 400px; height: 400px; border-radius: 200px; >#text
circle with text Text in the circle
Без каких-либо -webkit- s это работает в IE11, Firefox, Chrome и Opera, на Windows7, и это действительно HTML5 (экспериментальный) и CSS3.
Как нарисовать прототип VKUI / Алексей Мазелюк
MattAllegro 29 июль 2015, в 19:54
Поделиться
Технически не существует способа рисовать круг с HTML (нет тега HTML), но можно нарисовать круг.
Лучший способ сделать это — добавить border-radius: 50% к тегу, например div . Вот пример:
You can put text in here.
lachlanjc 12 окт. 2013, в 23:48
Поделиться
Вы можете использовать атрибут border-radius, чтобы придать ему радиус границы, эквивалентный граничному радиусу элемента. Например:
(Причина использования расширений -moz и -webkit заключается в поддержке предварительно-CSS3-окончательных версий Gecko и Webkit.)
На на этой странице больше примеров. Что касается вставки текста, вы можете это сделать, но вы должны помнить о позиционировании, так как в большинстве моделей браузеров для колодок по-прежнему используется внешний квадрат.
Источник: overcoder.net
Как нарисовать круг вконтакте — подборка видео уроков
На этой странице собраны лучшие ролики о том Как нарисовать круг вконтакте. Если вы хотите научиться рисовать с нуля, просто начните делать это ежедневно. Постарайтесь понять, в каком направлении искусства вы хотите развиваться: иллюстрации, концепт-арт, графический дизайн, детские рисунки, анимация или что-то другое.
Если вы еще не знаете, то наш сайт поможет вам определиться. Просто просматривайте страницы и пробуйте рисовать то что показано в видеоуроках. Если у вас есть какие-то полезные советы о том Как нарисовать круг вконтакте, пожалуйста напишите об этом в комментариях. Тем самым вы поможете и нам и многим другим людям.
После получения базовых навыков вы можете перейти к изучению перспективы, композиции, цвету и освещению. Хороший художник знает все эти аспекты, но вам нужно с чего-то начать.
Помните, рисование — это не талант, это выученный навык и тысячи часов практики.
Источник: tsvetnoy63.ru
Русские Блоги
Нарисуйте круг, просто начните рисовать большой круг, нарисуйте маленький круг с цветом фона, чтобы образовался круг. Когда функция перетаскивания выполнена, цвет фона маленького кружка будет вытекать при перетаскивании за пределы диапазона нижнего цвета. Я нашел это в Интернете, и у некоторых из прогонов кода есть проблемы. Это можно изменить и изменить. Это кажется более практичным, и каждый может опубликовать его.
void CDrawTestDlg::DrawPelData(CDC* pDC) < LOGBRUSH br=; HPEN hPen =ExtCreatePen( PS_GEOMETRIC | PS_INSIDEFRAME| PS_SOLID | PS_ENDCAP_FLAT,20, CBrush *pBrush = CBrush::FromHandle((HBRUSH)GetStockObject(NULL_BRUSH)); CPen* pPen = CPen::FromHandle(hPen); CPen* pOldPen = pDC->SelectObject(pPen); CBrush *pOldBrush = pDC->SelectObject(pBrush); pDC->Arc(40,40,260,260,40,150,260,150);// half circle 180 pDC->SelectObject(pOldPen); pDC->SelectObject(pOldBrush); DeleteObject(hPen ); DeleteObject(pPen); DeleteObject(pBrush); >
Источник: russianblogs.com