javascript - 使用 Javascript/Canvas/Jquery 使部分背景透明

Question

所以，我希望制作一款涉及光的游戏。它可以让你四处移动手电筒和灯泡等，以显示你所在的房间。

我想通过(也许)在一个 div 上放置一个房间的背景图像，然后在其中放置另一个具有黑色背景的 div 来模拟黑暗来实现这一点。然后，当玩家四处移动光源时，移除黑色背景的碎片(或使它们透明)，这样您就可以透过它们看到背景，让它们看起来像是被照亮了。

我已经尝试了几种方法 - 到目前为止唯一有效的方法是使用大量 1x1px 黑色 div 作为“像素”并以编程方式使它们透明，但这真的(真的)很慢。

我相当确定 canvas 有解决方案，而这个 JS Fiddle是朝着正确方向迈出的一步，但我想显示背景图像，而不仅仅是“光”。

我们非常欢迎任何建议或想法。我会把你的用户名放在致谢名单中 ;-)

Answer 1

您可以使用 Compositing 来做到这一点使用 globalCompositeOperation 而不是 source-over。

在使用透明 (rgba) 颜色绘制时，值 destination-out 甚至 xor 似乎就是您所需要的。我 build 了this fiddle演示:在红色背景(和 white, with yellow background)的黑色矩形上用黄色(alpha:0.5)绘画。

使用 destination-out 和 alpha 为 1 使描边/填充区域完全透明。使用较低的 alpha，您将能够使已经绘制的区域变暗，可能带有某种颜色的阴影。