Нарисовать круг средствами html4/js (без явного css)

#javascript #html

Всем доброго времени суток! Есть такая интересная задача - нарисовать круг средствами
html и js. По сути, задача сводится к созданию div на разметке определенной ширины/высоты.
Саму методику я могу предложить т.к. есть способ рисовать например ромб 



var obj = document.getElementById('container');
var tmp, k = 0,
  m = 200;
for (var i = 0; i <= m; i++) {
  if (i > m / 2) k--;
  else k++;
  tmp = document.createElement('div');
  //tmp.style.border = '1px solid #111fff'
  tmp.style.width = k + 'px';
  tmp.style.height = '1px';
  obj.appendChild(tmp);
}
#container
{
  width: 100%;
  display: block;
  padding: 10px;
}
#container div
{
  background-color: lightblue;
  margin: 0 auto;
}





Но я хотел бы попросить помощи в алгоритме рисования подобным образом круга. Как
правильно составить алгоритм, который построчно нарисует круг с помощью дивов?
Я пытался сделать при помощи формулы c = 2R*sin(angle/2), где с - это расстояние
между точками на окружности, а angle - это угол в радианах. Но получается капля, а
не круг. 
Код "капли":



var obj = document.getElementById('container1');
var tmp, k = 0,
  m = 300,
  angl = 0;
for (var i = 0; i <= m; i++) {
  if (angl > 360) angl = 360;
  tmp = document.createElement('div');
  var sinus = Math.sin((Math.PI * angl / 180) / 2);
  tmp.style.width = m * sinus + 'px';

  tmp.style.height = '1px';
  obj.appendChild(tmp);
  var nexAngle = 360 / m;
  angl += nexAngle;
}
#container,
#container1 {
  width: 100%;
  display: block;
  padding: 10px;
}
#container1 div {
  background-color: lightgreen;
  margin: 0 auto;
}





P.S  код очень некрасивый т.к. делалось "в лоб" ) 

UPD: @pavel и  @Gleb Kemarsky оба ответили на поставленный вопрос, просто немного
разными способами (хоть в итоге все сводится к одной формуле). За реализацию на JQuery
спасибо @Elena Semenchenko! @sitev_ru тоже спасибо! Поэтому заинтересованным советую
обратить внимание на все ответы данного вопроса. Спасибо !
    

Ответы

Ответ 1

Думаю, лучше не через угол, а через отрезки.

Задаём радиус. Проходим круг по вертикали и рисуем хорды. Половина от длины хорды
- корень квадратный из разницы между квадратом радиуса и квадратом "высоты" хорды.



var obj = document.getElementById('container1');
var tmp, 
  radius = 200;
for (var i = 0; i <= 2 * radius; i++) {
  var height = Math.abs(radius - i);
  var chord = 2 * Math.sqrt(radius * radius - height * height);
  tmp = document.createElement('div');
  tmp.style.height = '1px';
  tmp.style.width = chord + 'px';
  obj.appendChild(tmp);
}
#container1 div {
  background-color: lightgreen;
  margin: 0 auto;
}



Ответ 2

Ну как-то так, точную константу вместо 5 подобрать вручную думаю проще.

Идея формулы: у нас есть треугольник (равносторонний, высота - (50 - k) пикселей,
 стороны по 50 пикселей (радиус круга)). Отсюда из теоремы Пифагора его ширина = 2*Sqrt(
50*50 - (50-k)*(50-k) ). Но если так сделать то его сильно сожмёт (из-за границ возможно),
поэтому нужно домножать на коэффициент.



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.style.border = '1px solid #111fff'
  tmp.style.width = 5*Math.sqrt(50*50 - (50-k)*(50-k)) + 'px';
  tmp.style.height = '1px';
  obj.appendChild(tmp);
}
#container
{
  width: 100%;
  display: block;
  padding: 10px;
}
#container div
{
  margin: 0 auto;
}



Ответ 3

На jQuery, по формуле окружности получилось вот такое:



function arc(r){
  $('
',{
    class: 'box'
  }).appendTo('body');
  
  for(var i = 0; i <= 2*r; i++ ){
    
      var y = Math.abs(r - i);
      var x = 2*Math.sqrt( Math.pow(r,2) - Math.pow(y,2) );
    
      $('',{
        class: 'i'
      })
      .css({
        'display': 'block', 
        'width': x + 'px', 
        'height': '1px', 
        'background-color':'lightgreen',
        'margin-left': 'auto',
        'margin-right': 'auto'
      })
      .appendTo('.box');
  }
}

arc(100);



Ответ 4

как-то так:

r = 100; //radius
for (var i = 0; i <= 360; i++) {
  x = r * cos(i);
  y = r * sin(i);
}


по координатам x,y рисуешь круг...

Но в задании нужно рисовать дивами, переделал свой метод... Вот что получилось:



var obj = document.getElementById('container1');
var tmp, radius = 200, ys = 0;
for (var i = 0; i < 180; i++) {
  var x = Math.sin(Math.PI * i / 180) * radius * 2;
  var y = radius - Math.cos(Math.PI * i / 180) * radius;
  var h = y;
  if (i != 0) h = y - ys;
  ys = y;
  tmp = document.createElement('div');
  tmp.style.height = h + 'px';
  tmp.style.width = x + 'px';
  obj.appendChild(tmp);
}
#container1 div {
  background-color: red;
  margin: 0 auto;
}