javascript - 将点均匀分布在圆上-6ren

javascript - 将点均匀分布在圆上

转载作者：行者123 更新时间：2023-11-30 11:36:05

27

4

我需要将点均匀分布在圆的圆周上，但我已经失去了理智。结果并不完全是圆形的，而是螺旋形的，尤其是在点数较多的情况下。我已经进行了大力研究，但仍然无法找出哪里可能出错。

  window.onload = function() {
      var num = 15;

      var angle = (2 * Math.PI)/(num+1); var count = 0;
      var demo = document.getElementById("demo"); 

      function Dot() {
          this.angle = angle * count;
          count++;
          this.x = Math.cos(this.angle) * 200; 
          this.y = Math.sin(this.angle) * 200;
      }

      Dot.prototype.create = function() {
          var dot = document.createElement("div");
          dot.style.top = this.y + 100 + "px";
          dot.style.left = this.x + 200 + "px";
          dot.className = "dot";
          demo.appendChild(dot);
      }

      for (var i = 0; i < num; i++) {
          var d = new Dot();
          d.create(); 
      }
  }

  .dot {
      height: 20px;
      width: 20px;
      border-radius: 50%;
      background: blue;
      position: relative;
      text-align: center;
  }

    <!DOCTYPE html>
    <html>
    <head>
      <title>Metcalfe's Law Demo</title>
      <link rel="stylesheet" href="style.css">
      <script type="text/javascript" src="code.js"></script>
    </head>
        <body>
            <div id="container">
                <div id="demo">
                </div>
            </div>
        </body>
    </html>

最佳答案

主要错误非常简单 - 只需将样式 position:relative 更改为 position:absolute:

window.onload = function() {
      var num = 12;

      var angle = (2 * Math.PI)/(num); var count = 0;
      var demo = document.getElementById("demo"); 
      console.log(angle)

      function Dot() {
          this.angle = angle * count;
          count++;
          console.log(this.angle,count)
          this.x = Math.cos(this.angle) * 200; 
          this.y = Math.sin(this.angle) * 200;
      }

      Dot.prototype.create = function() {
          var dot = document.createElement("div");
          dot.style.top = this.y + 200 + "px";
          dot.style.left = this.x + 200 + "px";
          dot.className = "dot";
          demo.appendChild(dot);
      }

      for (var i = 0; i < num; i++) {
          var d = new Dot();
          d.create(); 
      }
  }

.dot {
      height: 20px;
      width: 20px;
      border-radius: 50%;
      background: blue;
      position: absolute;
      text-align: center;
  }

<!DOCTYPE html>
    <html>
    <head>
      <title>Metcalfe's Law Demo</title>
      <link rel="stylesheet" href="style.css">
      <script type="text/javascript" src="code.js"></script>
    </head>
        <body>
            <div id="container">
                <div id="demo">
                </div>
            </div>
        </body>
    </html>

关于javascript - 将点均匀分布在圆上，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44358067/

27

4

0

文章推荐： java - 在 BorderLayout 中更改/设置 JTextField 的高度

文章推荐： javascript - Roles.userIsInRole 返回 FALSE - Meteor

文章推荐： Java - 当前线程完成时启动一个线程

