canvas Создание кружков на холсте

Question

canvas Создание кружков на холсте

Малыш Просветленный (31784), закрыт 5 лет назад

Добрый день уважаемые. Есть необходимость разобраться в основах холстостроения. Возникла такая задача. Как на холсте вывести кружки, центры которых находятся в объекте points. Вот пример https://jsfiddle.net/ghk3tLaf/ Также буду признателен если кто-то, объяснит почему мой круг, больше похож на элипс ?) И ещё, правильно ли хранить значения в объекте, или можно проще. (Просто на следующим этапе задачи мне надо будет менять значения этих центов в зависимости от размеров холста и ширины экрана браузера)

Answer 1

̑̈☣̑̋̑̎̑̈ ☠̤̥̤̭̤ ☢J̯̤ͣͮͣ̐̈ Высший разум (160375) 5 лет назад

Там у тебя с каверсом всё нормально просто песочница его растягивает

Вот исправленый вариант

<canvas id='canvas' width="300" height="300" style="width: 300px;height: 300px" ></canvas>

Полностью исправленный вариант

⚤

̑̈☣̑̋̑̎̑̈ ☠̤̥̤̭̤ ☢J̯̤ͣͮͣ̐̈Высший разум (160375) 5 лет назад

Ну ты диверсант
#canvas {
border: 1px solid red;
width: 100%;
height: 100%;
}
на фига ты это сделал только заметил в этом и есть причина твоего овала!!!

⚤

Малыш Просветленный (31784) Спасибо. Так в том и дело что у меня холст должен занимать все пространство родительского блока, и быть адаптивным. При уменьшении экрана браузера, круги должны оставаться на своих местах, а не разлезаться в овалы

Answer 2

Ярослав Искусственный Интеллект (107837) 5 лет назад

https://jsbin.com/poherabafi/edit?js,output