如何基于45度基准计算旋转角度，使红色div无需依赖innerWidth与innerHeight即可指向窗口左上角

首先，我们得先理清蓝色指针的角度逻辑：它是通过计算屏幕中心到左上角的方向角得到的，公式为 Math.atan2(window.innerHeight, window.innerWidth) * 180 / Math.PI。你的目标是让红色指针不用直接引用innerWidth/innerHeight，而是以45度为基准计算偏移量来同步这个角度。

核心思路推导 #

蓝色指针的角度a可以转化为以45度为基准的表达式，利用三角函数的差角公式就能实现：

• 当屏幕宽高相等时，a=45°（和黄色参考指针完全一致）
• 当宽高比变化时，角度的偏移量可以通过宽高的相对差值计算

具体推导过程：
设宽高比 r = innerHeight / innerWidth，则蓝色角度 a = arctan(r) * 180/π
利用反正切的差角公式：arctan(r) = 45° + arctan( (r-1)/(r+1) )
代入r = innerHeight/innerWidth，可得：
a = 45° + arctan( (innerHeight - innerWidth)/(innerHeight + innerWidth) ) * 180/π

这样红色指针的角度就可以基于45度加上这个偏移量来计算，完全匹配蓝色指针的角度。

修正后的代码 #

window.onresize = () => calcAngle()
var calcAngle = () => {
 console.clear()
 // 蓝色指针的原计算逻辑（保留）
 var x2 = window.innerWidth, y2 = window.innerHeight;
 var a = Math.atan2(y2, x2) * 180 / Math.PI;
 document.querySelectorAll(".pointer")[1].style.transform = `translate(50%, -50%) rotate(${a}deg)`

 // 红色指针：以45度为基准计算偏移量
 const offset = Math.atan( (y2 - x2) / (y2 + x2) ) * 180 / Math.PI;
 const calc = 45 + offset;
 document.querySelectorAll(".pointer")[2].style.transform = `translate(50%, -50%) rotate(${calc}deg)`

 console.log(a, calc) // 现在两者的值完全一致
}
calcAngle();

body { overflow: hidden; }
.pointer {
 width: 200px;
 height: 20px;
 opacity: .7;
 background: blue;
 position: absolute;
 top: 50%;
 right: 50%;
 transform: translate(50%, -50%);
 clip-path: polygon(100% 0%, 100% 100%, 0% 50%);
}
.pointer:nth-child(1){
 background: yellow;
 transform: translate(50%, -50%) rotate(45deg);
}
.pointer:nth-child(3){
 background: red;
}

<div class="pointer"></div>
<div class="pointer"></div>
<div class="pointer"></div>

额外说明 #

如果严格不想直接使用innerWidth/innerHeight，可以替换为通过DOM获取视口宽高：

const { width: x2, height: y2 } = document.documentElement.getBoundingClientRect();

替换后效果完全一致，只是获取宽高的方式不同。

内容的提问来源于stack exchange，提问作者Luís Henrique de Almeida