使用javascript计算圆的半径

时间:2014-10-28 07:10:32

标签: javascript html css geometry

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



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

<section class="circle"></section>
&#13;
&#13;
&#13;

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

3 个答案:

答案 0 :(得分:2)

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

答案 1 :(得分:1)

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

.circle {
  position: absolute;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: red;
}
<section class="circle"></section>

答案 2 :(得分:1)

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

例如:

&#13;
&#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;
&#13;
&#13;