使用Javascript/Canvas制作背景透明物体的部分/ Jquery

Question

所以，我正在制作一款涉及光线的游戏。它可以让你移动手电筒和灯泡等周围，以显示您所在的房间。

我想通过（可能）在div上有一个房间的背景图像，然后有另一个里面有黑色背景的div，模拟黑暗。然后，随着玩家移动光源，移除黑色背景（或使其变为透明），以便通过它们看到背景，使它们看起来像被点亮。

我已经尝试了几种方法 - 迄今为止唯一一种工作方式是使用大量1x1px黑色div作为“像素”，并以编程方式使它们透明，但实际上（真的）很慢。

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

任何意见或想法将不止欢迎。我将把您的用户名放入学分中;-)

Answer 1

您将可以使用Compositing和globalCompositeOperation而不是source-over。

值为destination-out或甚至xor似乎是您在使用透明（rgba）颜色进行绘制时所需的值。我已经为示范建造了this fiddle：在带有红色背景的画布上的黑色矩形上绘制黄色（alpha：0.5）（和white, with yellow background）。

使用destination-out与alpha的1完全使描边/填充区域透明。使用较低的alpha值，您可以调暗已经涂好的区域，并可能会有某种颜色的阴影。