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

时间:2012-06-29 16:31:29

标签: jquery html5 transparency html5-canvas

我们需要实现一种设计,其中概念是用户将闪光灯照射在物体上,手电筒内的任何物体(光标周围的圆圈)都应显示背景图像而不是前景图像。 / p>

我正在寻找有关如何使用jQuery和HTML5技术实现理想的建议。我很确定我们可以通过Flash实现这一目标,但我们希望它能够与iOS友好。

2 个答案:

答案 0 :(得分:1)

我会建议像jsfiddle那样覆盖背景而不是使用遮罩。我使用了一个基本的png模拟你的闪光灯,你应该使用更好的图像

谨防jsfiddle表现迟缓,但在其他任何地方都要好得多

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

答案 1 :(得分:1)

你可以使用两张html画布。

前景是一个z-index比背景更高的画布,它们都是position:absolute并且被容器元素包含。

然后你会发现一个以鼠标为中心的圆圈位置(见资源)

您可以通过使用鼠标移动事件并从鼠标位置减去圆的高度和宽度的一半来将其放置在鼠标周围。

然后你可以操纵画布上与圆圈坐标相同的像素值为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