javascript - 实时显示太阳在天空中的位置 - 怎么做？

Question

我正在使用来自 mourner/suncalc 的函数这让我可以得到我们太阳的当前位置。使用 getPosition()，我想在图像上或使用纯 CSS(当然可以缩放到不同的屏幕分辨率和方向)创建动画，您可以在其中看到太阳现在的真实位置页面上的时间。一个完全不必要但有趣的功能:)下图说明了我的想法。

就像我说的，我将使用哀悼者函数中的 getPosition() 函数，该函数打印 azimuth和太阳的高度。我现在面临的问题是以某种方式将此数据转换为百分比或像素，因此我上面示例图像中的太阳沿着圆线移动(是的，太阳必须被模仿地面的直线挡住)，模拟现实生活中天空中的真实位置。

方位 Angular 数据看起来像 -0.7000179547193575，高度像这样:-0.699671080144066(基于我现在所在的当前太阳位置)。

我该如何实现？我可以使用纯 CSS 来实现还是必须使用图像来实现？

Answer 1

我不知道确切的公式，但这里有一个想法，你可以如何使用 CSS 创建它，然后你只需调整不同的值。

var sun = document.querySelector('.sun');

function update() {
  var x = Math.random() * 180;
  var y = Math.random() * 40;
  sun.style.transform="rotateX("+y+"deg) rotate("+x+"deg)"
}

.container {
  width:300px;
  height:150px;
  margin:auto;
  overflow:hidden;
  border:1px solid;
}
.sun {
  margin:20px;
  padding-top:calc(100% - 40px);
  position:relative;
  border-radius:50%;
  border:1px solid grey;
  transform:rotateX(20deg) rotate(20deg);
  background:
    linear-gradient(red,red) center/100% 1px;
  background-repeat:no-repeat;
  transition:1s;
}
.sun:before {
  content:"";
  position:absolute;
  top:calc(50% - 20px);
  left:-20px;
  width:40px;
  height:40px;
  background:yellow;
  border-radius:50%;
}

<div class="container">
<div class="sun">

</div>
</div>
<button onclick="update()">update</button>

使用下面的代码，您只需将您的值转换为度数，以便旋转 sun 元素并将太阳放在正确的位置。