Javascript HTML中鼠标后的动画图像掩码

如果我把一个页面的光标变成一个“手电筒”（比如说，一个圆圈），并且我只想在光线（圆圈）经过它时才显示一个图像，那么最好的方法是什么？使用css剪辑？但它只能做矩形，所以我必须使用画布？也许有一种简单的方法可以使两幅图像相交？

你可以用画布轻松地完成这项工作

下面是一个例子：

每次鼠标移动时，我们都会清除画布，重新绘制图像，制作一个从矩形中切出的圆形剪辑区域，并在整个画布上绘制黑色（仅在剪辑区域上绘制）

有道理吗

---

有很多方法可以达到这种效果和类似的效果。你也可以用一点帆布魔法来制作更华丽的光源。例如，请参见此处我的答案：

我意识到这太晚了，我使用了你的答案，但我一定是打错了接受，对不起@SimonSarris用另一张图像代替黑色并创建一种x射线效果会很简单吗？