2

所以,我希望制作一款涉及光的游戏。它将允许您移动手电筒和灯泡等,以显示您所在的房间。

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

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

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

任何建议或想法都将受到欢迎。我会把你的用户名放在学分中;-)

4

1 回答 1

1

您将能够通过将CompositingglobalCompositeOperation.source-over

当使用透明(rgba)颜色绘制时,这些值destination-out甚至xor似乎是您所需要的。我已经为演示构建了这个小提琴:在带有红色背景(和白色,带有黄色背景)的画布中的黑色矩形上用黄色(alpha:0.5)绘画。

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

于 2012-08-05T19:17:33.153 回答