What interests you is not the code, but the algorithm, the solution.

Also interesting is how to draw a color selection gradient on js.

    5 answers 5

    So, the technique of drawing diamonds on js (to draw circles, you need to take the function of a semicircle, but the idea is exactly the same):

    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); }

    In general, everything is right for you hinting at the use of canvas , since under IE there is support from Google, and in adequate browsers it already works with a bang.

    • Just about - this is the “stupid way” I was talking about :). Only with mugs everything is more complicated, alas ... - kirelagin
    • And all the normal ones have already been offered :) It’s interesting to a person how it happens, as far as I understand :) - Alex Silaev
     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; }

    Algorithm Description:

    • determine the center, radius and number of segments,
    • cycle through each segment:
    • calculating the X and Y coordinates for a point using the trigonometry formulas,
    • adding a point to the array,
    • draw an array by coordinates in any convenient way, for example, using absolute positioning (easier - on jQuery).
    • how exactly to draw using js, html, css? - Jenkamen
    • So, as it is written below, using the algorithm that is higher :) - Alex Silaev
    • The idea from Alex Silaev is quite suitable. Only it is better for divs to set the properties left and top with constant width and height. - stanislav

    Or maybe just apply the attributes that round the corners, that is:

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

    And set a radius equal to half the length / height of the element.

    • Also a good option. Only it in IE certainly does not make it work. - kirelagin
    • IE9-beta supports border-radius - Nicolas Chabanovsky ♦
    • one
      Yes .. it means that in ten years this method can be used :) We barely barely get rid of IE6 .. thank God he finally leaves and lets us go in peace .. by the time IE9 will be considered the norm and This opportunity will finally be available, it will no longer be needed by anyone. By that time, any SVG + HTML6 will start to conquer the world :) - cy6erGn0m

    Dumb way: draw in dots, creating something like div .

    The correct way: use <canvas> or the JS library that emulates it. What is Canvas .

    • HTML 5 do not touch - Jenkamen
    • I say, "or JS library, it emulates." - kirelagin
    • code.google.com/p/explorercanvas - kirelagin
    • There is no other way. - kirelagin
    • And yet, how are the circles drawn? - Jenkamen

    See Raphaël - an example of drawing a circle is on the same page.