python随机二进制列表，均匀分布
我有代码可以制作任意长度的二进制列表，并打开随机位数: rand_binary_list = lambda n: [random.randint(0,1) for b in range(1,n+1)]
objective-c - 均匀分布
假设我有 20 个攻击回合的回合制游戏，并且玩家的攻击速度决定了他们攻击的频率，当一个人的攻击速度为 5 时，您将如何计算和/或绘制一张“谁在何时攻击”的表格另一个速度为8？ (这些是测试值，我将使用
java - hashcode() 均匀分布
我将我的类定义为: final class Key> { private final T q; private final T o; public Key(T q1, T o1
c - 均匀分布 : Bug or Paradox
想象一下10辆车随机，均匀分布在长度为1的圆形轨道上。如果位置用[0,1>范围内的C double表示，那么它们可以排序，车之间的间隙应该是车的位置前面减去后面汽车的位置。最后一个间隙需要添加 1 来
python - 带有衰减的 Numpy 均匀分布
我正在尝试构建一个均匀分布矩阵，每一行都以相同的速率衰减到 0。分布应该在 -1 和 1 之间。我正在看的是构建类似于以下内容的东西: [[0.454/exp(0) -0.032/exp(1) 0.6
css - 如何将这些 div 均匀分布？
我希望盒子像这样展开: 彼此正好相距 218 像素。我试着把它们都放在一起，但我无法做到完美! .box1, .box2 { margin: 0 20px } 有没有更好的方法来解决这个问题？忘了
algorithm - 生成强连接、均匀分布、随机的有向图
所以我一直在构建一个程序，该程序使用蒙特卡罗模拟来寻找进化图论的属性。它的一个关键功能是能够生成均匀分布的随机图，这样我们就可以确定图的广义性质。对于连接无向图的情况，我已经实现了 this 中概述的
html - 均匀分布 li 元素，具有绝对宽度
在响应式网站的页脚中，我需要均匀分布一些 li 项。这是我想要实现的: 这就是我所拥有的: 我想避免为每个 li 设置绝对宽度，以保持网站这部分的响应能力。继续进行的最佳方式是什么？最佳答案你
android - 使用 ConstraintLayout 均匀分布 View
LinearLayout 的常见用法是平均空间(权重) View ，例如: 如何使用新的 ConstraintLayout 实现这样的等间距 View ？ ConstraintLayout 引用链接:
docker - 使用 kubectl 均匀分布 docker 容器
如果我在一个集群中创建 3 个节点，我如何在容器之间均匀分布 docker 容器？例如，如果我创建一个由 3 个节点组成的集群，每个节点上有 8 个 cpu，我通过性能分析确定，当我在每个 cpu 上
wpf - 如何水平对齐按钮并使用 xaml windows phone 均匀分布
我有一个包含 ViewModel 的 ObservableCollection，它又定义了我的按钮定义。我已经做了几个小时了，一篇又一篇地阅读文章，但无济于事。我试过使用列表框，这是我最接近的。我的
android - ConstraintLayout : square views, 均匀分布，自动调整大小
如何使用 ConstraintLayout 获得 5 个均匀分布的正方形，并根据屏幕宽度设置灵活大小？最佳答案您需要创建一个连接在其父容器所有边上的小部件链(您可以将此父容器的尺寸设置为您想要/需
javascript - 将 100 件元素放入圆形容器中，使用 javascript 均匀分布
我有 100 个元素以随机顺序进入视口(viewport)。它们需要一起在 DOM 容器内形成一个圆圈。我需要一些方法来计算元素需要移动到的位置... 结构是这样的: http://codepen.i
ios - 均匀分布 4 或 5 个按钮，具体取决于用户设备
我正在尝试在 Storyboard中为 iPad 和 iPhone 创建用户界面。 iphone 版本少了 1 个按钮。所有按钮和辅助 View 都固定在底部的 LayouGuide 上。此外，我正在
css - 如何使用 flex box 均匀分布 Image 和子元素？
我正在向添加图像和一些文本输入 (FloatLabelTextInput)在 react native 应用程序中。到目前为止，我在使用 flex 将图像和文本输入均匀分布在 y 轴上时运气不佳。
css - 在
内的
- 有一个导航栏，里面是一个每个包含带有链接(这是用于导航栏) 我查看了 Google 和这个网站，但找不到我要找的东西。我想要的是能够保持我当前的风格(使用和在里面)，我想要在内
- css - 具有 max-width 和 min-width 的 DIV 均匀分布
  我正在尝试创建一个布局，其中每个 DIV 的最大宽度为 300 像素。如果屏幕是 600 像素，那么两个 100% 的 div 应该并排放置。如果屏幕是 700px，那么三个 233px(每个 DI
- c++ - 从 xorshift 64* (uint64_t) 获取 float [0,1] 均匀分布
  我实现了 Xorshift 生成器和其他生成器来比较它们在我的系统(Windows 和 Linux)上的性能。 https://en.wikipedia.org/wiki/Xorshift http:
- python - 如何使 pyplot 均匀分布 y 刻度值 [0, 1/2, 3/4, 7/8, ...]
  我想通过收敛概率曲线图比较几种算法。目前，我的图表如下所示: 这不允许看到许多曲线的差异。我希望 y Axis 为“对数”，但与值 1 不同，即我希望 y 值为 [0, 1/2, 3/4, 7/8

首页

博学

6Ren·AI

商城

javascript - 将点均匀分布在圆上