所以，我正在寻找一个涉及光的游戏。它可以让你移动火把和灯泡等，以显示你所在的房间。
我希望通过（或许）在div上有房间的背景图像，然后在黑色背景中使用另一个div来模拟黑暗来实现这一点。然后，当玩家移动光源时，移除黑色背景的部分（或使它们透明），这样你就可以通过它们看到背景，使它们看起来像是被照亮了。
我已经尝试了几种方法 - 到目前为止唯一一种方法是使用大量的1x1px黑色div作为'像素'并使它们以编程方式透明，但这确实（非常）慢。
我相当确定画布有一个解决方案，这个JS Fiddle是向正确方向迈出的一步，但我想要显示背景图像，而不只是“光”。
任何建议或想法都将受到欢迎。我会把你的用户名放在学分中; - ）
答案 0 :(得分：1)
您可以使用Compositing以及globalCompositeOperation以外的source-over来完成此操作。
当使用透明（rgba）颜色绘制时，值destination-out或甚至xor似乎就是您所需要的。我为演示构建了this fiddle：在带有红色背景的画布上的黑色矩形上绘制黄色（alpha：0.5）（和white, with yellow background）。
使用destination-out的alpha 1来完全使描边/填充区域透明。使用较低的alpha，你可以调暗已涂漆的区域，可能有一些颜色的阴影。