我们有一个需要实现的设计，其概念是用户将手电筒照射到物体上，手电筒光束（光标周围的圆圈）内的任何东西都应该显示背景图像而不是前景图像。
我正在寻找有关如何使用 jQuery 和 HTML5 技术实现理想的建议。我很确定我们可以使用 Flash 实现这一目标，但我们希望它对 iOS 友好。
【问题讨论】：
canvas developer.mozilla.org/en/Canvas_tutorial/Using_images。除此之外，我不确定......
标签： jquery html transparency html5-canvas
您可以使用两个 html 画布。
前景是一个 z-index 比背景高的画布，它们都是 position:absolute 并被容器元素包含。
然后您会找到以鼠标为中心的圆圈的位置（请参阅参考资料）
您可以通过使用鼠标移动事件并从鼠标的位置减去圆圈的一半高度和宽度以使其以鼠标为中心来获得它的位置。
然后您可以操作画布上与圆具有相同坐标的像素，使其 alpha 值为 0（如果您不希望它完全透明，则为 0 和 1 之间的数字）
希望这能充分解释清楚。随意问任何问题。不过，我不会只分发代码，因为这不是这个论坛的真正意义。
资源：
基础知识： http://www.html5canvastutorials.com/tutorials/html5-canvas-tutorials-introduction/
获取圆的坐标： Calculate circle coordinates in a sequential fashion
【讨论】：
我会建议像这样jsfiddle 覆盖背景而不是使用蒙版。我用了一个基本的 png 来模拟你的手电筒，你应该使用更好的图像
提防 jsfiddle 性能缓慢，但在其他地方应该会好得多
更新：更新 jsfiddle 链接以修复错误
【讨论】：