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

时间:2012-06-28 17:58:17

标签: javascript html5 canvas

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

1 个答案:

答案 0 :(得分:5)

您可以轻松地使用画布执行此操作。

以下是一个例子:

http://jsfiddle.net/gfZ5C/

在每次鼠标移动时,我们清除画布,重绘图像,制作一个剪切区域,这是一个从矩形切出的圆圈,并在整个画布上绘制黑色(仅在剪裁区域绘制)

有意义吗?

有一种很多方法可以达到这种效果和类似的效果。您还可以使用一点帆布法术制作更多更美丽的光源。例如,请参阅我的答案:Canvas - Fill a rectangle in all areas that are fully transparent