Как нарисовать данный макет для сайта с помощью html, css, js?

Question

[carpfish]

Всем привет.
Возник такой вопрос. Есть, допустим, макет, как на рисунке. Как такое реализовать на сайте через css, html и js (если он тут надо будет).
По рисунку видно, что это овал, но он обрезанный и ограничивается верхними кружками. Так вот, как этот овал можно обрезать чтобы получилось подобие этого рисунка? Или же можно как-то по другому сделать...

Answer 1

[Наталья Чобот]

думаю можно попробовать это сделать с помощью canvas

задаётся поле

<canvas id="canv" width="500" height="500"></canvas>

и затем в тегах script пишется код

<script>
            var canvas=document.getElementById("canv");
            var x=canvas.getContext("2d");
            x.quadraticCurveTo(250, 120, 280, 80);
            x.quadraticCurveTo(250, 100, 220, 80);
</script>

quadraticCurveTo - это функция для рисования кривой, параметры сейчас не помню точно (в интернете найти можно), там параметры задают начальную, конечную и прогиб. значения в функции примерные
также у canvas есть функции для рисования кружков, овалов и так далее

ответьте, если получится

Comments

[kulaeff]

Ваш код рисует другое: https://jsfiddle.net/xefeaymk/1

[Наталья Чобот]

kulaeff: я понимаю) мой код тестовый, я выбрала значения из головы)
но Вы можете нарисовать то, что Вам нужно) главное разобраться с параметрами) суть пыталась объяснить)
у увидела
вопрос: как нарисовать?
ответ: нарисовать с помощью такой функции
понимаете?

[Froggyweb]

css, html и js (если он тут надо будет).
img src="rкартинка"

[kulaeff]

Наталья Чобот: дык я понимаю, я же без претензий. Если человеку все разжевать и в рот положить, то он ничего не поймет. А вы ему дали направление, всего лишь поиграть параметрами надо. Даже лайкну ваш ответ.

[Наталья Чобот]

kulaeff: спасибо)) мой первый заработанный лайк))

[kulaeff]

Дмитрий Добрышин: я? отметил? сударь, я не задавал никаких вопросов.

Answer 2

[ThunderCat]

По вопросу не очень понятно что вы хотите получить, если нужно рисовать фигуры на хтмл/цсс/жс есть варианты:
1) Канвас, как уже упомянула @nata-ponchik
2) CSS стили со скруглением углов для кругов
3) SVG объекты
4) тупо вставить картинку и наложить на нее текст, если надо, как написал Froggyweb, это не всегда подходит, но как вариант..
5) Извращения типа флеш и сильверлайт (привет из 2010).

Если поломать мозг пару часов можно еще вариантов настрочить - например расположить пнг с прозрачностью в нужных местах через позиционирование и z-index.