Каким образом рисуется кружок с помощью javascript?

#javascript

Интересует не код, а алгоритм, ход решения.
Также интересно, как нарисовать градиент выбора цвета на js.    

Ответы

Ответ 1

Итак, техника рисования ромбиков на js (для рисования кружков нужно взять функцию
полукруга, но идея точно такая же):
var obj = document.getElementById('container');
var tmp, k = 0, m = 100;
for (var i = 0; i < m; i++) {
   if (i > m / 2) k--; else k++;
   tmp = document.createElement('div');
   tmp.width = k + 'px';
   tmp.height = '1px';
   obj.appendChild(tmp);
}

А вообще все верно Вам намекают на использование canvas, т.к. под IE есть поддержка
от гугла, а в адекватных браузерах он и так работает на ура.


Ответ 2

function calcPoints(X0, Y0, R, N) {
    var points = [];
        for(var i = 0; i < N; i++) {
            x = X0 + R*Math.sin(i*2*Math.PI/N);
            y = Y0 + R*Math.cos(i*2*Math.PI/N);
            total[i] = {'x': x,'y': y};
        }
    return points;
}

Описание алгоритма:

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


Ответ 3

А может просто применить атрибуты, которые закругляют углы, то есть:
border-radius
-webkit-border-radius
-moz-border-radius

И ставить радиус равный половине длины/высоты элемента.


Ответ 4

Тупой способ: рисовать по точкам, создавая что-нибудь вроде div'ов.
Правильный способ: использовать  или JS библиотеку, его эмулирующую. Что
такое Canvas.


Ответ 5

Посмотрите Raphaël — пример рисования круга есть на этой же странице.