使前景图像在光标周围的半径内透明

Question

我们有一个需要实现的设计，其中的概念是用户将手电筒照射到对象上，手电筒光束内的任何东西(光标周围的圆圈)应该显示背景图像，而不是前景图像。

我正在寻找关于如何理想地使用jQuery和HTML5技术实现的建议。我非常确定我们可以用闪存来实现这一点，但我们希望它是iOS友好的。

Answer 1

你可以使用两个html画布。

前景将是一个具有比背景更高的z索引的画布，并且它们都将是位置:绝对的，并且包含在容器元素中。

然后，您将找到以鼠标为中心的圆的位置(请参阅参考资料)。

您可以通过使用鼠标移动事件并从鼠标位置减去圆的高度和宽度的一半来获得它的位置，以使其围绕鼠标居中。

然后，您可以操作画布上与圆具有相同坐标的像素，使其alpha值为0(如果不希望它完全透明，则为0和1之间的一个数字)。

希望这能解释得足够透彻。请随时提出任何问题。我不打算只是分发代码，因为这不是这个论坛的真正意义所在。

资源：

基础知识：http://www.html5canvastutorials.com/tutorials/html5-canvas-tutorials-introduction/

获取圆的坐标：Calculate circle coordinates in a sequential fashion

操纵像素：http://tutorials.jenkov.com/html5-canvas/pixels.html

Answer 2

我建议使用类似这样的jsfiddle，它可以覆盖背景而不是使用遮罩。我使用了一个简单的png来模拟你的闪光灯，你应该使用一个更好的图像

注意jsfiddle上的缓慢性能，但在其他地方应该更好。

更新:更新jsfiddle链接以修复错误