HTML中鼠标后的动画图像蒙版

Question

[如果我将页面的光标更改为“手电筒”（例如，一个圆圈），并且我只想在光线（圆圈）通过它的上方时才显示图像，那是最好的解决方法这个？使用CSS剪辑？但是，它只能做矩形，所以我必须使用画布吗？也许有一种简单的方法可以将两个图像相交？

Answer 1

您可以使用画布轻松地做到这一点。

这里是一个例子：

http://jsfiddle.net/gfZ5C/

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

有道理吗？

有很多方法可以实现此效果和类似效果。您还可以使用一些帆布魔术来制作更多奇特的光源。例如，在这里查看我的答案：Canvas - Fill a rectangle in all areas that are fully transparent

Answer 2

太好了！我发现这是在寻找一种解决方案，例如此处的首页效果：https://furrow.studio/谁能解释这是怎么做的？