javascript - 如何让这个对象看坐标 250、250？

Question

我正在尝试根据我用不同语言制作的不同代码制作一个 3d 立方体，但它不会看线 250、250。我可以帮忙吗？谢谢。对于上下文，我尝试失败的代码是Math.atan((250-rOTI1B)/(250-rOTI2B))该代码应该使对象查看坐标 250、250，只要对象在 x 轴上的坐标 250 以上，代码应该可以工作，而它确实可以工作改变旋转，它没有正确设置角度。

这是代码：

var rOT1 = 0;
var rOT2 = ((Math.PI*2)/4)*1;
var rOT3 = ((Math.PI*2)/4)*2;
var rOT4 = ((Math.PI*2)/4)*3;
var rOTI1A = 0;
var rOTS1A = "";
var rOTI1B = 0;
var rOTI2B = 0;
setInterval(function(){
$("#L1").css("left", ((100*Math.sin(rOT1))+250));
$("#L1").css("bottom", ((100*Math.cos(rOT1))+250));
$("#L2").css("left", ((100*Math.sin(rOT2))+250));
$("#L2").css("bottom", ((100*Math.cos(rOT2))+250));
$("#L3").css("left", ((100*Math.sin(rOT3))+250));
$("#L3").css("bottom", ((100*Math.cos(rOT3))+250));
$("#L4").css("left", ((100*Math.sin(rOT4))+250));
$("#L4").css("bottom", ((100*Math.cos(rOT4))+250));
rOTI1B = parseInt($("#L4").css("bottom"));
rOTI2B = parseInt($("#L4").css("left"));
if(rOTI2B > 250) {
rOTI1A = Math.atan((250-rOTI1B)/(250-rOTI2B));
}
rOTS1A = "rotate("+rOTI1A+"deg)";
$("#rOTS1Ap").text(rOTS1A);
$("#rOTI1Ap").text(rOTI1A);
$("#rOTI1Bp").text(rOTI1B);
$("#rOTI2Bp").text(rOTI2B);
$("#L4").css("transform", rOTS1A);
if(rOT1 < 360) {
rOT1 = rOT1 + 0.01;
} else {
rOT1 = 0;
}
if(rOT2 < 360) {
rOT2 = rOT2 + 0.01;
} else {
rOT2 = 0;
}
if(rOT3 < 360) {
rOT3 = rOT3 + 0.01;
} else {
rOT3 = 0;
}
if(rOT4 < 360) {
rOT4 = rOT4 + 0.01;
} else {
rOT4 = 0;
}
}, 10);

html, head, body {
  margin: 0;
  padding: 0;
  line-height: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<canvas id="L1" width="1px" height="100px" style="background-color:black;position:absolute"></canvas>
<canvas id="L2" width="1px" height="100px" style="background-color:black;position:absolute"></canvas>
<canvas id="L3" width="1px" height="100px" style="background-color:black;position:absolute"></canvas>
<canvas id="L4" width="1px" height="100px" style="background-color:black;position:absolute"></canvas>

<p>bottom</p>
<p id="rOTI1Bp"></p>
<p>left</p>
<p id="rOTI2Bp"></p>
<p>value</p>
<p id="rOTI1Ap"></p>
<p>final</p>
<p id="rOTS1Ap"></p>

标签： javascripthtmljquerycss