Question

我正在尝试创建一个函数，它将从句点中画出一个圆圈，只有一个起点x和y以及一个半径。有可能吗？
我希望有完整的代码可以解释它是如何工作的;我已经尝试了一年了，我仍然无法理解它是如何完成的。

Answer 1

这是数学，甚至是C中的示例程序：

~~http://pixwiki.bafsoft.com/mags/5/articles/circle/sincos.htm~~ （链接不再存在）。

position: absolute，left和top会让你画出：

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

还有其他问题吗？

Answer 2

我知道你只要求周长，但是做一个圆圈似乎更容易。

<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>

Answer 3

是的，有可能。将以下代码放入html文件中以查看它的实际效果。

快速浏览：代码生成一个点和空格数组。它选择基于通过距离公式（http://www.purplemath.com/modules/distform.htm）是否从当前x，y位置到圆心的距离小于或等于半径的长度来制作点。

<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>

Answer 4

<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>

Answer 5

<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>

Answer 6

您正在寻找Bresenham's circle algorithm。

制作一个圆圈。（周期）

6 个答案:

制作一个圆圈。 （周期）

6 个答案:

制作一个圆圈。（周期）