我们有一个需要实现的设计，其概念是用户将手电筒照射到物体上，手电筒光束（光标周围的圆圈）内的任何东西都应该显示背景图像而不是前景图像。
我正在寻找有关如何使用 jQuery 和 HTML5 技术实现理想的建议。我很确定我们可以使用 Flash 实现这一点，但我们希望它对 iOS 友好。
问问题
916 次
2 回答
1
我会建议像这样的jsfiddle覆盖背景而不是使用蒙版。我用了一个基本的 png 来模拟你的手电筒，你当然应该使用更好的图像
提防 jsfiddle 性能缓慢，但在其他任何地方都应该更好
更新：更新 jsfiddle 链接以修复错误
于 2012-06-29T16:43:23.300 回答
1
您可以使用两个 html 画布。
前景是一个 z-index 比背景高的画布，它们都是 position:absolute 并且被容器元素包含。
然后您会找到以鼠标为中心的圆圈的位置（请参阅参考资料）
您可以通过使用鼠标移动事件并从鼠标的位置减去圆的高度和宽度的一半以使其以鼠标为中心来获得它的位置。
然后，您可以操纵画布上与圆具有相同坐标的像素，使其具有 0 的 alpha 值（或者如果您不希望它完全透明，则为 0 和 1 之间的数字）
希望这足以彻底解释它。随意问任何问题。不过，我不会只分发代码，因为这不是本论坛的真正意义所在。
资源：
基础知识： http: //www.html5canvastutorials.com/tutorials/html5-canvas-tutorials-introduction/
获取圆的坐标： 按顺序计算圆坐标
于 2012-06-29T16:45:32.227 回答