Question

我正在尝试使用javascript计算圆的半径。我有以下css部分

＆＃13;

.circle {
  position: absolute;
  width: 100px;
  height: 100px;
  border-radius: 70px;
  background: red;
}

＆＃13;

<section class="circle"></section>

＆＃13;

此圆的宽度和高度为100x100。 如何计算其半径？

Answer 1

由于半径只是直径的一半，这很容易。直径为100px，每width和height。因此，半径为100px / 2 = 50px。

Answer 2

如果您只需要设置半径以形成完美的圆，请使用50%半径。这样它不依赖于宽度/高度，你不需要javascript：

.circle {
  position: absolute;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: red;
}

<section class="circle"></section>

Answer 3

虽然您可以按border-radius: 50%相对设置半径，但您只需将width / height框除以2即可获得半径。

例如：

＆＃13;

var circle = document.querySelector('.circle'),
    radius = circle.offsetWidth / 2;

circle.innerHTML = "Radius: " + radius + "px";

＆＃13;

.circle {
  position: absolute;
  width: 100px;
  height: 100px;
  
  border-radius: 50%; /* I don't know if you really need to get the value of this */
  background: red;
  
  line-height: 100px;
  text-align: center;
}

＆＃13;

<section class="circle"></section>

＆＃13;

使用javascript计算圆的半径

3 个答案: