当前位置：文江博客话题详情

用制作一个圆。（期间）

发布于 2024-09-19 12:34:50 字数 135 浏览 2 评论 0原文

我正在尝试创建一个函数，该函数将在仅给出起始 x 和 y 以及半径的情况下绘制一个圆。可能吗？
我想要它的完整代码，并解释它是如何工作的；我已经尝试这个方法一年了，但我仍然无法理解它是如何完成的。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

原来分手还会想你 2024-09-26 12:34:50

这是数学计算，甚至是 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

还有其他问题吗？

回复收藏 0 原文

独闯女儿国 2024-09-26 12:34:50

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

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

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>

回复收藏 0 原文

总攻大人 2024-09-26 12:34:50

是的，这是可能的。将以下代码放入 html 文件中以查看其运行情况。

快速浏览一下：代码生成一系列点和空格。它根据当前 x, y 位置到圆心的距离是否小于或等于半径长度，通过距离公式 ( 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 += (" ");
            }
        }
        dotArray += "<br \>";
    }

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

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 += (" ");
            }
        }
        dotArray += "<br \>";
    }

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

回复收藏 0 原文

铃予 2024-09-26 12:34:50

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

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

回复收藏 0 原文

两相知 2024-09-26 12:34:50

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

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

回复收藏 0 原文