javascript - 如何改变圆的半径但保持模式？

Question

我在网上找到了一些围绕中心圆画圆的代码。如何在不影响布局的情况下更改较小圆圈的半径(目前所有圆圈都在移动并且不再以大圆圈为中心)。

当我更改 css 文件中的半径(宽度和高度)时会发生这种情况。改变大圆半径也会导致整组圆向右或向左移动(尽管它们保持对称)。

这是我的代码:

var div = 360 / 6;
var radius = 150;
var parentdiv = document.getElementById('parentdiv');
var offsetToParentCenter = parseInt(parentdiv.offsetWidth / 2); //assumes parent is square
var offsetToChildCenter = 20;
var totalOffset = offsetToParentCenter - offsetToChildCenter;
for (var i = 1; i <= 6; ++i) {
  var childdiv = document.createElement('div');
  childdiv.className = 'div2';
  childdiv.style.position = 'absolute';
  var y = Math.sin((div * i) * (Math.PI / 180)) * radius;
  var x = Math.cos((div * i) * (Math.PI / 180)) * radius;
  childdiv.style.top = (y + totalOffset).toString() + "px";
  childdiv.style.left = (x + totalOffset).toString() + "px";
  parentdiv.appendChild(childdiv);
}

#parentdiv {
  position: relative;
  width: 150px;
  height: 150px;
  background-color: red;
  border-radius: 150px;
  margin: 150px;
}

.div2 {
  position: absolute;
  width: 40px;
  height: 40px;
  background-color: red;
  border-radius: 100px;
}

<div id="parentdiv"></div>

我也想将圆圈移到屏幕中央，但我不确定如何。

我是 html/css/js 的新手，非常感谢任何帮助!

Answer 1

为了说明我的评论。 border-radius 是一个 CSS 规则，用于圆 Angular 框的 Angular 。

https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius

The border-radius CSS property rounds the corners of an element's outer border edge. You can set a single radius to make circular corners, or two radii to make elliptical corners.

要修改大小，您也可以从 css 文件进行修改，关于位置，有两个变量要更新:radius 和 offsetToChildCenter

演示

var div = 360 / 6;
var radius = 180;
var parentdiv = document.getElementById('parentdiv');
var offsetToParentCenter = parseInt(parentdiv.offsetWidth / 2); //assumes parent is square
var offsetToChildCenter = 40;
var totalOffset = offsetToParentCenter - offsetToChildCenter;
for (var i = 1; i <= 6; ++i) {
  var childdiv = document.createElement('div');
  childdiv.className = 'div2';
  childdiv.style.position = 'absolute';
  var y = Math.sin((div * i) * (Math.PI / 180)) * radius;
  var x = Math.cos((div * i) * (Math.PI / 180)) * radius;
  childdiv.style.top = (y + totalOffset).toString() + "px";
  childdiv.style.left = (x + totalOffset).toString() + "px";
  parentdiv.appendChild(childdiv);
}

html {
  display: flex;
  height: 100%;
}

body {
  margin: auto;
}

#parentdiv {
  position: relative;
  width: 150px;
  height: 150px;
  background-color: red;
  border-radius: 150px;
  margin: 150px;
}

.div2 {
  position: absolute;
  width: 80px;
  height: 80px;
  background-color: red;
  border-radius: 10px;
}

<div id="parentdiv"></div>