4

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

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

5 ответов 5

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).
3
  • как именно отрисовать, используя js, html, css?
    – Jenkamen
    1 фев 2011 в 15:27
  • Так, как написано ниже, используя алгоритм, который выше :) 1 фев 2011 в 15:37
  • Идея от Alex Silaev вполне подходит. Только лучше div-ам устанавливать свойства left и top при постоянных width и height.
    – stanislav
    1 фев 2011 в 15:43
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 есть поддержка от гугла, а в адекватных браузерах он и так работает на ура.

2
  • Вот-вот — это тот самый «тупой способ», о котором я говорил :). Только с кружками всё сложнее, увы…
    – kirelagin
    31 янв 2011 в 21:50
  • А все нормальные уже предложили :) Человеку ведь интересно как это происходит, на сколько я понимаю :) 31 янв 2011 в 22:10
4

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

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

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

3
  • Тоже неплохой вариант. Только его в IE уж точно никак не заставить работать.
    – kirelagin
    31 янв 2011 в 19:30
  • IE9-beta поддерживает border-radius 31 янв 2011 в 20:37
  • 1
    Да.. это значит, что лет через десять этот способ можно будет использовать :) Мы еле еле избавляемся от IE6.. слава богу он наконец-то уходит и отпускает нас с миром.. к тому времени, как IE9 будет считаться уже нормой и эта возможность наконец будет доступна, она (возможность) уже не будет никому нужна. К тому времени какие-нибудь SVG+HTML6 начнут завоёвывать мир :)
    – cy6erGn0m
    31 янв 2011 в 20:54
3

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

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

6
  • HTML 5 не трогаем
    – Jenkamen
    31 янв 2011 в 18:53
  • Говорю же, «или JS библиотеку, его эмулирующую».
    – kirelagin
    31 янв 2011 в 18:54
  • code.google.com/p/explorercanvas
    – kirelagin
    31 янв 2011 в 18:56
  • Иного не дано.
    – kirelagin
    31 янв 2011 в 18:56
  • И всё-таки, каким образом рисуются кружки?
    – Jenkamen
    31 янв 2011 в 18:59
2

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

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.