如何用JS实现随光标旋转的中心点固定clip-path三角形手电筒效果

你现有代码的两个问题根因：

1. 三角形另外两个顶点直接绑定在光标位置附近做小范围偏移，没有沿光标方向向外延伸到屏幕外，所以无法覆盖到边缘
2. 固定的x坐标偏移逻辑在光标位于x=50%的纵向中线时，两个顶点x值重合，导致三个点几乎共线，区域面积趋近于0

解决方案 #

核心思路是基于固定张角+射线延伸实现：以屏幕中心为顶点，计算光标相对于中心的方向，固定三角形张开角度（可自定义），将另外两个顶点沿张角方向延伸到超过屏幕对角线的长度，确保始终覆盖到屏幕边缘。

完整代码如下：

HTML

<div class="container">
  some lorem ipsum here
</div>

CSS

body{
  box-sizing: border-box;
  margin:0;
  padding:0;
  height: 100vh;
  width:100vw;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: aliceblue;
}
.container{
  font-size: 2rem;
  clip-path: polygon(50% 50%, 30% 100%, 70% 100%);
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  /* 额外加黑底白字更方便看手电筒效果，不需要可删除 */
  background: #000;
  color: #fff;
}

JS

const container = document.querySelector(".container");
// 固定三角形张角，单位度，可自行调整大小
const OPEN_ANGLE = 30;
const halfAngle = (OPEN_ANGLE * Math.PI) / 180 / 2;
// 屏幕中心坐标
const centerX = window.innerWidth / 2;
const centerY = window.innerHeight / 2;
// 延伸长度取屏幕对角线长度，确保足够超出屏幕边缘
const extendLength = Math.hypot(window.innerWidth, window.innerHeight);

window.addEventListener("mousemove", (e) => {
  // 计算光标相对于中心的角度
  const dx = e.clientX - centerX;
  const dy = e.clientY - centerY;
  const currentAngle = Math.atan2(dy, dx);
  
  // 计算两个边的角度
  const angle1 = currentAngle - halfAngle;
  const angle2 = currentAngle + halfAngle;
  
  // 计算两个延伸到屏幕外的顶点坐标
  const x1 = centerX + extendLength * Math.cos(angle1);
  const y1 = centerY + extendLength * Math.sin(angle1);
  const x2 = centerX + extendLength * Math.cos(angle2);
  const y2 = centerY + extendLength * Math.sin(angle2);
  
  // 应用clip-path
  container.style.clipPath = `polygon(${centerX}px ${centerY}px, ${x1}px ${y1}px, ${x2}px ${y2}px)`;
});

// 如果需要适配窗口大小变化，可额外添加resize事件监听更新中心坐标和延伸长度

效果示意

内容的提问来源于stack exchange，提问作者awri.l