使用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值，您可以調暗已經塗好的區域，並可能會有某種顏色的陰影。