Javascript 在CSS中创建透明遮罩覆盖

所以我在做这个游戏，角色在黑暗的山洞里用手电筒移动。我希望火炬照亮角色周围的区域，以便玩家可以看到角色。我可以用图像来做这件事，但是图像必须至少是2000x2000px才能覆盖角色周围足够的区域。因为图像是2000x2000，所以我的FPS从50降到了30。无论如何，在CSS中这样做？请注意，黑色区域下的可见区域不是图像，而是带有背景的div。顺便说一句，如果你想知道的话，我正在制作HTML/javascript游戏

---

您可以使用box shadow属性在CSS对象周围生成阴影。要获得“负”阴影，可以使用应用于整个屏幕的“inset”属性：

box-shadow: inset 3px -5px 81px 97px rgba(0,0,0,0.89);

第一个和第二个px属性允许它围绕中心移动负阴影。 然后有模糊半径、扩散半径和RGB颜色（不透明度）

---

您可以使用这些设置查看结果，例如在工具中。（不要忘记末端的插入切换）。

为什么不定位：固定图像，无需移动？

CSS

径向渐变，一端为黑色，另一端为rgba（0,0,0,0）

EDIT：从50 FPS下降到30 FPS是因为每次角色移动时，我都必须移动整个2000x2000px图像。所以我想知道是否有可能仅仅用5000x5000px div填充整个游戏区域，比如说，背景黑色不会移动，并在其中创建移动的洞，以图像遮罩或其他方式跟随角色：）可能值得一读-

遮罩图像

，也许，但我的印象是，浏览器支持太参差不齐了，还不可能真正可行。