Making a circle out of . (periods) [closed]_问答_开发者

开发者_运维百科 It's difficult to tell what is being asked here. This question is ambiguous, vague, incomplete, overly broad, or rhetorical and cannot be reasonably answered in its current form. For help clarifying this question so that it can be reopened, visit the help center. Closed 10 years ago.

I am trying to make a function that will draw a circle out of periods with only being given a starting x and y and a radius. Is it possible?

I would like to have the full code for it will an explanation for how it works; I've been trying this for 1 year now and I still can't fathom how it may be done.

Here's the maths and even an example program in C:

~~http://pixwiki.bafsoft.com/mags/5/articles/circle/sincos.htm~~ (link no longer exists).

And position: absolute, left and top will let you draw:

http://www.w3.org/TR/CSS2/visuren.html#choose-position

Any further questions?

I know you asked for just the circumference, but it seemed easier to do a filled circle.

<html>
  <head>
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("jquery", "1");
    </script>
  </head>
  <body>
    <script type="text/javascript">
      function drawCircle(left, top, radius) {
        var pre = $("<pre/>").css({position: "absolute", top: top, left: left}).appendTo($("body"));
        var testSpan = $("<span> </span>").appendTo(pre);
        var cellWidth = testSpan.width();
        var cellHeight = testSpan.height();
        testSpan.remove();
        var diameter = 2 * radius;
        var dotArray = [];
        for (var row = 0; row <= diameter / cellHeight; row++) {
          for (var column = 0; column <= diameter / cellWidth; column++) {
            var cellDY = Math.abs(row * cellHeight - radius) - cellHeight / 2;
            var cellDX = Math.abs(column * cellWidth - radius) - cellWidth / 2;
            var distance = Math.pow(cellDY, 2) + Math.pow(cellDX, 2);
            if (distance < Math.pow(radius, 2)) {
              dotArray.push(".");
            } else {
              dotArray.push(" ");
            }
          }
          dotArray.push("<br/>");
        }
        pre.html(dotArray.join(""));
      }
      drawCircle(20, 20, 200);
  </script> 
  </body>
</html>

Yes, it is possible. Put the below code into an html file to see it in action.

A quick run through: The code generates an array of dots and spaces. It chooses to make a dot based on if the distance from the current x, y position to the center of the circle is less than or equal to the length of the radius via the distance formula ( http://www.purplemath.com/modules/distform.htm ).

<div id= "mydiv" style="font-family: monospace"> </div> 

<script type="text/javascript"> 
    var x = 2; //starting x,y position of circle
    var y = 5; 
    var rad = 4; //radius of circle

    var width = 10; //width and height of display
    var height = 10;

    var dotArray = "";

    for (var i=0;i<width;i++){
        for (var j=0;j<height;j++){
            if (Math.sqrt( Math.pow(i-y, 2) + Math.pow(j-x, 2)) <= rad){
                dotArray += (".");
            } else {
                dotArray += ("&nbsp;");
            }
        }
        dotArray += "<br \>";
    }

document.getElementById('mydiv').innerHTML = dotArray;
</script>

<script type="text/javascript">
var e=0;
function a() {
    if(e<=7200){
        var f = (180-e)/2;
        var g = 90-e;
        var h = f-g;
        var j = Math.sin(g)*300;
        var n = Math.cos(g)*300;
        var m = 300-j;
        var newX = 900-m;
        var newY = 300+n;
        document.write("<p class=lol style=position:absolute;left:"+newX+";top:"+newY+">.</p>");
        e++;
    }
}

setInterval("a()", 1);
</script>

<script type="text/javascript">
var e=0;
function a() {
    if(e<=7200){
        var f = (180-e)/2;
        var g = 90-e;
        var h = f-g;
        var j = Math.sin(g)*300;
        var n = Math.cos(g)*300;
        var m = 300-j;
        var newX = 900-m;
        var newY = 300+n;
        document.write("<p class='lol' style='position:absolute;left:"+newX+";top:"+newY+"'>.</p>");
        e++;
        a();
    }
}
a();

</script>

You are looking for Bresenham's circle algorithm.