HTML中的鼠标后面的动画图像蒙版 [英] Animated image mask following mouse in HTML

问题描述

如果我将一个页面的光标变成一个手电筒（比如说一个圆圈），而且我想只在将光线（圆圈）穿过它时才显示图像，那么最好的方法是对这个？使用css clip？但是它只能做矩形，所以我不得不使用画布？

If I change the cursor of a page into a 'flashlight' (say, a circle), and I want to reveal an image only when passing the light (the circle) over it, what would be the best way to go about this? Using css clip? But then it can only do rectangles, so I'd have to use canvas? Perhaps there's an easy way to intersect the two images?

推荐答案

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

You can do this with a canvas easily.

这里有一个例子：

http://jsfiddle.net/gfZ5C/

在每次鼠标移动时，我们清除画布，重画图像，剪裁区域从整个画布上绘制黑色（仅绘制剪辑区域）

On every mouse move, we clear the canvas, redraw the image, make a clipping region that is a circle cut out of a rectangle, and draw black on the entire canvas (which will draw only on the clipping region)

有意义吗？

有很多方法来实现这种效果和类似的效果。你也可以用一些帆布巫术制作更多的鸽友光源。请参见我的答案在这里：画布 - 在所有透明区域填充矩形

There are a lot of ways to achieve this effect and similar effects. You can also make much fancier light sources with a bit of canvas sorcery. See for instance my answer here: Canvas - Fill a rectangle in all areas that are fully transparent

这篇关于HTML中的鼠标后面的动画图像蒙版的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！