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

Всем доброго времени суток! Есть такая интересная задача - нарисовать круг средствами 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 тоже спасибо! Поэтому заинтересованным советую обратить внимание на все ответы данного вопроса. Спасибо !

Ответ

Думаю, лучше не через угол, а через отрезки.
Задаём радиус. Проходим круг по вертикали и рисуем хорды. Половина от длины хорды - корень квадратный из разницы между квадратом радиуса и квадратом "высоты" хорды.
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; }