如何让Javascript只显示一个以鼠标为中心的聚光灯？

在我的顶部，你可以看到我在顶部有一个动画，我很难让它只显示一个聚光灯，该聚光灯集中在鼠标上，同时文本阴影效果也集中在鼠标上

我发现，通过放大浏览器，可以解决居中问题，但如果可能的话，我宁愿不为访问者设置固定的缩放级别

下面我附上了CSS，后面是我使用的JavaScript：

CSS：

#text-shadow-box {
    position: relative;
    width: 100%;
    height: 350px;
    background: #666;
    overflow: hidden;
    cursor: none;
    border: 1px solid Black;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    -webkit-user-select: none;
}

#text-shadow-box div.wall {
    position: absolute;
    top: 175px;
    left: 0;
    width: 100%;
}

#tsb-text {
    margin: 0;
    color: #999;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 80px;
    line-height: 1em;
    height: 1px;
    font-weight: bold;
    text-align: center;
}

div.wall div {
    position: absolute;
    background: #999;
    overflow: hidden;
    top: 150px;
    left: 0;
    height: 300px;
    width: 100%;
}

#tsb-spot {
    position: absolute;
    overflow: hidden;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(/spotlight.png) top center;
}

JavaScript：

<script type="text/javascript" language="javascript" charset="utf-8">

var text;
var spot;

///window.onload = init;
init();

function init() {
text = document.getElementById('tsb-text');
spot = document.getElementById('tsb-spot');

document.getElementById('text-shadow-box').onmousemove = onMouseMove;
document.getElementById('text-shadow-box').ontouchmove = function (e)    {e.preventDefault(); e.stopPropagation(); onMouseMove({clientX:     e.touches[0].clientX, clientY: e.touches[0].clientY});};

onMouseMove({clientX: 300, clientY: 200});
}


function onMouseMove(e) {
var xm = e.clientX - 300;
var ym = e.clientY - 175;
var d = Math.sqrt(xm*xm + ym*ym);
text.style.textShadow = -xm + 'px ' + -ym + 'px ' + (d / 5 + 10) + 'px  black';

xm = e.clientX - 600;
ym = e.clientY - 450;
spot.style.backgroundPosition = xm + 'px ' + ym + 'px';
}

</script>

var文本；
var点；
///window.onload=init；
init（）；
函数init（）{
text=document.getElementById（'tsb-text'）；
spot=document.getElementById（'tsb-spot'）；
document.getElementById（'text-shadow-box'）。onmousemove=onmousemove；
document.getElementById（'text-shadow-box'）.ontouchmove=function（e）{e.preventDefault（）；e.stopPropagation（）；onMouseMove（{clientX:e.touchs[0].clientX，clientY:e.touchs[0].clientY}）；}；
onMouseMove（{clientX:300，clientY:200}）；
}
移动鼠标的功能（e）{
var xm=e.clientX-300；
var ym=e.clientY-175；
var d=数学sqrt（xm*xm+ym*ym）；
text.style.textShadow=-xm+'px'+-ym+'px'+（d/5+10）+'px black'；
xm=e.clientX-600；
ym=e.clientY-450；
spot.style.backgroundPosition=xm+‘px’+ym+‘px’；
}

在当前的实现中，您正在使用一个图像作为聚光灯，可在以下行中找到：

background: url(http://www.zachstronaut.com/lab/text-shadow-box/spotlight.png) top center;

一个更好的实现是添加一个

元素，而不是在网站上当前的标题位置。您可以使用

CanvasRenderingContext2D.createRadialGradient（）

创建聚光灯效果：

您还可以看到我在这里推荐的一些类似的实现：

---

太好了，所以我创建了一个画布，然后在当前有图像url的行上，我用画布id替换它？我会将HTML元素

更改为

<对于那些不熟悉

元素的人来说，code>元素及其附带的Javascript可能会很快变得相当复杂。祝你网站好运！干杯