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

问题描述 投票:3回答:2

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

javascript html5 canvas
2个回答
6
投票

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

这里是一个例子:

http://jsfiddle.net/gfZ5C/

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

有道理吗?

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


0
投票
太好了!我发现这是在寻找一种解决方案,例如此处的首页效果:https://furrow.studio/谁能解释这是怎么做的?
© www.soinside.com 2019 - 2024. All rights reserved.