javascript - HTML 中鼠标跟随的动画图像蒙版

Question

如果我将页面的光标更改为“手电筒”(例如，一个圆圈)，并且我只想在光线(圆圈)通过它时显示图像，那么最好的方法是什么对这个？使用 css 剪辑？但是它只能做矩形，所以我必须使用 Canvas ？也许有一种简单的方法可以将两个图像相交？

Answer 1

您可以使用 Canvas 轻松完成此操作。

这是一个例子:

http://jsfiddle.net/gfZ5C/

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

有道理吗？

有很多方法可以实现这种效果和类似效果。你也可以用一点 Canvas 魔法来制作更漂亮的光源。例如，在这里查看我的回答:Canvas - Fill a rectangle in all areas that are fully transparent