HTML中跟随鼠标的动态图像遮罩

Question

5

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

- scottkf

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Simon Sarris · Accepted Answer

你可以很容易地使用画布来做到这一点。

以下是一个示例：

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

明白了吗？

有很多方法可以实现这种效果和类似效果。您还可以通过一些画布操作制作更复杂的光源。例如，请参见我在此处的答案：Canvas - 在所有完全透明的区域中填充矩形。