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

Рейтинг: 4Ответов: 4Опубликовано: 31.01.2011

Интересует не код, а алгоритм, ход решения.

Также интересно, как нарисовать градиент выбора цвета на js.

javascript
Источник: Stack Overflow на русском

Ответы

▲ 4Принят

Итак, техника рисования ромбиков на 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 есть поддержка от гугла, а в адекватных браузерах он и так работает на ура.

▲ 5
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).
▲ 4

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

border-radius
-webkit-border-radius
-moz-border-radius

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

▲ 3

Тупой способ: рисовать по точкам, создавая что-нибудь вроде div'ов.

Правильный способ: использовать <canvas> или JS библиотеку, его эмулирующую. Что такое Canvas.