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

sco*_*tkf 3 javascript html5 canvas

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

Sim*_*ris 6

您可以使用画布轻松完成此操作.

这是一个例子:

http://jsfiddle.net/gfZ5C/

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

合理?

有很多方法可以达到这种效果和类似的效果.您还可以使用一点帆布法术制作更多更美丽的光源.例如,请参阅我的答案:画布 - 在所有完全透明的区域填充矩形